TB
3
Hide & Show TD in Gmail, Outlook & Yahoo
Hi guys,
I've been trying for sometime now to hide and show a td based on if your on a mobile or a desktop.
What I have tried is all good and most email clients bar Gmail and all versions of Outlook bar Outlook 2011 where it is how it's supposed to be and Yahoo.
I have tried doing all the mso-hide: all etc but nothing seems to be working.
But them clients are showing both cells no matter what where I only need to show 1 of them at a time.
Anyone have any ideas/suggestions?
mso-hide:allon its own won't work. It is a vendor specific property of the Microsoft Word engine. In order for the hide on desktop/show on mobile situation to work you need additional properties. Here are some additional properties you need to use:Then in a media query you'd want to override any of the values set to the opposite of hiding.
Also note with
mso-hide:all, that if you are trying to hide content within the table cell that includes nested tables, you must apply this property to any and all nested tables within as well.hi James, your comment helped me i spent almost 2 days wondering why sections in template were visible in MS Outlook . Thank you.
the problem with hidden content is that it will show no matter what in the 2 cases bellow, even when using the code you guys shared here.
1. email forwarding
2. Outlook Web App
I had to do something similar recently and found a solution online. Can't remember where I found this but it worked a treat for most clients when testing in Litmus. It didn't work that well in old Lotus.
I had the following setup:
Media Queries -----
HTML ------
I have been trying the show / hide and can not get it to work with color blocks. It keeps showing a white gap. Any suggestions.????
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SUNOVION Utibron Clinical Impressions</title>
<!--Utibron Ci Email_1 v1i-->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<style type="text/css">
body {
background-color: #ffffff;
margin: 0px auto !important;
padding: 0px;
width: 100%; }
html {
width: 100%; }
.contentbg { background-color: #ffffff; }
img {
border:0px;
outline:none;
text-decoration:none;
display:block; }
.image_1 {
width: 100%; }
table.customers {
border-collapse: collapse;
border-spacing: 0;
width: 100%; }
span.preheader3{display: none; font-size: 1px;}
a{text-decoration:none;} /* to remove underlines in Windows Mail */
/* Clickable phone numbers - BE SURE TO CHANGE COLOR TO SAME FONT COLOR IN FILE /
a[href^="tel"], a[href^="sms"] {text-decoration:none; color:#000000; pointer-events:none; cursor:default;}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {text-decoration:default; color:#000000 !important; pointer-events:auto; cursor:default;}
/ End of Clickable phone numbers */
*[class~=hide_on_desktop] { display: none !important;}
@media only screen and (max-width:640px)
{
body{width:auto!important;}
table[class=main]{width:446px !important;}
table[class=logo]{width:100% !important;}
table[class=righttop-details]{width:100% !important;}
table[class=social-top]{width:100% !important;}
td[class=viewonline-field]{padding: 10px 0px 0px 0px !important;}
td[id=viewonline]{text-align:center !important;}
td[class=productspace]{display:none !important;}
td[class=productbox]{width:100% !important; display:block;}
td[class=product-hidebox]{height:40px !important; display:block !important;}
td[class=subcontentbox]{width:100% !important; display:block;}
td[class=subcontent-space]{height:20px !important;}
td[class=bottomicon]{width:127px !important;}
table[class=bottomiconbox]{width:100% !important;}
td[class=bottomiconhidebox]{height:6px !important; display:block !important;}
table[class=icon-bottom]{width:100% !important;}
td[class=hidebox]{height:15px !important; display:block !important;}
td[class=hidebox-footer]{height:10px !important; display:block !important;}
td[class=footerbox]{width:100% !important; display:block !important;}
*[class~=hide_on_mobile] { display: none !important;}
*[class~=show_on_mobile] {
display : block !important;
width : auto !important;
max-height: inherit !important;
overflow : visible !important;
float : none !important;
}
@media only screen and (max-width:450px)
{
body{width:auto!important;}
table[class=main]{width:320px !important;}
table[class=logo]{width:100% !important;}
table[class=righttop-details]{width:100% !important;}
table[class=social-top]{width:100% !important;}
td[class=viewonline-field]{padding: 10px 0px 0px 0px !important;}
td[id=viewonline]{text-align:center !important;}
td[class=productspace]{display:none !important;}
td[class=productbox]{width:100% !important; display:block;}
td[class=product-hidebox]{height:40px !important; display:block !important;}
td[class=subcontentbox]{width:100% !important; display:block;}
td[class=subcontent-space]{height:20px !important;}
td[class=bottomicon]{width:127px !important;}
table[class=bottomiconbox]{width:266px !important;}
td[class=bottomiconhidebox]{height:6px !important; display:block !important;}
table[class=icon-bottom]{width:100% !important;}
td[class=hidebox]{height:15px !important; display:block !important;}
td[class=hidebox-footer]{height:10px !important; display:block !important;}
td[class=footerbox]{width:100% !important; display:block !important;}
*[class~=hide_on_mobile] { display: none !important;}
*[class~=show_on_mobile] {
display : block !important;
width : auto !important;
max-height: inherit !important;
overflow : visible !important;
float : none !important;
}
@media only screen and (max-width: 480px){
.emailButton{
max-width:600px !important;
width:100% !important; }
.emailButton a{
display:block !important;
font-size:18px !important; }
td[class=moveinpx] { padding-left:45px !important; }
td[class=moveinpx2] { padding-left:35px !important; }
.endmatter{
max-width:600px !important;
width:100% !important; }
}
</style>
<!-- Internet Explorer fix -->
<!--[if IE]>
<style type="text/css">
@media only screen and (max-width:640px)
{
table[class=subimagebox]{width:100% !important; float:left;}
td[class=main-contentbox]{width:285px !important; float:left; padding-left:75px !important;}
td[class=contentbox]{width:386px !important; float:left; display:block; padding:0px 25px !important;}
table[class=subcontentbox]{width:386px !important; float:left;}
td[class=footerbox]{width:100% !important; float:left; display:block
td[class=productbox]{width:336px !important; float:left; display:block; padding:0px 50px !important;}
}
@media only screen and (max-width:450px)
{
table[class=subimagebox]{width:100% !important; float:left;}
td[class=main-contentbox]{width:285px !important; float:left; padding-left:12px !important;}
td[class=contentbox]{width:100% !important; float:left; display:block; padding:0px !important;}
table[class=subcontentbox]{width:100% !important; float:left;}
td[class=footerbox]{width:100% !important; float:left; display:block;}
td[class=productbox]{width:100% !important; float:left; display:block; padding:0px !important;}
}
</style>
<![endif]-->
<!-- / Internet Explorer fix -->
<!-- Outlook -->
<!--[if gte mso 9]>
<style type="text/css">
.righttop-details{width:250px !important;}
.icon-bottom{width:286px !important;}
.subimagebox{width:240px !important;}
</style>
<![endif]-->
<!--[if gte mso 10]>
<style type="text/css">
.righttop-details{width:250px !important;}
.icon-bottom{width:286px !important;}
.subimagebox{width:240px !important;}
</style>
<![endif]-->
<!--[if gte mso 15]>
<style type="text/css">
.righttop-details{width:250px !important;}
.icon-bottom{width:286px !important;}
.subimagebox{width:240px !important;}
</style>
<![endif]-->
<!--[if gte mso 16]>
<style type="text/css">
.righttop-details{width:250px !important;}
.icon-bottom{width:286px !important;}
.subimagebox{width:240px !important;}
*[class~=hide_on_mobile] { display: none !important;}
*[class~=show_on_mobile] {
display : none !important;
width : auto !important;
max-height: inherit !important;
overflow : visible !important;
float : none !important; font-size: 0;mso-hide:all;}
</style>
<![endif]-->
<!-- / Outlook -->
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="contentbg">
<tr>
<td align="center" style="padding:5px 0px 0px 0px;">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" class="main">
<tr>
<td width="5"></td>
<td width="590" valign="top" class="hide_on_mobile">
<img src="http://www.biopharmcommunications.com/deploy/Sunovion/Utibron/Ci/email1_neohaler_hero_small_utibron_ci_new.png" alt="LABA/LAMA Combination with Full Audiovisual Dose Feedback" class="image_1" />
</td>
<td width="5"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding:0px 0px 0px 0px; ">
<table width="360" border="0" align="center" cellpadding="0" cellspacing="0" class="main">
<tr>
<td width="5"></td>
<td width="350" class="show_on_mobile" style="padding:0px 0px 0px 0px; width: 0;
max-height: 0;
overflow: hidden;
float: left;
display: none;">
<img src="http://www.biopharmcommunications.com/deploy/Sunovion/Utibron/Ci/email1_neohaler_hero_small_mobile_utibron_ci_new.png" alt="image" class="image_1"/>
</td>
<td width="5"></td>
</tr>
</table>
</td>
</tr>
<tr><td align="center" valign="top">
<table width="590" bgcolor="#0D5480" border="0" align="center" cellpadding="0" cellspacing="0" class="main">
<tr>
<td width="5" > </td>
<td valign="top">
<table width="100%" border="0" align="right" cellpadding="0" cellspacing="0" class="main">
<tr>
<td align="center" valign="middle" style="padding:5px 5px 5px 5px;">
<span style="color:#ffffff; font-family:Arial, Verdana, Trebuchet MS, sans-serif; font-size:14px; font-weight:500; line-height:20px; padding:10px 0px 10px 0px;">
<a style="text-decoration:underline; color:#ffffff;" href="http://sunovion.clinicalimpressions.com/Ferguson"><b>View</b></a><b> a Clinical Perspective From Dr. Joans ►</b></span>
</td>
</tr>
</table>
</td>
<td width="5"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You found that here: http://stackoverflow.com/a/33076622/1922144
I use this code to hide content in desktop:
and for the content in td p IMG etc:
to show content on mobile; the opposite css in a class so;
and note: if you would like to hide images on desktop -- make sure you remove the height and width on images so it will not create extra spaces.
Hi Lemuel, I used your code in an email to hide a bottom navigation in desktop view. Which worked great. However, i'm unable to get the navigation to expand width 100% on mobile (which appears at the bottom of the email). Do you know of a solution?
Note: i'm testing only 1 navigation button here.
Here is the code I'm working with currently:
Here is the email test on litmus: https://litmus.com/pub/e707872
Thanks for the help
If % in width does not work - try pixels.
or try this;
in css:
in the body;
if you forward the email you received to another user --- yes the hidden content render but you can have users use /click the "forward to a friend" feature by your esp. To-date I don't see other solution to permanently hide content. As we all know when an email forwarded, the email client remove some extra added code in inline or embedded styles.
Hello!
I am using the hybrid/fluid method where I am hiding a right border on mobile.
Of course my
class="noborder"works on all the mobile clients except the GMAIL APP.So here is my
<td>tag:And here's what my class looks like:
Is there a way I could inline this noborder class so the Gmail app will hide the border?
I've tried ALL the css inline tools and it's not doing the trick.
Any help would be incredible!!!
Thanks
Hi Thomas,
Here's a clean code snippet for a Mobile Show:
http://tabletrtd.com/codelibrary/2015/10/11/mobile-show
The key is to wrap the show code around a full table. A TR will never fully hide.
To hide or show a <table> or <td> simply apply the following classes below to your <table> or <td>
And add the following CSS between your <style></style> tag in your <head>
What styles are you using to hide your cell?