Stop Yahoo! Mail from Rendering Your Media Queries


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.

34 thoughts on “Stop Yahoo! Mail from Rendering Your Media Queries”

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

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

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

  4. 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 600×80 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies