Hi All,

I thought I'd share some of my code once more. This time to hide mobile elements on the desktop. Any feedback would be appreciated.

This code is for those developing desktop first email templates.

First, I add this to a mobile media query...


    *[class=mobile] {display: block !important; max-height: none !important; overflow: visible !important; }

Then I wrap any element that I want to hide on desktop in this...

    <!--[if !mso 9]><!-->
    <div class="mobile" style="mso-hide: all; max-height: 0; overflow: hidden;">

    // Code goes here

    </div>
    <!-- .mobile -->
    <!--<![endif]-->

Finally, add this class and styles to any td, img etc elements within... (using td as an example)

     <td class="mobile" style="mso-hide: all; max-height: 0; overflow: hidden;">

Bonus... Don't add font styles to your td elements, add them to spans wraping your text. That way you don't have to set and unset them in your media queries.

Have a great day!

Tom

http://www.leapwing.co.uk