How to handle media queries in HTML emails in Gmail?

Question

I send responsive HTML emails with my website, with media queries, but in Gmail / Inbox, max-width in the media query refers to the browser viewport, instead of the HTML email.

So, on every other mail client, my emails switch to mobile display under 600px, in Gmail / Inbox, this comportement is broken.

Do you have a solution to make the media query take as viewport the mail viewport instead of the browser viewport ?

can you share the code you tried and screenshot of working in both gmail and someother mail(where it works good) — Sagar V, Jun 26 '17 at 16:05
No, the mail looks disgusting, but it's because Outlook use MS Word html render engine — HeavyNounours, Jun 26 '17 at 16:16
This is what I see when resizing the window in outlook online https://i.stack.imgur.com/K6PAF.png — Sagar V, Jun 26 '17 at 16:20
For me, the problem isn't happening. It looks fine in Outlook — Sagar V, Jun 26 '17 at 16:31

score 3 · Answer 1 · answered Jul 02 '17 at 05:55

3

Recommended approach: <meta name=viewport content="width=device-width, initial-scale=1">
Avoid minimum-scale, maximum-scale, user-scalable.

answered Jul 02 '17 at 05:55

richardev

976
1
10
33

I'll try it monday ! – HeavyNounours Jul 02 '17 at 05:59
Not working :/ The problem is the browser handles the media query with browser width, and not the "mail view" width ... A normal comportement, I guess, but can't work properly in webmails – HeavyNounours Jul 03 '17 at 08:44

How to handle media queries in HTML emails in Gmail?

1 Answers1