CV
3
style="display:none" Not Working in Gmail and Outlook 2013
I'm working on a responsive email. I'm hiding a section on the desktop version by using Style="display: none" and want to show this section only for the mobile phone. I have showMobile class to show the section for mobile. It's rendering fine for most of the email clients except Gmail and Outlook 2013. In Gmail and Outlook 2013 it's displaying the hidden section also. Below is my code.
<style>
/*IPHONE STYLES*/
@media only screen and (max-width: 480px) {
table[class=devicewidth] {width: 280px!important;text-align:left!important;}
table[class="showMobile"]{display: table !important;}
}
</style>
<table width="100%" bgcolor="#ffffff" style="display:none;" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" class="showMobile">
<tbody>
<tr>
<td>
<table bgcolor="#f7dc34" width="600" border="0" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidth">
<tbody>
<tr>
<td width="100" class="side-padding"></td>
<td width="400" style="font-family: arial, sans-serif; font-size: 10px;color: #cccaca; line-height: 11px;" class="footer-mobile">
Some text here
</td>
<td width="100" class="side-padding"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
As the user above me has said, block level elements sometimes don't respect this but this method works for me:
To hide it:
To show it:
If you want to see it in action click here
There's also this topic on Community
Phew - thank you for this! You just saved my day - now my pre-header is well hidden again :)
Glad I could help! Love a good ol' hidden preheader.
Hello, does this works on Gmail? As far as i know Gmail dont support style tags in head&body, overflow and display commands
<span> with the inline CSS works in Gmail for text, but does not work with images.
In order to hide an image in desktop (that you want displaying in mobile), you need to wrap the image in a <div> with the styling.
Try this:
Also.. it's been some time since I've tested this, but I believe trying to hide a block element (such as
table) does not work in every client. It may be better for you to wrap the content you want to hide from the desktop view in adivWorked for me! So thankful that you share your smarts. :)
You have to include the !important; declaration for Gmail apps.
So... display :none !important.
Reference: https://www.emailonacid.com/blog/article/email-development/12_things_you_must_know_when_developing_for_gmail_and_gmail_mobile_apps#gmail_tip1