The way to hide tables in HTML email in embedded css is only to show them later through a media query

Question

I am working on my first mobile email template using media queries. It’s so good so far that media queries are cool, and I’ll be sure to use this in my web design projects.

However, I encountered one difficulty; I have a rather complicated header design (background image with Facebook and youtube logos on it that link to the corresponding pages), so it is cut in a certain way. This is not so easy to do in the mobile version, and I thought that maybe I can fix it differently: use two different header tables, one command on large devices and one on small devices.

The mobile part is not a problem, as they interpret embedded CSS well.

But I can not hide the full table for other email clients. I tried displaying: none, position: absolute with top and left -9999px, etc.

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

Answer 1

OK, it seems I found the solution myself:

In the row, on the elements inside the table that should be hidden in the normal, non-mobile version, I add the following properties:

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

I am testing it right now with a table with one tr, one td and one p inside 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 "showmobile" class, which I manipulate in my head style sheet:

 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; } 

I got this method of class selection from the awesome html email template @ http://htmlemailboilerplate.com/ → link to this article: http://www.campaignmonitor.com/blog/post/3457/media-query-issues-in -yahoo-mail-mobile-email / → basically, this makes Yahoo mail good and does not use CSS in a media request when it is not needed.

CONCLUSION: I tested it on four platforms: GMail, Outlook 2010, Lotus Notes (I know!) And iPhone 3G. All of them give the expected result, with the exception of Outlook, which still shows a line of 1 pixel. With some clever content (coloring the text in the background) this hides very well.

I will keep you posted if I encounter any problems with certain email clients.

Answer 2

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

Answer 3

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

• You cannot use height. Gmail replaces it with a minimum height.
• Not exactly match the color and text bg
• images should be made 1px in height and width, and then enlarged w / media requests
• you can still display some elements on the screen in gmail - try to make them as invisible as possible

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;} } 

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> 

Answer 4

I came up with a slightly more elegant solution that seems to work with all the popular email clients and desktop computers, except for Lotus Notes 6 and 7 (presumably). Here we go:

 <style> @media only screen and (max-width: 480px) { .invisible { max-height: none !important; font-size: 12px !important; display: block !important; } } ... .invisible { max-height: 0px; font-size: 0; display: none; } </style> 

Here are my results - do you think this is also a viable solution?

Answer 5

Here is what I use for html emails to hide and show content. Basic, user-friendly classes "mobile" and "desktop". Mobile is for mobile devices only. "Desktop" is displayed only for the desktop.

 *[class=mobile]{display:none;} @media only screen and (max-width:600px) { *[class=desktop]{display:none !important;} *[class=mobile]{display:block !important;width:auto !important;max-height:inherit !important;overflow:visible !important;float:none !important;} *[class="block"]{display:block !important;padding:5px;} } 

But if you want your email to work the way you hoped, in Outlook and Gmail you need to go a little further. These email clients will display the desktop version, regardless. But you don’t want them to display mobile content, so wrap all your mobile content in a conditional comment shown in the example below. This will cover you for Outlook.

To make Gmail behave, you need to zero out all of your elements and expand them into CSS, which Gmail completely ignores. All built-in which you do not want to show Gmail should be width: 0; max-height: 0; overflow: hidden;

This is when CSS (the example above comes into play). A second-class ad in a media query expands your block to a suitable size for display on mobile devices, and Gmail hides it.

 <!--[if !mso]><!--> <td class="mobile" style="width: 0;max-height: 0;overflow: hidden;"> <img alt="" border="0" src="http://www.placehold.it/150x150" style="display:block;" width="100%"> </td> <!--<![endif]--> 

And last but not least, this last part has not yet been tested. I am having problems with Windows Mobile to hide what I want it to hide. I think developing my conditional comment will solve the problem by changing it like this:

 <!--[if !mso]><!--><![if !IEMobile]> <td class="mobile" style="width: 0;max-height: 0;overflow: hidden;"> <img alt="" border="0" src="http://www.placehold.it/150x150" style="display:block;" width="100%"> <![endif]><!--<![endif]--> 

But then again, this last part, which I have not tested yet, will test tomorrow tomorrow, but if someone wants to develop Windows Mobile, please do it. I carefully checked everything else.

Answer 6

You need to install:

 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 for multiple email applications, and then you can use media queries to change the effects.

litmus.com can be a great tool for this.

Answer 7

display:none receives gmail!

To hide tables from gmail, it's like a block with zero height: Define an inline style for each table: display:block; overflow:hidden; height: 0; max-height: 0; display:block; overflow:hidden; height: 0; max-height: 0;

Remember to apply inline style to any child tables of a hidden table. The phoneTableOnly override phoneTableOnly should only be in the parent table.

In the example below, only tables will be displayed on devices that support multimedia queries with a maximum width of 640 pixels. Ideal for menus only for mobile devices, which you do not want to display on desktops and gmail.

 <style type="text/css"> /*Note: This stylesheet is ignored by gmail.*/ @media only screen and (max-width: 640px) { /*Restore tables:*/ table[class="phoneTabletOnly"], table[class="phoneTabletOnly"] table { display: table !important; overflow: visible !important; height: auto !important; max-height: none !important; } } </style> <table width="100%" cellpadding="0" cellspacing="0" border="0" class="phoneTabletOnly" style="display:block; overflow:hidden; height: 0; max-height: 0;"> <tbody> <tr> <td> <table cellpadding="0" cellspacing="0" border="0" style="display:block; overflow:hidden; height: 0; max-height: 0;"> <tbody> <tr> <td> This will be hidden in gmail. </td> </tr> </tbody> </table> <table cellpadding="0" cellspacing="0" border="0" style="display:block; overflow:hidden; height: 0; max-height: 0;"> <tbody> <tr> <td> This will also be hidden in gmail. </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> 

PS. Tested in Litmus.