AOL Mail Stripping out > in media query

So... I was testing an email of ours today and found something really dumb with AOL.

I have this statement in a media query:

.horizontal_blocks > * {         
        display: block !important;       

AOL is stripping the '>' out, which completely ruins the layout when media queries fire. The issue is that since AOL uses so much screen real estate for navigation/ads, on a laptop its not unreasonable to think that the media query will fire.

So... has anyone else encountered this? I tried using an escape character instead of the '>', but still no dice.

nightjar nightjar, 4 years ago

freise29 I don't (well, I didn't) think you can get that tricky in CSS. I would add a class to all the things you want to display as block elements, i.e. class="horizontalBlock", and then in the media queries you can have:

table[class="horizontalBlock"], img[class="horizontalBlock"] {display: block!important}

So you can have multiple elements all using the same CSS. That is how I do it.

freise29, 4 years ago

The funny thing is that this worked up until ~2 weeks ago, and then it seems like AOL changed something with their pre-processing.

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free