Is there a way to prevent Yahoo! mail from displaying the mobile version of your HTML e-mail without breaking the mobile version on Blackberry OS 6?

Question

I'm working on an HTML e-mail and have run into an issue ( go figure ). As it turns out, Yahoo! Mail inexplicably gives precedence to the @media stylesheet, using the CSS styles defined within, over any inline styles in the HTML email. The issue, and a work around, are discussed here : http://www.campaignmonitor.com/blog/post/3457/media-query-issues-in-yahoo-mail-mobile-email/ . After testing, I've found some issues with this work around... It appears that the Blackberry OS 6 e-mail client doesn't recognize or read the attribute selector format used in the Yahoo fix. The result is, having to choose between your e-mail rendering properly in Yahoo, or rendering nicely on a Blackberry. Has anyone come across this issue? If so, have you found a way to achieve the best of both worlds? ( Have it work properly on Yahoo! mail, and blackberry ). Any suggestions are appreciated.

Answer 1

have you tried using styles by specifying id ? eg. div[id='blackberry'] { /* media query in here */ }

Media queries with ids need to be specified to make it compatible with Yahoo mail.