Hiding content from desktop, Outlook shows a gap

Hi guys,

I'm trying to hide a full-width <div> from the desktop version, but Outlook doesnt like it and show a big gap (as if the content is there).

Any tips how to avoid this?

This is the html

  <table border="0" width="600"  cellpadding="0" cellspacing="0" class="container" >
                                <tr>
                                  <td style="font-family:Verdana, Geneva, sans-serif; font-size:11px; color:#888888; padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:20px;">
                                 
                                     <div class="show-on-mobile" style="display:none;">
                          
 <table width="0" border="0" cellspacing="0" cellpadding="5" align="center">
                <tr>
        <td width="33" height="32" style="width:33px; height:32px;">
        <a href="#" target="_blank" class="facebook-m"></a>
        </td>
        <td width="33" height="32" style="width:33px; height:32px;">
        <a href="#" target="_blank" class="twitter-m"></a> 
        </td>
        <td width="33" height="32" style="width:33px; height:32px;">
        <a href="#" target="_blank" class="insta-m"></a>  
        </td>
        <td width="33" height="32" style="width:33px; height:32px;">
        <a href="#" target="_blank" class="youtube-m"></a>  
        </td>
                </tr>
</table>
 
        </div>
                                 
                                  
                                  
       <table  border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td   valign="middle">
   
 
 
                 <table  border="0" cellspacing="0" cellpadding="0" align="left" style="padding-top:0px;">
                     <tr>
                          <td align="left" >
                         
                          <div class="hide-on-mobile" style="width:47px !important; padding-right:15px;">
                          <img src="10.png" width="47"  />
                          </div>
                         
                          </td>
                         
                         <td width="450" align="left" style="font-family:Verdana, Geneva, sans-serif; font-size:11px; line-height:14px; padding-left:0px; text-align:left; color:#888888;">
                         You have received this email because you have a registered   account. To ensure you continue to receive our emails, please add <a href="mailto:#" target="_blank" style="text-decoration:none; color:#888888;">test</a> to your address book.
                        </td>
                                                
                         <td  align="right">
                          
                            
    <div class="hide-on-mobile">
                           
                            
                            
  <table width="0" border="0" cellspacing="0" cellpadding="5">
      <tr>
        <td width="33" height="32" style="width:33px !important; height:32px !important;"><a href="#" target="_blank"><img src="06.png" width="33" height="32" border="0"  /></a></td>
        <td width="33" height="32" style="width:33px !important; height:32px !important;"><a href="#" target="_blank"><img src="08.png" width="33" height="32" border="0" /></a></td>
      </tr>
      <tr>
        <td width="33" height="32" style="width:33px !important; height:32px !important;"><a href="#" target="_blank"><img src="14.png" width="33" height="32" border="0" /></a></td>
        <td width="33" height="32" style="width:33px !important; height:32px !important;"><a href="#" target="_blank"><img src="15.png" width="33" height="32" border="0"  /></a></td>
      </tr>
</table>
 
             </div>
                   
                    
                    </td>
                
                     </tr>
                  </table>
 
              
    
    </td>
  </tr>
</table>

