email-bugs
email-bugs copied to clipboard
hteumeuleu
Gmail on iOS and Android don't always display emails at full width
Gmail's mobile apps have a custom behavior that don't always display emails at full width. Consider the following example:
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%; background:#3cbc67;">
<tr>
<td style="padding:1rem;">
<p style="margin:0; font:1rem sans-serif; color:#fff;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae impedit tempore amet. Totam eum quod magnam similique tenetur omnis, a, ipsam dolor cum nisi unde ex qui, fugiat ducimus eos?</p>
</td>
</tr>
</table>
You'll get the following rendering, with a 16px non removable margin on the left but a 62px margin on the right.
By copying the content and pasting it, I was able to inspect the code transformed by Gmail. The previous example became:
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="word-spacing: 1px; -webkit-text-size-adjust: auto; width: 273px; background-color: rgb(60, 188, 103);">
<tr>
<td style="padding:1rem;">
<p data-originalfontsize="1rem" data-originalcomputedfontsize="16" style="margin:0; font-stretch: normal; line-height: normal;"><font color="#000000" face="UICTFontTextStyleBody" size="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae impedit tempore amet. Totam eum quod magnam similique tenetur omnis, a, ipsam dolor cum nisi unde ex qui, fugiat ducimus eos?</font></p>
</td>
</tr>
</table>
There are two popular fixes for this bug, that both consist in forcing a width on the table larger than the available width in Gmail.
- Using a
u + #body { width:100vw !important; }rule. Gmail replaces the doctype of an email by a<u>tag. By adding a specificidto the<body>of your email (like<body id="body">), you can target Gmail only. - Setting a width at specific width inside media queries. This fix was described here.
@media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
/* iPhone 5 and 5S */
.email-container {
min-width: 320px !important;
}
}
When using these fixes, here's the obtained render. There is now an equal 14.5px margin on both horizontal sides (29px at 2x on an iPhone SE screen).
Gmail transforms the main table as below, adding a data-zoom="1" attribute and a zoom:1 property:
<table border="0" cellpadding="0" cellspacing="0" role="presentation" data-zoom="1" style="width: 320px; zoom: 1; background:#3cbc67;">
What I can't wrap my head around is that the table's width is also set to 320px, even though the real displayed width is of 291px (on a 320px wide iPhone SE screen).
I've made some tests... and little bit confused. Results is:
With u + #body:
On GMail iOS fixed, but on Android 6,7 – bug.
Without u + #body:
On GMail iOS with extra space, but on Android 6,7 – all fine.
Tested with EOA.
I've seen the same behavior as @burdyga mentioned when applying the fixes listed above. Couldn't ever get it to look good in both iOS and Android.
Going by what @burdyga has said. What about adding in a media query to target iOS with the gmail fix then it would look fine in the Android 6 & 7?
Something like:
@media screen and (-webkit-min-device-pixel-ratio:0) {
u + #body { width:100vw !important; }
}
Going by what @burdyga has said. What about adding in a media query to target iOS with the gmail fix then it would look fine in the Android 6 & 7?
@Sayo1337, Doesn't works for me :(
I check this today on iOS version 12.4.1 And Gmail app version 6.0.191023 and it seems fine to me. I used putsmail to send the email
But as of today 3 December 2019, Litmus.com still using iOS version 10.3.2 and Gmail version we can't know. and it's broken in that
Hi,
Don't know if this helps anyone.
I found if I add the below
u + #body { width:100vw !important; max-width: 100%!important; }
It seems to centre in both android and gmail for me now, according the the screengrabs from EOA.
If I remove the max-width: 100%!important; it forces the table in android over to the right, but this seems to keep it centred.
Thought I would share :-)
thanks, Lucy
Hello Lucyanne,
The code worked great for mobile. However it messed up the gmail version of desktop. My email is now right aligned. (You have to scroll to the right to see entire email)
Hi @jreasydoesit30 Sorry to hear about desktop on Gmail. Have you tried just referencing this inside a media query so it targets mobile only? Thanks.
@lucyanne, Yes a mistake on my part. I put it in the wrong place. It works perfectly now! Thanks a lot.
@lucyanne You are awesome, thank you for the tip re: "just referencing this inside a media query so it targets mobile only." This worked to show full-bleed images for Apple Mail mobile, Gmail mobile, Outlook mobile. Related: https://litmus.com/community/discussions/6865-ios11-makes-strange-not-100-width-in-native-mail-app
