Home/ Questions/Q 8408755
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T23:43:12+00:00

I’m working on my first mobile template for an E-mail, using media queries. So

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0