0

I've seen many posts talking about the same, saying that it's because of blank spaces, wrong formatting.. whatever. I've tried all, and there's no way to have a mobile and desktop version.

The way I'm doing it is by pasting the html with the inspector, inside the email body, but the only version that is sent is the desktop, gmail and all the other email exchanges ignore the style and @media...

Even with something as simple as this (and the rest of the body has styles inlined, none of them marked as !important, only inside @media), it still doesn't work the mobile version:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<style>
@media only screen and (max-width:770px){
  h1{font-size: 122px !important;text-align: center !important;}
}
</style>
</head>

<body style="width: 100%;....</body>

Any ideas?

Thanks.

Daniel Roca
  • 21
  • 5
  • Have you searched for this? There are various lists of clients that will or won’t accept media queries. Or are you saying that the problem is with the sender? – A Haworth May 22 '22 at 20:03
  • the problem is with the sender, actually when I do the same from MailChimp the mobile version works I just don't know how do they handle the "@media" – Daniel Roca May 22 '22 at 20:09
  • What systems are you using? This recently updated SO answer seems to suggest that things should be OK in Gmail nowadays. https://stackoverflow.com/questions/49701247/how-do-i-write-a-media-query-for-gmail – A Haworth May 22 '22 at 20:17
  • I had seen that post actually, and yes, I'm using Gmail, both to send and to receive – Daniel Roca May 22 '22 at 21:18
  • Normally when we use HTML, we send from a email service provider like MailChimp or SendGrid. Using Gmail is not the normal way to do it. – Nathan May 23 '22 at 01:54

1 Answers1

0

While Gmail does support @media queries, there are some limitations: https://www.caniemail.com/features/css-at-media/

However, you state in the comments that you are sending from Gmail itself. That will have different restrictions different to caniemail.

If you must do it this way (normally you would use MailChimp or SendGrid or another ESP), I believe there is a trick where you can copy the code into Gmail, and then, using Developer tools, add the code that was deleted back in, and then send it. You could try that.

For testing purposes, you might like to use Putsmail. That will allow you to mimic what a proper ESP will do.

Nathan
  • 4,358
  • 2
  • 10
  • 26