Media queries in Yahoo mail

Hi all, I was pretty glad to hear earlier this year that Yahoo mail had improved its rendering of media queries. I decided to leave the workaround in my code just to be safe though.

I've recently tested this email design in a few browsers and while the design is working on iPhones and Outlook, I was surprised to see that Yahoo on Android isn't recognising the media query - it's serving up the desktop browser version. I'm wondering if it's because I'm using attribute selectors? Does anyone else have any experience with this?

Redferret, 3 years ago

Hi Chell,

Yahoo for android doesn't support media queries, Yahoo on desktops used to render the mobile version but they've since fixed this, the mobile version however, still doesn't support media queries. You could try it without the attribute selectors and see how you get on ...


Gmail app apologist
Cheli, 3 years ago

Thanks for the confirmation Redferret - I'd heard so much about Gmail on Android and Yahoo for desktop's issues with media queries; but nothing about Yahoo for Android so it took me by surprise! It's good to know it's not just my code stuffing things up again ;)

erikwoods erikwoods, 3 years ago

I would just like to say that I test blasted an email to myself today and Yahoo! Mail was applying my media query styles when they were not expected to. I don't think they have fixed it for all scenarios. That being said - I think I will continue to use the attribute selectors to remedy this until I feel safer taking them off.

roshodgekiss roshodgekiss, 3 years ago

Interesting, erikwoods - did this change when you resized your preview pane? My hunch is that the expression is triggering when the preview pane < 480px (or whatever has been defined in the expression).


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
markjames19, 3 years ago

Hi, I am also getting media query styles applied in Yahoo Mail. I have tried extending my preview pane to see if this makes any difference and the problem still seems to be occurring.

I've whittled my issue down to the body and table elements, but cant seem to find a work around!...

@media only screen and (max-width: 480px) { 
               
body {width: auto!important;}
table {width: 100%!important;}
table[class=scaleForMobile] {width: 100%!important; padding-left: 10px!important; padding-right: 10px!important;}

...

Any ideas? I'm really stuck!

Redferret, 3 years ago

try changing max-width to max-device-width


Gmail app apologist
roshodgekiss roshodgekiss, 3 years ago

Redferret has a good tip there. Alternately, you could use this altered media query, which is used as a workaround to a similar issue in Windows 8 Mail:

@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) { … }

Let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
markjames19, 3 years ago

Thanks for getting back to me.

I switched the code to the suggested, and went through and gave the rest of my code a bit of a tidy and that seemed to do the trick!

roshodgekiss roshodgekiss, 3 years ago

Awesome news, markjames19 - glad that worked :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
erikwoods erikwoods, 3 years ago
roshodgekiss :

Interesting, erikwoods - did this change when you resized your preview pane? My hunch is that the expression is triggering when the preview pane < 480px (or whatever has been defined in the expression).

The styles were applied even when the screen was larger than the MQ styles were applied to.

It's all good - doesn't hurt to continue to use attribute selectors.

Redferret, 3 years ago

Hi Teddy, Yahoo removed the need for attribute selectors earlier this year, theres a link in the original post relating to this.


Gmail app apologist

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098