Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Gmail on iOS and Android don't always display emails at full width #57

Open
hteumeuleu opened this issue Feb 15, 2019 · 11 comments
Open

Gmail on iOS and Android don't always display emails at full width #57

hteumeuleu opened this issue Feb 15, 2019 · 11 comments
Labels
Gmail Webmail, iOS and Android apps

Comments

@hteumeuleu
Copy link
Owner

hteumeuleu commented Feb 15, 2019 •
edited
Loading

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.

img_4629

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.

  1. Using a u + #body { width:100vw !important; } rule. Gmail replaces the doctype of an email by a <u> tag. By adding a specific id to the <body> of your email (like <body id="body">), you can target Gmail only.
  2. 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).

img_4629

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).
@hteumeuleu hteumeuleu added the bug label Feb 15, 2019
@burdyga
Copy link

burdyga commented Feb 15, 2019

I've made some tests... and little bit confused. Results is:

With u + #body:
On GMail iOS fixed, but on Android 6,7 – bug.
with100vw

Without u + #body:
On GMail iOS with extra space, but on Android 6,7 – all fine.
without100vw

Tested with EOA.

@revelt
Copy link

revelt commented Feb 15, 2019

интересно..

@mattdionne
Copy link

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.

@Sayo1337
Copy link

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; }
}

@burdyga
Copy link

burdyga commented Mar 18, 2019

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 :(

@hteumeuleu hteumeuleu added Gmail Webmail, iOS and Android apps and removed bug labels Jul 10, 2019
@jitendravyas
Copy link

jitendravyas commented Dec 3, 2019 •
edited
Loading

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
image

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
image

@lucyanne
Copy link

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

@jreasydoesit30
Copy link

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)

@lucyanne
Copy link

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.

@jreasydoesit30
Copy link

@lucyanne,
Yes a mistake on my part. I put it in the wrong place. It works perfectly now! Thanks a lot.

@eriksonkuebler
Copy link

eriksonkuebler commented Aug 18, 2021 •
edited
Loading

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Gmail Webmail, iOS and Android apps
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@jitendravyas @hteumeuleu @mattdionne @revelt @burdyga @eriksonkuebler @Sayo1337 @lucyanne @jreasydoesit30