Click to Sign Up for a 7 Day Free Trial!

Email Development

Stop Yahoo! Mail from Rendering Your Media Queries

Email On Acid

UPDATE: As of March 2015, Yahoo! Mail has remedied this issue with media query rendering. Read more at Yahoo! Mail Now Supports Media Queries.

In April 2011, Campaign Monitor published this article which identifies an issue in the way Yahoo! Mail handles media queries. With the help of Brian Sisolak @bsisolak at Trilogy Interactive, we've identified a few more issues with regard to the way Yahoo! Mail handles media query styles intended for mobile devices only. To make a long story short, each version of Yahoo! ignores your media query declaration along with all of its conditional statements. It then renders each of the styles as if they are outside of the media query to begin with. On top of that, it gets confused with your first declaration which is therefore ignored. So for example, this:

<style>
 @media only screen and (max-device-width: 480px) {
   #smallScreen {width:100px; padding:2px;}
   .desktop {width:500px; padding:10px;}
 }
</style>

Will get converted to this:

<style>
 _filtered #yiv1449593645 {padding:2px;} 
 #yiv1449593645 .yiv1449593645desktop {width:500px;padding:10px;} 
 #yiv1449593645
</style>

As you can see, Yahoo! converts each of your style names into a name that is unique to your email. They do this in order to keep your styles separate from the ones they use in their interface. So later in the document, it also converts your HTML:

<div class="desktop">Text</div>

Is converted to:

<div class=" yiv1449593645desktop ">Text</div>

Although Yahoo! has really good intentions, I think the problem is occurring because their parsing tool does not take into account media queries and the way they are formatted.

So what's the fix?

Campaign Monitor came up with a sneaky solution to use attribute selectors since they are not supported either.  That way your media query and the styles within will not get picked up by Yahoo!

To give an example, if I convert my original query from above, it would look like this:

<style>
 @media only screen and (max-device-width: 480px) {
   *[id=smallScreen] {width:100px; padding:2px;}
   *[class=desktop] {width:500px; padding:10px;}
 }
</style>

Another option is to use attribute selectors a little differently wherein you add a "*[class]" before all class declarations and "*[id]" before ID's like this:

<style>
 @media only screen and (max-device-width: 480px) {
   *[id]#smallScreen {width:100px; padding:2px;}
   *[class].desktop {width:500px; padding:10px;}
 }
</style>

The bugger about using the examples above is that each element controlled within your media query must contain an HTML attribute (id, class, style, etc). Unfortunatly, universal, type and decendent selectors are out of the question.

So here's one more creative tactic that gives you access to additional selector types:

