Windows Mobile 8 and show/hides

Hey all,

Long time no post but it has been interesting reading up about things.

So I need some help from any guru out there, I am now trying to sort out a issue in Windows Mobile 8 with show hides.  It's more with the show in mobile only that is causing the issues...

This is the code:

<!--[if !mso]><!-->
    <table width="320" class="w320" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF">
      <tr style="width:0; overflow:hidden; float:left; display:none; max-height:0px; mso-hide:all;" class="show">
        <td width="320" class="w320">
CONTENT - VARIOUS TABLES
</td>
      </tr>
    </table>
    <!--<![endif]-->

The issue is that the max-height is making the above container table in Windows Mobile 8 zero pixels high.  Removing this causes big spaces in Gmail desktop but then it renders perfectly fine in Windows Mobile.

I already have this at the top
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Which if I remove it loses all responsiveness and only half of the email is shown in Windows Mobile 8.

So does anybody know of an alternative way of showing a section in mobile only which works across all mobiles and doesn't have issues in desktops...

Thanks,
Rich

jmwhite, 2 years ago

Firstly, its Windows Phone, I can't stand Windows Mobile 8 references! Even Campaign Monitor are guilty of it, Windows Mobile is an ancient mobile OS back in the early 2000's.

</rant>

Anyway... I would apply your current inline styles on a more friendly element like table rather than a row and see if that makes anything better. In order to make this work you'll have to nest two tables.

I also added a couple more elements that can help with hiding as well.

<table width="320" class="w320" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF">
    <tr>
        <td>
               <table border="0" cellpadding="0" cellspacing="0" style="mso-hide: all; overflow: hidden; max-height: 0; width: 0; display: none; line-height: 0; visibility: hidden;" class="show">
                     <tr>
                            <td>Mobile only content, override in media query</td>
                     </tr>
               </table>
               <table border="0" cellpadding="0" cellspacing="0" class="hide">
                     <tr>
                            <td>Desktop view content</td>
                     </tr>
               </table>
       </td>
   </tr>
</table>
rmills, 2 years ago

Hi jmwhite,

Many thanks for your code and setting me right about the name!

But now I can't get the mobile section to display in preview at all and when I test it.

So I am assuming this is the bit when you say "override in media query".

But how do you do that?

Thanks,
Rich

jmwhite, 2 years ago

Let me make sure I'm understanding you. Your basically hiding content from desktop clients that only wants to appear on mobile devices?

If that's the case, then my example basically creates two tables. The first table is the mobile only content, this has all the various inline styling to hide and zero out space to prevent the element creating gaps on desktop clients.

The second table is for desktop clients but needs to be hidden on mobiles. You'd need to control this via a media query with two classes.

@media screen and (max-device-width: 480px), screen and (max-width: 480px) {

     *[class="show"] { 
           max-height: none !important; 
           width: auto !important; 
           display: block !important; 
           line-height: normal !important; 
           visibility: visible !important;
           overflow:visible !important;
      }
    
     *[class="hide"] { 
           display:none !important; 
      }
}

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098