BC3
Hiding Content from Desktop Version
Hi guys,
I have a <div> wrapped in a table that I want to show only in mobile. This takes the whole width of the email.
Only problem is that in Outlook, that "space" is taken and I see a big gap between my content.
Anybody had a similar issue / fix?
Thanks!
Try adding this style to it
mso-hide:all;It's special to Outlook.These are the styles I generally use when I want to hide mobile content on the desktop version of an email.
additionally you need to put the styles inline, if the email-client does not except css in the header-section.
<div class="mobile" style="mso-hide: all; overflow: hidden; max-height: 0; width: 0; display: none; line-height: 0; visibility: hidden;">One thing to keep in mind is that if you have nested tables, you need to apply
mso-hide:allto each table or else the content within it will be visible in Outlook.I can hide the desktop version, but I can't for the life of me show it on mobile. And I'm not talking about Gmail, I'm talking about iOs.
To hide for Outlook you can wrap your content in these tags:
That syntax doesn't seem quite right, this is what worked for me:
I've used a few techniques for hiding from desktop.
I've found this one from Fresh Inbox to be the most reliable
http://freshinbox.com/blog/bulletproof-solution-to-hiding-mobile-content-when-opened-in-non-mobile-email-clients/
Hope that helps. It's not let me down yet.
Brilliant! This does the ticket for me, provided you wrap all the content you want to hide from Gmail in a <div>.
The only outstanding issues are that Lotus 6.5 and 7 don't like <div> tags so everything shows, and for some strange reason AoL doesn't like this and keeps the desktop content also hidden ... will investigate further.
Then in the html
<div class="mobileOnly" style="display: none ;">blah blah blah</div>Thank you for the answer, I had something similar, tried your solution as well, but still Outlook doesn't like it...