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.

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

Get started for free