<style>
   @media only screen and (max-device-width: 480px) {
      body[yahoo] p {color:#00C}
      body[yahoo] .foo {color:#C03}
      body[yahoo] .bar {color:#C03}
    }
 </style>
...
<body yahoo="fix">
    <p>test</p>
   <p class="foo">test</p>
   <div class="bar">test</div>
</body>

In this example, I am making up a "yahoo" attribute and placing it in the body tag.  I could have left out the value "fix" but this will help me remember what it's for later on.  Then I am placing "body[yahoo] " before each declaration which now allows me to access universal selectors.

Each of the recommendations above will work in both Yahoo! Classic and Yahoo! Mail.

About the Author

Michelle Klann

Michelle Klann

A Jackie of all trades, Michelle (aka Miki) specializes in design and has been known to knock down some pretty nifty, object oriented, JS applications. Mozify, anyone?

Join the Discussion

I'm a little confused. Doesn't the new Yahoo! Mail mean that this workaround isn't needed anymore?
James
Hey James, yeah it's confusing sorry.

Yahoo Beta has now officially become Yahoo Mail. Yahoo New has been discontinued and Yahoo Classic is difficult to get to. So this fix is still required for Yahoo Mail and Yahoo Classic.
Michelle Klann
Hi I was wondering if you can help solve my problem? I have successfully applied your solution to the HTML except that my 600px wide images are still being scaled to 300px in Yahoo, or being hidden. Are you able to help me understand why? Here's a snippet of my code:

<style type="text/css">
@media only screen and (max-device-width: 480px) {
#table {width:300px !important;}
#cell {width:300px !important;}
#hide {display:none !important;}
#emailHeader {width:300px !important; height:40px !important;}
#borderTop {width:300px !important; height:5px !important; display:none !important;}
#borderBottom {width:300px !important; height:5px !important; display:none !important;}
body[yahoo] #table {width:300px !important;}
body[yahoo] #cell {width:300px !important;}
body[yahoo] #borderTop {display:block !important;}
body[yahoo] #borderBottom {display:block !important;}
}
</style>
Cellarmasters eCommerce Team
Cellarmasters,

Did you add the yahoo="fix" attribute to your body tag?

For example:
<body yahoo="fix">

There is no need to duplicate your styles above (#table and #cell). You must use the body[yahoo] before every declaration in your media query - this is to ensure Yahoo does not render your mobile version:

<style type="text/css">
@media only screen and (max-device-width: 480px) {
body[yahoo] #table {width:300px !important;}
body[yahoo] #cell {width:300px !important;}
body[yahoo] #hide {display:none !important;}
body[yahoo] #emailHeader {width:300px !important; height:40px !important;}
body[yahoo] #borderTop {display:block !important; width:300px !important; height:5px !important;}
body[yahoo] #borderBottom {display:block !important; width:300px !important; height:5px !important;}
}
</style>...
<body yahoo="fix">...

Hope this helps!
Michelle Klann
Yes I have added the <body yahoo="fix"> tag. I have tried using your suggested code. This fixes the Yahoo bug, but the fix then overwrites how it appears in Android native when using Email on Acid to preview. In Android native the image displays at full dimensions 600x80 pixels. So it seems I can please either Yahoo or Android native, but not both. Has anyone else experienced this issue do you know?

Thanks,
Keiron
Cellarmasters eCommerce Team
Keiron,

We have updated our online simulation to reflect this fix, sorry for any confusion! I double checked and confirmed that this fix works correctly on both the iPhone and Android devices.

Cheers,
Miki
Michelle Klann
I've been using this workaround for a while but today I tried removing attribute selector fix and my email still displayed correctly in Yahoo Mail. Perhaps they've fixed this?
Cameron
Definitely not fixed as of today.
Yunait.co.uk Team
I'm not entirely sure if this covers the same issue, but we've noted recently that, using this code, the Yahoo Mail app for iPhone doesn't render the 320px-wide version that we have defined. Rather, it stays at 640px. Which wouldn't be a big deal, as it still looks good and the amount of the user base with this configuration is tiny, but of course, it's what the client uses, and he wants to know why the emails still aren't mobile-optimized. And finding specs or API for the app has led to dead ends so far. Anyone else running into this?

Thanks.
Dave
I am trying to fix a template so its fluid using all percentages for mobile but when i try to fix it so that it makes the main content 600px it still stretches the tables that are set to 100% with a max-width of 600px the email works in outlook gmail and mobile so far yahoo is the only mail system i cant seem to work
littlea1ien
Hi the solution seem to work but not for Mobile,

what should i do for keep this :
Before :

/* HELPERS */
.mobileHide {display:none!important;}
.mobileWidth {width:100%!important;}
.mobileShow {display:block!important;width:100%!important;}

After :

/* HELPERS */
body[yahoo]#mobileHide {display:none!important;}
body[yahoo]#mobileWidth {width:100%!important;}
body[yahoo]#mobileShow {display:block!important;width:100%!important;}

thanks for helping smile
Raphael
Hi,
i created responsive e-mailers but media quires not support in android device it take horizontal scroll.

plz tell me how to i resolve.

thanks & regards,
Cooper
chintan
hi
chintan
This really helped me to fix yahoo !!!! gr8 one!! Thanks a lot!
vasanth
help! I'm having issues with Yahoo mail. It works fine even on outlook but Yahoo falls over and tries to use the media.

<style type="text/css">
body { margin: 0; padding: 0; background-color:#eeeeee; color:#777777; font-family:Arial, Helvetica, sans-serif; font-size:12px; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; width:100% !important; }
.ReadMsgBody { width: 100%; background-color: #eeeeee; }
.ExternalClass { width: 100%; background-color: #eeeeee; }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
img { display: block; }
div, p, a, li, td { -webkit-text-size-adjust:none; }
a { color: #d1254b; text-decoration: none; }

@media only screen and (max-device-width: 640px) and (-webkit-min-device-pixel-ratio: 1) {
body { width: auto!important; background-color: #eeeeee; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
table { width: 100%!important;}
table[class=table600] { width: 450px !important; }
img[class=header_img] { width: 460px !important; height: 269px !important; }
img[class=image270] { width: 430px !important; height: 313px !important; }

}
@media only screen and (max-device-width: 479px) and (-webkit-min-device-pixel-ratio: 1) {
body { width: auto!important; background-color: #eeeeee; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
table { width: 100% !important; }
table[class=table600] { width: 300px !important; }
img[class=header_img] { width: 300px !important; height: 176px !important; }
img[class=image270] { width: 260px !important; height: 189px !important; }
</style>
Circoloco
It works fine, but i have one clarifications if i use this code,Android 4.0 native client showing desktop version in my mobile. How to fix that issue?
mketest
Hi,

We use an email marketing tool that has an email editor that handles the content of our responsive email. The problem is that this tool interprets all block quotes in the email as system variables, which end up in lots of errors when passing all instances of 'body[yahoo]'. And this behavior is probably not going to change any time soon.

Could there be a way to apply this or a similar fix that doesn't use the '[]'?

I know that using the block quotes is essentially the whole point of the fix, but right now I am quite stuck in the fact that your hack (the only one I found) is not being accepted by the editor, which we cannot get out of the equation (expensive investment)...

Last but not least: Thumbs up for your really usefull articles & posts!
Jorn
Jorn,
No, attribute selectors require the use of brackets. I don't know of another way to use them. Sorry I can't be of more help!
Geoff Phillips
Thanks Geoff, I was afraid so :-(
Jorn
@Jorn: If you cannot use brackets the only other solution I can think of is to counter act each style in the @media-css inside another @media-css that you write below the mobile one.

Like so:

@media only screen and (max-width: 599px) {
.wrapper { width:320px; }
}

@media only screen and (min-width: 600px) {
.wrapper { width:600px; }
}

It is annoying and tiresome, but it does work. You probably don't really need to use it within a "everything else" @media-tag but I haven't tested it.
Samson
Thanks Samson, I guess this could be a solution. I'll give it a try and keep you posted!
Jorn
Thank you so much! This saved me!!
Nathan Mynarcik
I had a question is it possible to go around the media queries? My company is sending out blast through a different system and it won't read css so I'm trying to do everything inline but of coarse I haven't seen media queries done inline. I just need a way to make the email blasts I send out responsive without css or idk. I'm at a lost.
Daniel Norton
Daniel,
No, not as far as we know. Media queries cannot be used inline. You could try putting the style block inside your body tags. The only other option is to use "fluid design" instead, using % based widths to try and accommodate any screen.
Geoff Phillips
I've had this problem as well and I think I've found a solution that tests well for Yahoo email clients.

Originally I was using this:
@media only screen and (max-device-width: 480px) {
@viewport { width: 320px; }
@-ms-viewport { width: 320px; }
.hide-mobi {
display: none;
}
}
with <meta name="viewport" content="initial-scale=1.0"> (so Blackberry doesn't display a blank email, I removed width=device-width from the content)

...Yahoo was displaying the mobile version (in my case using the class .hide-mobi) on the desktop instead of only recognizing it as for media-queries.

Including the HTML tag with HTML attributes with all @media styles, yahoo will read it as only for mobile and ignore for desktop. This works:

@media only screen and (max-device-width: 480px) {
@viewport { width: 320px; }
@-ms-viewport { width: 320px; }
table[class="hide-mobi"],
tr[class="hide-mobi"]
td[class="hide-mobi"] {
display: none;
}
}

In our case, our clients strip the table out of the HTML and send to their customers. They do not include the body tag or header, so this solution works without including <body yahoo="fix">.

Cheers!
visiblemedia
It's a shame that this still happens in Yahoo Mail. How hard it is to ignore media queries?
Aniket Suryavanshi
<body yahoo="fix"> doesnt work

It only seems to work when I use:

<body yahoo>
Peter
Hi,

I search and find that Media Queries doesn't work with Android Yahoo! Mail app unfortunately.

So that breaks my html only in this app, but work anywhere else.
The text in my "td" doesn't take the width i want and stop at the midlle of the screen, it takes all the width only when i write "text-align: center" but isn't what i want. I try a lot of things but nothing works.
If someone have a solution?

Thanks for reading me.
Sam
Oh i find the solution, no problems any more
Sam
It looks like Yahoo! Mail has finally fixed this four year old bug! smile

Finally no more attribute filter or body attribute hacks in media queries.

In fact Yahoo! Mail is now responsive.

I wrote a bit more about what I found here:
http://freshinbox.com/blog/yahoo-mail-fixes-media-query-bug-yahoo/
Justin Khoo
Lucre
Hi All, Yahoo here. Just wanted to confirm that this has been fixed! The information that you gathered was really helpful to our engineering team. Thank you very much.

If you need to contact Yahoo support in the future you can do so using our help pages. Here's that link:

https://help.yahoo.com/kb/helpcentral
Yahoo
Hmm is anyone else experiencing problems with the pictures on this blog
loading? I'm trying to determine if its a problem on my end or
if it's the blog. Any feed-back would be greatly appreciated.
web design
Aw, this was a very good post. Finding the time and actual effort to create a great article… but
what can I say… I procrastinate a whole lot and never seem to get anything done.
seo service

Leave a Comment