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.
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.