Preview your email in the most popular email clients and mobile devices.    Try it for FREE!

Stop Yahoo! Mail from Rendering Your Media Queries

Posted July 28, 2011 by Michelle Klann

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

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.

Comments

James pic
James
I'm a little confused. Doesn't the new Yahoo! Mail mean that this workaround isn't needed anymore?
Posted 08/18/2011

Avatar
Michelle Klann
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.
Posted 08/18/2011

Cellarmasters eCommerce Team pic
Cellarmasters eCommerce Team
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>

The image tag is nestled between tables yet set within the over table/td that has a mobile width of 300pm, much like the Campaign Master example:

http://www.website.com/email/header.gif
Posted 09/06/2011

Avatar
Michelle Klann
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!
Posted 09/06/2011

Cellarmasters eCommerce Team pic
Cellarmasters eCommerce Team
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
Posted 09/06/2011

Avatar
Michelle Klann
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
Posted 01/09/2012

Cameron pic
Cameron
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?
Posted 03/21/2012

Yunait.co.uk Team pic
Yunait.co.uk Team
Definitely not fixed as of today.
Posted 07/06/2012

Dave pic
Dave
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.
Posted 07/23/2012

littlea1ien pic
littlea1ien
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
Posted 09/20/2012

Raphael pic
Raphael
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
Posted 05/27/2013

chintan pic
chintan
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
Posted 06/13/2013

chintan pic
chintan
hi
Posted 06/13/2013

vasanth pic
vasanth
This really helped me to fix yahoo !!!! gr8 one!! Thanks a lot!
Posted 06/27/2013

Circoloco pic
Circoloco
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>
Posted 07/01/2013

mketest pic
mketest
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?
Posted 10/21/2013

Jorn pic
Jorn
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!
Posted 11/26/2013

Avatar
Geoff Phillips
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!
Posted 11/26/2013

Jorn pic
Jorn
Thanks Geoff, I was afraid so :-(
Posted 11/27/2013

Samson pic
Samson
@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.
Posted 12/04/2013

Jorn pic
Jorn
Thanks Samson, I guess this could be a solution. I'll give it a try and keep you posted!
Posted 12/05/2013

Nathan Mynarcik pic
Nathan Mynarcik
Thank you so much! This saved me!!
Posted 03/11/2014

Daniel Norton pic
Daniel Norton
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.
Posted 04/29/2014

Avatar
Geoff Phillips
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.
Posted 04/29/2014

visiblemedia pic
visiblemedia
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!
Posted 06/05/2014

Aniket Suryavanshi pic
Aniket Suryavanshi
It's a shame that this still happens in Yahoo Mail. How hard it is to ignore media queries?
Posted 07/09/2014

Comment via our Blog

Name:
Email:
Location:
URL:

Comment:

Remember my personal information
Notify me of follow-up comments?

Please enter the word you see in the image below:

x
Sign up for our Newsletter

And get updates on the latest email tips, tricks and hacks!