KL
6
New Gmail App Not Respect Full Width
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.
This is from Mark Robbins in the #emailgeeks slack channel
you can also fill the rest of the left/right space with colour if you add
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>tagbut removed a few
and added the Gmail targeting trick:
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/
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?
Thanks Miah (and Eric). I'll drop those fixes in and see what happens.
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.
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/
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:
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.
This worked for me:
Put this within your media query
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
I notist the fix I used causes problems on gmail app for android
so, i don't think you want to use it
Hey Daniel. I tried this solution and it worked perfectly on my code however it causes issues on Gmail Android 6 & 7.
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:
<body bgcolor="#ffffff" style="background-color:#ffffff; border:1px solid #ffffff;">
This made my HTML email to get centralized in Android's Gmail App, in which it was always with an extra left space.
Try setting the margin and padding on the body to 0.
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.