Create a Discussion

New Gmail App Not Respect Full Width

Keegan Linder posted 2016-11-11 20:07:50

I can't seem to get the brand new iOS Gmail App to respect a full width table. It leaves about 10px of padding on the right side. Anyone run into this or find a solution yet? Obviously below is a stripped down sample, but even it won't respond.

<html>
    <head>
    <title>Title</title>
    </head>
    <body>
        <table width="100%" align="center" bgcolor="#ff0000" border="0" cellpadding="0" cellspacing="0" style="width:100%">
            <tr>
                <td height="84" align="center">
                    TEST
                </td>
            </tr>
        </table>
    </body>
</html>

Thanks.
-T.

miah roberts replied 2016-11-11 21:08:27

This is from Mark Robbins in the #emailgeeks slack channel

<head>
<style>
.body{
    min-width:100vw;
}
</style>
</head>
<body class="body">
...

you can also fill the rest of the left/right space with colour if you add

.body{
    min-width:100vw;
    outline:20px solid green;
}

More information on this fix from Eric Lepetit
problem with this fix is that Gmail Android doesn't like it. Viewport is not respected so email looks like the mobile responsive version on a desktop layout (layout stretched)
we use the old Inbox hack placed before the closing </body> tag

<section>
  <div id="new-gmail-hack" style="white-space: nowrap; font: 15px courier; line-height: 0; display: none;">
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
  </div>
</section>

but removed a few  
and added the Gmail targeting trick:

<style type="text/css">
u + #new-gmail-hack {
  display: block !important;
}
</style>

and this is for getting rid of the extra right margin but the other left/right margin is part of the UI

you can join the slack channel here: https://email.geeks.chat/

Reply to miah roberts

Anne Tomlin replied 2017-02-16 18:04:25

I'm finding that using this causes Android Gmail app to shift the content right, obscuring some of the content. Is there a fix for that?

Keegan Linder replied 2016-11-11 21:11:42

Thanks Miah (and Eric). I'll drop those fixes in and see what happens.

Keegan Linder replied 2016-11-13 01:55:35

Hey Miah.

Thanks, this all worked great. I do have one question though. I am unfamiliar with the Gmail targeting trick. What does the "u +" do in targeting the gmail hack div?

Thanks again.

miah roberts replied 2016-11-13 17:47:43

Gmail changes the doc type to a u tag, haha so weird right? Here is a great post from Justin Khoo about this as well http://freshinbox.com/blog/targeting-new-gmail-css/

Michael Reid replied 2016-11-18 15:35:34

I managed to fix it. The main table width was set to 100% and "did not push it to max" in Gmail app. However, changing it to fixed width crashed 2 layout collumn (stacking tables on the mobile).

Simply add an independent table with fixed width of 350 and hide it on mobile:

main body:

<!-- GMAIL APP MISALIGNMENT FIX: BEGIN -->  

<tr>
<span class="emailHideSPAN">
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0" width="350px">
<tr>
<td height="1" style="line-height: 1px; font-size: 1px;">&nbsp;</td>
</tr>
</table>
</td>
</span>
</tr>

<!-- GMAIL APP MISALIGNMENT FIX: END -->  


css code for media queries:

span[class=emailHideSPAN] {
    display: none !important;
}

Reply to Michael Reid

Alexandru Besciu replied 2017-09-06 16:34:43

Your solution worked.Thanks! A small tip: put the class="emailHideSPAN" from SPAN to first TR, then remove the SPAN tags. It's not W3C compliant to have a SPAN wrapping a TD.

Daniel Mul replied 2016-11-21 12:48:08

This worked for me:

u + .body{
    min-width:100vw;
    }

Put this within your media query

Reply to Daniel Mul

Michael Reid replied 2016-11-25 10:17:21

thanks Daniel

i added it to the media queries as you suggested but it did not work for me. I thought that Gmail app stripped the css code and the fix you suggested gets wiped out?
see my email after the fix:
https://s15.postimg.org/ruznbqxff/IMG_7560.png

Daniel Mul replied 2016-11-25 15:30:09

I notist the fix I used causes problems on gmail app for android
so, i don't think you want to use it

Jamie B. replied 2017-11-17 15:55:56

Hey Daniel. I tried this solution and it worked perfectly on my code however it causes issues on Gmail Android 6 & 7.

Juliana Padron replied 2018-08-31 21:42:29

If you're still having this issue, try to use this at the HTML head:

@media screen and (max-width: 420px) {
u ~ div {
min-width: 95vw;
margin: 0 auto !important;
}
}

and for the body tag, add a 1px border, which color can vary according the email design. I used a white border and my body tag is like this:

This made my HTML email to get centralized in Android's Gmail App, in which it was always with an extra left space.

Reply to Juliana Padron

Nathan Iverson replied 2016-11-11 20:38:13

Try setting the margin and padding on the body to 0.

Reply to Nathan Iverson

Keegan Linder replied 2016-11-11 21:09:06

No dice.

If I set the width to a number larger than screen width (width="400") it will fill the whole area, but scales the content accordingly and obviously kills the responsiveness.

<!DOCTYPE html>
<html>
    <head>
    <title>Title</title>
    </head>
    <body style="padding: 0; margin: 0;">
        <table width="100%" bgcolor="#ff0000" border="0" cellpadding="0" cellspacing="0" style="width: 100%">
            <tr>
                <td width="100%" height="84" align="center">
                    TEST
                </td>
            </tr>
        </table>
    </body>
</html>

The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

New Gmail App Not Respect Full Width

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password