DK0
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
divinu ~ div {min-width: 100vw;}is your<body>tag transformed into a div by Gmail. Apparently, Gmail Android doesn't like it when you usevwto 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.
This seems to fix the right space in iOS Gmail and Inbox while not affecting Nexus 5X Gmail Android 6. (Add a class of 'full-wrap' to the inner wrapping table.)
@media only screen and (max-width: 480px) {
/* Targets Gmail */
u ~ div .full-wrap {min-width: 100vw;}
/* Targets Gmail on Android */
div > u ~ div .full-wrap {min-width: 100%;}
}
Nice, very useful --
@media only screen and (max-width: 480px) {
/* Targets both Gmail iOS and Gmail Android (Nexus, pixel) */
u ~ div .class {style}
/* Targets only Gmail Android */
div > u ~ div .class {style}
}
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!
Hi @kevin,
I have tried both but its not solved. is there any other way to fix it.?
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
Naïve question: I keep seeing this
uelement as part of the targeting across forum posts.What is this?
Can't imagine it maps to the actual
<u>[underline] element.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.
I'm having the exact same problem Cosmin pointed out with the content being pushed all the way to the right. I tried their solution to no avail. Anyone got other suggestions?
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.
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! :)
Does this solution in the podcast, or the one I've quoted below, actually make the layout go edge-to-edge on the device? Or is just fixing the lopsided spacing? While this code seems to resolve the centeredness, I am having a hard time making it go edge-to-edge.
@media only screen and (max-width: 480px) {
/* Targets Gmail */
u ~ div .full-wrap {min-width: 100vw;}
/* Targets Gmail on Android */
div > u ~ div .full-wrap {min-width: 100%;}
}