Vecta Vecta - 2 months ago 5
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>
Comments