Stop Yahoo! Mail from Rendering Your Media Queries

Yahoo Mail does not like medial queries. It will remove the query and apply the styles inside the query, which will then be applied to all who receive the email.

To fix this, use attribute selectors, which Yahoo will ignore.

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

This fix came from Michelle Klann
http://www.emailonacid.com/blog/details/C13/stop_yahoo_mail_from_rendering_your_media_queries

Michelle referenced a Campaign Monitor article.
http://www.campaignmonitor.com/blog/post/3457/media-query-issues-in-yahoo-mail-mobile-email/

It's only fair to share...Tweet about this on Twitter
Twitter
Share on Facebook
Facebook
Email this to someone
email
Share on Google+
Google+
This entry was posted in Email Dev, Mobile and tagged , , , , . Bookmark the permalink.

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.