Vecta Vecta - 1 year ago 47
CSS Question

Control Inline Block Element Size on Mobile in Gmail

I'm trying to setup some links in an email and I'm having trouble getting them to display correctly.

<p style="display: block; text-align: center;font-size: 20px;line-height:40px;width: 85%; margin: 0 auto;font-weight:300;margin-top:20px;">
<a style="width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 0 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com"">Link One</a>
<a style="width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com" >Link Two</a>
</p>


They appear fine on desktop (side by side). On mobile I'd like them to stack but, as expected, they only take up 45% of the screen which is too small.

Since I can't reliably use media queries because of Gmail, is there any way to make them stack and appear at a reasonable width on mobile?

Thank you

Answer Source

Add a min-width to your anchor's, and since you re-style the p, use a div instead.

<div style="text-align: center;font-size: 20px;line-height:40px;width: 85%; margin: 0 auto;font-weight:300;margin-top:20px;">
    <a style="min-width: 300px; width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 0 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com"">Link One</a>
    <a style="min-width: 300px; width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com" >Link Two</a>
</div>