Office 365 webmail

I've been working on a mobile/desktop split email, hiding .mobile content based on @media queries. So far so good.

Only I've just now realized that Office 365 appears to completely lack any single amount of support for "display". Thus rendering my entire email useless in that client, with doubled up content everywhere the designs diverge.

Just wanted to check with you guys and see if you've experienced this as well, and if there are perhaps some workarounds.

Thanks.

roshodgekiss roshodgekiss, 3 years ago

Hi there gavinlynch, this is one that's stumped designers for a long while, but we (being us and a couple of clever folks here) found a solution, which we described in this blog post.

In short, you'll need to use a couple of CSS properties to hide content in desktop and webmail clients. Let us know how you go with this :)


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

Wow! Thanks so much. This was a last desperation post and I thought I was up the creek. Much appreciated.

One other question: Because of the lack of 'display' support, does this mean that I am unable to use the display:block; image-gap-fixing technique, or is there an alternative?

You guys are the best, thanks again.

Redferret, 3 years ago
gavinlynch :

One other question: Because of the lack of 'display' support, does this mean that I am unable to use the display:block; image-gap-fixing technique, or is there an alternative?

I would tend to say that it's specifically display:none; that it doesn't support so display:block should still work, the alternative is to use align but then depending on the context thats not always the best solution


Gmail app apologist
gavinlynch, 3 years ago
Redferret :
gavinlynch :

One other question: Because of the lack of 'display' support, does this mean that I am unable to use the display:block; image-gap-fixing technique, or is there an alternative?

I would tend to say that it's specifically display:none; that it doesn't support so display:block should still work, the alternative is to use align but then depending on the context thats not always the best solution

Oh excellent, I was not aware of the align trick. And I may be mistaken, but through my testing it appears as they they are stripping any and all use of "display" in O365.

But align appears to be doing the trick for me! Thanks for rescuing me from a dead end.

Cheers guys.

roshodgekiss roshodgekiss, 3 years ago

You're very welcome, gavinlynch - and thank you so much for your help, Redferret! :D


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

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