CODEWITHSUNDEEP
androidhtmlemailresponsive-designgmail
nebulousecho
nebulousecho

Reputation: 366

100% width tables don't work in Gmail Android

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?

Upvotes: 23

Views: 35538

Answers (5)

Joe Lau
Joe Lau

Reputation: 449

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

Upvotes: 0

insulaner
insulaner

Reputation: 141

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

source

Upvotes: 13

Mark
Mark

Reputation: 69

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.

Upvotes: 2

JoePhillips
JoePhillips

Reputation: 721

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.

Upvotes: 51

user3799724
user3799724

Reputation:

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.

Upvotes: -1

Related Questions