Search code examples
htmlcssemailgmailhtml-email

How do I get this responsive css to work on Gmail for Android?

I slightly modified a responsive email template created by Litmus.com for my own project. It behaves as I expect in my browser (Chrome) when viewed in the developer's tools mobile view. However, the design looks very different when viewed in the Gmail app for Android 7.1.2 Nougat (not imap account). I'd like to see what's going on but I'm unable to look under the hood since there's no way to see the code rendered on the App.

For example, the text isn't center aligning, the images looks small, the button isn't spanning the full width. Here's a screenshot of a side by side comparison of Mobile view in Chrome vs. the Gmail App for Android.

enter image description here

I've read from various sources that responsive css via media queries are supported on the Gmail app so I'm very confused. I've been working on this for quite some time now and feel stuck. Any help with a solution or advice in the right direction would be really appreciated.

Here is my code. https://codepen.io/anon/pen/mMoNqm

<!DOCTYPE html>
Solution

  • I have noticed that if there is spaces in the media query then Gmail doesnt work that well. I have removed spaces around 

    @media screen and (max-width:525px), screen and (max-device-width:525px)     
{
}

    This is the code I use which works well in Gmail App android.

    @media only screen and (max-width:480px) {
.wrapper{background-color:#ff0000 !important;}
}

    I tested it just now and it works. My Gmail App version is 7.8.13.166937981.

    Hope the above helps.