and the css

  <style type="text/css">
               
                @import url(http://fonts.googleapis.com/css?family=Pacifico);
                               
                                img {
                max-width: 100%;
}
        .ReadMsgBody { width: 100%; background-color: #ffffff;}
        .ExternalClass {width: 100%; background-color: #ffffff;}
        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}
        body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
        body {margin:0; padding:0;}
        table {border-spacing:0;}
        table td {border-collapse:collapse;}
        .yshortcuts a {border-bottom: none !important;}
                                .btn {
                text-decoration:none;
                color: #ffffff;
                background-color: #007cf7;
                border: 2px solid #003399;
                padding:11px 18px;
                font-weight:bold;
                font-size:18px;
                margin-right:10px;
                text-align:center;
                cursor:pointer;
                display: inline-block;
}
 
div[class="show-on-mobile"] {
                                                               
                                                                height:0 !important;
                                               
        }
                               
                                                                  
                 
                               
        /* Constrain email width for small screens */
 
 
        @media screen and (max-width: 600px) {
 
 
            table[class="container"] {
 
 
                width: 98% !important;
 
 
            }
        }
 
 
 
 
        @media only screen and (max-width : 600px) {
                                               
                                               
                                               
                                                .facebook-m {
                                                                background: url(06.png) no-repeat top left;
                                                                background-size: 33px 32px;
                                                                width:33px !important;
                                                                height:32px !important;
                                                                display:block;
                                                float:left;
                                                margin-top:10px;
                                                               
                                                }
                                               
                                                .twitter-m {
                                                                background: url(08.png) no-repeat top left;
                                                                background-size: 33px 32px;
                                                                width:33px !important;
                                                                height:32px !important;
                                                                display:block;
                                                                float:left;
                                                                margin-left:20px;
                                                                margin-top:10px;
                                                }
                                               
                                                .insta-m {
                                                                background: url(14.png) no-repeat top left;
                                                                background-size: 33px 32px;
                                                                width:33px !important;
                                                                height:32px !important;
                                                                display:block;
                                                                float:left;
                                                                margin-left:20px;
                                                                margin-top:10px;
                                                }
                                               
                                                .youtube-m {
                                                                background: url(15.png) no-repeat top left;
                                                                background-size: 33px 32px;
                                                                width:33px !important;
                                                                height:32px !important;
                                                                display:block;
                                                                float:left;
                                                                margin-left:20px;
                                                                margin-top:10px;
                                                }
                                                               
                                                               
                                                               
                                                               
                                                               
                                                               
                                               
 
                                a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;}
 
          
                                                .hide-on-mobile {
                                                                display:none !important;
                                                }
                              
                                div[class="show-on-mobile"] {
                                                                display:block !important;
                                                                height: auto !important;
                                                }
                                               
                                               
               
 
}
 
    </style>

I'm trying to hide the <div class="show-on-mobile" ...>

Thank you very much in advance!

Thanos

Alex I., 2 years ago

Hey, this is what I use to hide stuff on Desktop:
CSS for Outlook specifically.

<!--[if gte mso 9]>
<style type="text/css">
        .mobile_content {display: none !important; overflow:hidden; float:left; width:0px; display:none;  line-height:0px;}
        .hideD {display:none !important; overflow:hidden; float:left; width:0px; display:none;  line-height:0px; color:#f1f1f1;background-color:#f1f1f1 !important;} 
</style>
<![endif]-->

Media query to show it on Mobile:

 @media only screen and (max-device-width: 480px) {
        div[class="mobile_content"] {
             width:320px !important;
             overflow: visible !important;
             float: none !important;
             display: block !important;
             line-height:100% !important;
             }      
        div[class="hideD"], table[class="hideD"], td[class="hideD"] {
             overflow: visible !important;
             float: none !important;
             line-height:inherit !important;             
             
             }  
    
    

    }

And the HTML:

 <div class="mobile_content" style="overflow:hidden; float:left; width:0px; display:none; line-height:0px;color:#ffffff;">
TABLE GOES HERE
</div>
Stig Stig, 2 years ago

Hey Thanos,

I haven't tested Alex's version, but I just wanted to mention that another option for fully hiding content in Outlook is style="mso-hide: all;"

Hopefully one of those do the trick for you – let us know how it goes :)


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Stig Stig, 2 years ago

Another quick thought – you may try hiding the table directly instead of wrapping a <div> around it.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Alex I., 2 years ago
Stig :

Another quick thought – you may try hiding the table directly instead of wrapping a <div> around it.

Mine is a year old so my memory is hazy but the DIV made it work nicely on everything, maybe I was just bamboozled from 2 days of trying to get it to work.

Silverthan, 2 years ago

Thanks for the help guys, after 32 versions it finally worked!

I used all kind of combinations and late in the afternoon it was done.

This is what worked for me

For the div

<div class="show-on-mobile" style="display:none; height:0; max-height:0;">
 
     div[class="show-on-mobile"] {
              display:none !important;
             height: 0 !important;
              max-height:0 !important;
                    }
                               
 
                
//media query

div[class="show-on-mobile"] {
                display:block !important;
             height: auto !important;
               max-height:none !important;
                  }
 

For the table

<table width="0" border="0" cellspacing="0" cellpadding="5" align="center" class="hideD" >
 
  <!--[if gte mso 9]>
<style type="text/css">
        .show-on-mobile {display: none !important; overflow:hidden; float:left; width:0px;  line-height:0px;}
        .hideD {display:none !important; overflow:hidden; float:left; width:0px; display:none;  line-height:0px; color:#000000;background-color:#000000 !important;}
</style>
<![endif]-->

When putting the hideD class on the td, it was ruining the responsiveness for some weird reason (?) - a lot of cursing which I will rather not share... :)

Thanks again guys, really appreciate it.

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