Create a Discussion

Full Width on Gmail App for iOS

daniel kip posted 2017-10-26 18:27:11

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.

Cosmin Popovici replied 2017-11-10 11:39:20

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:

min-width: 100vw affecting Gmail Android

The div in u ~ div {min-width: 100vw;} is your <body> tag transformed into a div by Gmail. Apparently, Gmail Android doesn't like it when you use vw 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:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="x-apple-disable-message-reformatting" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style type="text/css">

      @media only screen and (max-width: 599px) {

        u ~ div .wrapper {min-width: 100vw;}
      }

    </style>
  </head>
  <body style="box-sizing:border-box;margin:0;padding:0;width:100%;">

    <table class="wrapper" bgcolor="#EEEEEE" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td>

        </td>
      </tr>
    </table>

  </body>
</html>

Reply to Cosmin Popovici

daniel kip replied 2017-11-10 19:08:05

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.

Kevin Mandeville replied 2017-11-02 13:22:15

You need to target Gmail for mobile and force it be full width.

Option 1:

@media screen and (max-width: 480px) {
  u ~ div {
    min-width: 100vw;
  }
}

Option 2 (where it can be either a class or id):

@media screen and (max-width: 480px) {
  u + .body {
    min-width: 100vw;
  }
}

Then just add class="body" to your <body> tag: <body class="body">

Reply to Kevin Mandeville

Samuel Sosina replied 2018-01-23 20:12:06

Solution 1 works well!

daniel kip replied 2017-11-02 16:12:01

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

Ryan E. replied 2018-02-02 21:06:31

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.

Reply to Ryan E.

Jackson Spalding replied 2018-08-24 20:36:56

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

Reply to Jackson Spalding

Carly Ciricillo replied 2018-08-27 02:23:25

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

Meli Jimenez replied 2018-06-08 21:06:32

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?

Reply to Meli Jimenez

Bob Georgiev replied 2017-10-31 12:34:14

Hi Daniel,
I think you need this article ? - https://litmus.com/community/discussions/5938-coding-responsive-email-in-gmail-app

Reply to Bob Georgiev

daniel kip replied 2017-11-02 16:14:36

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.

Bettina Specht replied 2017-11-03 13:47:52

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

Reply to Bettina Specht

daniel kip replied 2017-11-03 20:27:11

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! :)

The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

Full Width on Gmail App for iOS

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password