A way to hide tables in HTML e-mail in inline css - only to show them later via a media query

Question

I'm working on my first mobile template for an E-mail, using media queries. So far so good, media queries is cool and I'll be surely using this in my web design projects from now on.

However, I'm running into one difficulty; I have a pretty complicated header design (background image with Facebook & youtube logos on it that link to the corresponding pages), so it's sliced in a particular way. This makes it not too easy to make into a mobile version, and I thought maybe I could fix it in a different way: use two different header tables, one shwowing on large devices, and one showing on small devices.

The mobile part is no problem, since they interpret embedded CSS quite well.

But I can't seem to hide a complete table for other mail clients. I tried display:none, position:absolute with top and left -9999px, etc...

Does anyone have a solution for this? It would save me a lot of time.

Solution 1

OK, I seem to have found the solution myself:

Inline, on the elements inside the table to be hidden in the normal, non-mobile version, I put the following properties:

line-height:0px;
font-size:0px;
height:0px;
margin:0;
padding:0;

I'm testing it right now with a table with one tr, one td and one p inside the td.

I put these properties on almost every element:

<table cellpadding="0" cellspacing="0" border="0" align="center" id="hidden">
  <tr class="showmobile" style="line-height:0px;font-size:0px;height:0px;margin:0;padding:0;">
    <td class="showmobile" style="line-height:0px;font-size:0px;height:0px;margin:0;padding:0;">
       <p class="showmobile" style="color:White; line-height:0px;font-size:0px;height:0px;margin:0;padding:0;">Testing this shiznit</p>
    </td>
  </tr>
</table>

I also give these elements the class "showmobile", which I manipulate like this in the internal stylesheet in the head:

tr[class="showmobile"]
        {
         line-height:125% !important;
         font-size:16px !important;
         height:30px !important;   
        }

td[class="showmobile"]
        {
         line-height:125% !important;
         font-size:16px !important;
         height:30px !important;   
        }

p[class="showmobile"]
        {
         line-height:125% !important;
         font-size:16px !important;
         height:30px !important;   
        }

This way of selecting the classes, I got from the awesome html email boilerplate @ http://htmlemailboilerplate.com/ -> linking to this article: http://www.campaignmonitor.com/blog/post/3457/media-query-issues-in-yahoo-mail-mobile-email/ -> basically, it makes Yahoo mail play nice and not apply the CSS in the media query when it doesn't need to.

CONCLUSION: I've tested it on four platforms: GMail, Outlook 2010, Lotus Notes (I know!), and an iPhone 3G. They all give the expected result, except for Outlook, which still shows a 1 pixel line. With some smart content (coloring the text to go up in the background), this is very well hideable.

I will keep you guys up to date if I bump into any problems with certain mail clients.

Solution 2

Place the table in a div html tag and add its style as display:none !important in the media queries.

Solution 3

You need to set:

style="vertical-align:top;line-height:0px;font-size:0px;height:0px;margin:0;padding:0;mso-hide:all;"

This will give you the most invisibility across multiple email applications, then you can use media queries to reverse the effects.

litmus.com can serve as a great tool for this.

Solution 4

After quite a battle I was able to come up with this.

• You can't use height. Gmail replaces it with min-height.
• Don't exactly match the bg color and text
• images need to be made 1px height and width and then enlarged w/ the media queries
• you still might get some elements displaying on the screen in gmail - try and make them as unnoticable as possible

The CSS:

@media all and (max-width: 480px) {
  .mobile-hide {
     width:1px !important; 
     display:none !important; 
     color:#fff;
  }
  .mobile-show {
     display:block !important;
     line-height:125% !important;
     font-size:14px !important;
     height:auto !important; 
     color:#666 !important;
  }
  .mobile-image {
     width:350px !important;
     height:446px !important;
  }
  .w800 {width:400px !important;}
}

The HTML:

<table class="w800" width="800">
...
<tr><td>
<a href="http://mylink"><img src="image.jpg" width="300" height="300" border="0" alt="My Sweet Image" /></a>
</td>

<!-- a big fat image on the right for big screens only -->
<td class="mobile-hide">
<img class="mobile-hide" src="image2.jpg" width="450" height="500" border="0" alt="" />
<span class="mobile-hide">
My Text with a <a href="http://mylink" class="mobile-hide">link</a></span>
</td></tr>
...
</table>

<!-- a new table at the bottom for small screens only, "one column" -->
<table width="400" style="width:400px; margin:0 auto;">
<tr><td class="mobile-show" style="line-height:0px;font-size:0px;height:0px;margin:0;padding:0;">
<img class="mobile-image" src="image2.jpg" width="1" height="1" border="0" alt="" />
<span class="mobile-show" style="font-size:1px; color:#ffe;">
My Text with a <a href="http://mylink" style="text-decoration:none; color:#ffe;" class="mobile-show">link</a></span>
</td></tr>
</table>

View more solutions