HTML Email – Targeting Yahoo Mail browser CSS

by ,

Yahoo! mail, specifically in Firefox and Chrome, 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. This can become problematic when you are developing emails that have a logo in your footer, and you want to position it based on desktop or mobile view. See the image below as an example:

Logo that should not appear in desktop view - Yahoo! Mail

In this situation, the logo underneath the hyperlinks should be hidden, only appearing on mobile email clients. Here is the initial HTML.


<a href="" target="_blank" style="text-decoration:none;color:#ffffff;"> <img src="logo.png" alt="logo" width="116" height="31" class="show-mobile" style="display:none; border:none; border-style:none;"/> </a>

The inline style of display:none; and class=”show-mobile” are in bold. The former is intended to hide the logo under the links in desktop view, while the latter is meant to display the logo in mobile view.

Below is the source code that is generated by the Yahoo! email client.

yahoo! email html source code

Yahoo! mail will prepend the following string “yiv##########” to your inline css that is used to show the element in mobile devices, as you can see it does so with class=”show-mobile”.

Despite the fact that there is now a Yahoo! media query that will fix this bug, attribute selectors are still not supported. Using a CSS rule as shown below, will not work when trying to target the Yahoo! generated CSS class.


[class^="yiv"][class$=”show-mobile”] { display: none; }

Just for kicks, even if you explicitly create a rule for the generated class, it will still not work:


[class=”yiv0779069323show-mobile”] display:none; }

Using the Yahoo! media query will do the trick and hide the logo.


@media screen yahoo { span[class="show-mobile"] { display: none !important; } }

See the intended result below.

Logo in footer for desktop view - Yahoo! mail

Please note that I discovered that this problem only happens in Firefox and Chrome only, not in IE.

The Email on Acid website has two terrific articles on their website that were of great help when trying to solve this problem, and

3 comments on “HTML Email – Targeting Yahoo Mail browser CSS

  1. rajwap

    Using attribute selectors in your HTML is easy. By adding (or better yet: making up) an attribute selector in your body tag, you can use that selector to force Yahoo! Mail to ignore your media query rules (Thanks, EmailonAcid ). Why will this work you ask? Attribute selectors are not supported. That way the CSS inside your media query is not applied to the HTML email. In this example, I made up a

  2. Dominga

    I think that is one of the such a lot significant info for me.
    And i’m glad reading your article. However should statement on some basic things, The web site style is ideal, the articles is
    in point of fact nice : D. Good process, cheers

Leave a Reply

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