100% width tables don't work in Gmail Android
Solution 1
If you haven't found a solution try
style="width:100%!important" like
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000" style="width:100%!important">
Gmail likes to strip most of the CSS, but if you add a label !important will keep them most of the time.
Solution 2
So remind Gmail that 100% means 100% by adding min-width:100% to our <table>.
Solution 3
After extensive testing the solution as follows will work for any vertical spacing issues across all email clients (available on Litmus), incl. Gmail App on Andriod.
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100% !important;">
<tr>
<td bgcolor="#00a0cc" height="25" style="background:#00a0cc;height:25px;line-height:0;font-size:0;"> <br /></td>
</tr>
</table>
Key point is to apply width:100% !important
to the table, will not work on applying to the td
.
This is also the best solution for replacing vertical spacer images.
nebulousecho
Production Design Specialist for Inc. Magazine in New York City.
Updated on September 25, 2020Comments
-
nebulousecho over 3 years
I'm trying to build a responsive email – it's actually working pretty great across the board, except for some small pieces that aren't co-operating in Gmail for Android.
I have these seriously simple black stripes that sit at the top of the email as a decorative element:
<table width="100%" cellpadding="0" cellspacing="0" align="center" valign="top"> <tr><td width="100%" height="11" bgcolor="#000000"></td></tr> <tr><td width="100%" height="2" bgcolor="#FFFFFF"></td></tr> <tr><td width="100%" height="1" bgcolor="#000000"></td></tr> <tr><td width="100%" height="30" bgcolor="#FFFFFF"></td></tr> </table>
Yet they don't display as anything more than a tiny strip of black and white that resembles an ultra-thin exclamation point on the Gmail Android app.
Likewise, there is a footer that isn't spanning the full width of the email:
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000"> <tr> <td> <table width="650" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000"> <tr> <td align="right" class="footer"> <img src="images/footer.png" /> </td> </tr> </table> </td> </tr> </table>
Any suggestions on how to make these span the full width of the email?
-
Artiom Chilaru over 9 yearsThis should be marked as the right answer! It was yet another one of those annoying issues that I couldn't trace, but this fixes it!
-
Nina Morena about 8 yearsThis has frustrated me for the past week. I wish gmail would fix this issue! Thank you!
-
MatheusJardimB about 8 yearsDid it stopped working? Gmail is auto-resizing my tables on Android client but offers option to user disable auto-resize, which solves the issue...
-
Joseph Race about 8 yearsThis works in my case. You can then add min-width: 0 inside a media query to remove this rule for email clients that support media queries.
-
Cow almost 7 yearsThis was the missing piece for my issue! In my cause, I was trying to create a fixed width e-mail template that was always 580px, but Gmail would turn it into a fluid width table. Adding
width:580px!important;min-width:580px!important;
was what it needed. Cheers!