CODEWITHSUNDEEP
htmlcssemailgmailhtml-email
Ally
Ally

Reputation: 17

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>

Upvotes: 0

Views: 3357

Answers (2)

Syfer
Syfer

Reputation: 4479

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.

Upvotes: 0

Ted Goas
Ted Goas

Reputation: 7567

Looks like your email is stacking columns via hybrid coding, but the alignment via the media queries is not taking effect. This is likely because media query support was not extended to every Gmail email product. Depending on the Android version and email type (is your email a POP account?), anything in the media queries will still be ignored by some Gmail products.

Here is a quick breakdown of where the rollout stands: enter image description here

More info and updated charts on Litmus

Upvotes: 2

Related Questions