Closed hedgefield closed 5 years ago
afercia
commented
7 years ago I think this could be implemented adding one more box shadow to the mobile snippet preview. Pros: box shadows don't affect the box size. Quickly edited in the browser:
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 10px #f2f2f2;
Maybe we should consider to review the padding around the box.
hedgefield
commented
7 years ago Oh cool, I didn't know you could compound values like that. Looks good. What amount of padding would you suggest? I chose 10px to give the illusion of the background as it would appear on the google page (that's the #f2f2f2) without making it too attention-grabbing.
afercia
commented
7 years ago Oh the 10px grey is fine, it's more about the alignment of the whole box on the left (and right):
it's different from the proposed design which has the grey "border" aligned with the "eye icon" (and the buttons below).
hedgefield
commented
7 years ago Ahh right I see. I think adding margin/padding there would certainly look nicer. I was thinking if it would cause a shift in the snippet text when you switch between this and the desktop view.. but that already happens because the mobile box has padding, right? So then I think we might as well align it nicely.
afercia
commented
7 years ago Yep it would be nice to avoid, or at least reduce, the text "switch" 🙂
jdevalk
commented
5 years ago I'm all for improving this, but since the snippet preview has been reactified, this isn't very actionable anymore. Can you make a new ticket @hedgefield, ping me in that and then close this one?
hedgefield
commented
5 years ago Closing in favor of https://github.com/Yoast/wordpress-seo/issues/12921
To match the look of the mobile snippet preview more closely to reality, and to differentiate it better from the desktop preview, I propose the following CSS and HTML changes:
REMOVE the margin-bottom property from .snippet-editor__view--mobile
ADD: < div id="snippet-preview-border" >
ADD: .snippet-preview-border { background-color: #f2f2f2; padding: 10px; max-width: 350px; }
NOTE: I added the above div around the snippet preview as a quick hack, but that div doesn't go away if you switch to desktop view, so feel free to adapt it to work as intended.