responsive CSS media query being ignored by gmail

Question

I'm using Gmail and chrome dev tools (responsive, 382x661) and my email template CSS is being ignored.

In the header I have:

 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

My CSS:

@media screen and (max-device-width:500px), screen and (max-width:500px) {
/* css */
}

My responsive CSS is being ignored and the email template is displaying in desktop mode.

How do i solve this?

Answer 1

Depending on where you live and which Gmail client you're checking this email in, media-queries still may not be supported.

In late 2016, US-based Gmail accounts started to see media query support whereas UK-based accounts are not. UK has since gotten media query support, but all other parts of the world might not yet be covered.

Gmail is also rolling out based on Gmail product. Here is a quick breakdown of where the rollout stands now:

More info and updated charts on Litmus

---

Regardless of where you are, there is no media query support in every Gmail client.