21

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?

nebulousecho
  • 326
  • 1
  • 2
  • 9
  • 3
    @Fabio html5 is certainly not supported in email clients. For emails, unfortunately, the best practice is to use "seriously deprecated" code. http://stackoverflow.com/questions/2935472/html-email-tables-or-divs – rds Sep 08 '14 at 23:23
  • 10
    If you haven't found a solution try style="width:100%!important" like ... I'm working on this problem now. Gmail likes to strip most of the css but if you add a label !important will keep them most of the time, I managed to get my email to generate 100% as 1366px (my screensize) however this leaves a horizontal scrollbar. If I found the full solution I'll post it here. Or if you solved it I'd love to know, I've seen it done in other emails so it's possible.
     – JoePhillips Sep 23 '14 at 23:09
  • 2
    @JoeyPhillips This worked for me! You deserve credit for the correct answer. The key is indeed adding !important to the width declaration inside the style attribute. Thank you for sharing this. – Matty B Sep 24 '14 at 18:46
  • 2
    @JoeyPhillips I agree with Matty B, this did work. If you want to add your comment as an answer, I'll gladly mark it as the correct answer. – nebulousecho Sep 26 '14 at 18:06
  • @Matty B &nebulousecho You're welcome, that's what stackoverflow is for and I formatted the comment as an answer. – JoePhillips Sep 26 '14 at 20:17

5 Answers5

50

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.

JoePhillips
  • 711
  • 7
  • 15
  • 1
    This 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! – Artiom Chilaru Feb 12 '15 at 15:40
  • This has frustrated me for the past week. I wish gmail would fix this issue! Thank you! – Nina Morena Mar 10 '16 at 15:17
  • Did it stopped working? Gmail is auto-resizing my tables on Android client but offers option to user disable auto-resize, which solves the issue... – MatheusJardimB Mar 31 '16 at 15:03
13

So remind Gmail that 100% means 100% by adding min-width:100% to our <table>.

source

insulaner
  • 141
  • 1
  • 3
  • 1
    This 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. – Joseph Race Apr 26 '16 at 15:32
  • 2
    This 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! – Cow Aug 15 '17 at 18:25
2

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;">&nbsp;<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.

Mark
  • 69
  • 1
  • 5
0

Looks like we have faced same full-width table color issue on Gmail app; while my case was on iOS version. You can see the background-color cannot fill with full-width below:

Before the fix

My fix is adding min-width:100% in css style, i.e.

<table border="0" cellspacing="0" cellpadding="0" width="100%" style="min-width: 100%; color: #555555; background-color:#def6f7" bgcolor="#def6f7">

After the fix

Joe Lau
  • 439
  • 5
  • 10
-1

I'm not familiar with making clients/sites/etc for anything that's not designed for PC, so I'm not sure if this will work or not, but try doing this.

<center>
<h1 style="color:#888888;">Android Client Header</h1>
<p>Demonstration</p>
</center>
<hr color="#000000" style="height:11px;">
<hr color="#FF0000" style="height:2px;">
<hr color="#000000" style="height:1px;">
<hr color="#FF0000" style="height:30px;">

<h3 style="color:#0070ff;">Content 1</h3>
<p color="#808080">E-mail Here</p>
<hr color="#000000">
<center>
<h1 style="color:#db880f;text-size:10px;">Android Client Footer</h1>
<p style="color:#888888;">Demonstration</p>
</center>

Even though you lose the "table" element feature, this is a sample example I came up with, trying my best to matchup your color and size settings for the line decorations.