
1
Full Width on Gmail App for iOS
Hello emailgeeks,
I am working on a new boilerplate layout for my company and i have been testing some things (which may not be new to you) and I would like to know if I can get the email body to get the whole screen width on the Gmail App for iOS (not sure if this happens on Gmail apps for Android as well).
I am pretty sure I have seen a fix for this before but I could not find it in the community. Would you guys have any pointers to solve this issue?
Thank you again for your time and patience.
Kind regards.
Edit: as Kevin pointed out, this issue revolves around table display, i.e. it doesn't affect div layouts.
While using Kevin's nice solution, I found it has one side-effect: on Gmail Android, it pushes the layout a bit to the right:
The
div
inu ~ div {min-width: 100vw;}
is your<body>
tag transformed into a div by Gmail. Apparently, Gmail Android doesn't like it when you usevw
to force it to full width, and goes a bit off screen.But if you change that CSS to target your main wrapper table, it works fine:
that horrible padding on the right went away, but will this "regular" padding be always present?
thanks for posting this solution, Cosmin! Appreciate it!
I am not getting right how to post images here. this is the image: https://imgur.com/hsWAbYV
Sorry for sending it like this.
You need to target Gmail for mobile and force it be full width.
Option 1:
Option 2 (where it can be either a class or id):
Then just add
class="body"
to your<body>
tag:<body class="body">
Solution 1 works well!
Kevin, thank you so much for your time answering. I tried the option 2 and didn't get to work on the iOS 11 Gmail App.
I even thought my "body" table (which is 100%) would be the problem, but i added that class to it too. I am still getting those right and left margins either way.
I am posting my code below if it make it better for anyone to visualize it.
https://litmus.com/builder/4a77f82
Hi Daniel,
I think you need this article ? - https://litmus.com/community/discussions/5938-coding-responsive-email-in-gmail-app
That's not the specific issue I am getting right now, but I had dealt with it in the past.
Thank you for posting though, Bob.
I'm having mixed results.
Targeting the body shrinks the email very small for Nexus 5X Gmail although fixes Gmail on iOS.
Targeting my wrapper table doesn't fix Gmail on iOS although Nexus 5X Gmail works as intended.
Hi Daniel!
We covered your question in today's episode of the Email Design Podcast! :) You can tune in here:
https://litmus.com/blog/email-design-podcast-82-litmus-community-qa-rapid-fire
Wow! What an honor!
I am an avid listener of the Podcast. You guys keep me good company in my daily struggle with the treadmill.
Thank you so much! :)