Vecta Vecta - 8 months ago 30
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

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>