Browse by...
Home Resources Blog

Soon after publishing our recent post on ‘Mobile email design in practice‘, it was pointed out to us that using @media queries to optimize email for mobile devices has a glaring downside. As it turns out, Yahoo! Mail inexplicably gives precedence to the @media stylesheet, using the CSS styles defined within, over any inline styles in the HTML email. The result is predictably sub-optimal:

Narrow email in Yahoo! Mail

Thankfully, there’s a straightforward, if less-than-elegant solution. It turns out that Yahoo! Mail ignores any styles that use attribute selectors, meaning that you can use these in your @media queries to ensure that Yahoo! Mail doesn’t override existing inline styles with your @media -defined ones. For example, you would change:

.codeblock {
background: #ededed;

@media only screen and (max-device-width: 480px) {
table.table, td.cell { width: 300px !important; }
table.promotable, td.promocell { width: 325px !important; }

…to the attribute selector format, like so:

@media only screen and (max-device-width: 480px) {
table[class=table], td[class=cell] { width: 300px !important; }
table[class=promotable], td[class=promocell] { width: 325px !important; }

The result for us was a restored-width email newsletter in Yahoo! Mail that displays consistently across the most popular webmail and desktop email clients.

Restored newsletter

Thankfully, this solution doesn’t affect the display of mobile-optimized email in the iPhone and Android’s respective Mail email clients. However, it does bung up how emails render in Yahoo! Mail’s mobile browser client… If that’s a concern to you.

Of course, the danger is that Yahoo! Mail will someday support attribute selectors and render this technique useless. So keep testing and hope that they properly implement @media queries well before then.

Many thanks to mobile email design legends Ed Melly and Stefan Velthuys for outlining this excellent mobile optimization for our monthly newsletter. We hope this helps you get your HTML emails close to pixel-perfect in both desktop and mobile email clients alike.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free