I know most email clients are not fans of media queries but they do support them in a limited format.
All I am trying to do is alter the font size on one link .
<style type="text/css">
.link {color: rgb(133, 16, 16); font-size: 24px;}
@media only screen and (max-width: 420px) {
.link {font-size: 14px !important;}
}
</style>
<a href="#" class="link">DOWNLOAD</a>
It works fine in a browser but not when emailed. Can anyone see anything i'm missing?
You need to inline styles generally, because some email clients do not support <style> blocks.
Not sure what client/version/device you are using but that code can work on some.
However, consider inlining mobile-first, because that will cover Gmail IMAP, and then using min-width to cover the desktops. You'll also need something for Outlook Windows, since that doesn't accept <style> blocks, so here I'm using "mso-ansi-font-size" and that will take precedence over font-size for them.
This worked across all main emails:
<head> <!-- I needed to put a little bit of structure -->
<style type="text/css">
@media only screen and (min-width: 420px) { <!-- Note this is for desktops -->
.link {font-size: 24px !important;}
}
</style>
</head>
<body>
<a href="https://www.google.com.au" class="link" style="color: rgb(133, 16, 16); font-size: 14px;mso-ansi-font-size:24px;">DOWNLOAD</a> <!-- Note inlined; and Outlook alternative -->
</body>
If you do need to consider some really old desktop ISPs, some of which do not support <style> blocks, they will show the mobile version (14px). There is no way around it. But I prefer that than a desktop-first approach, because there are usually very few if any people on my lists that use old desktop ISPs, but a lot of people use Gmail IMAP (business accounts, typically).
For more on choosing mobile-first vs desktop-first approach for email, see https://htmlemailprinciples.com/third-precedent-of-practicality