CODEWITHSUNDEEP
htmlcssgmailmedia-querieshtml-email
mdnba50
mdnba50

Reputation: 379

responsive CSS media query being ignored by gmail

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?

Upvotes: 0

Views: 1695

Answers (1)

Ted Goas
Ted Goas

Reputation: 7587

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, U.S.-based Gmail accounts started to see media query support whereas U.K.-based accounts are not. U.K. 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: enter image description here

More info and updated charts on Litmus

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

Upvotes: 1

Related Questions