Morning all,

I have come across an issue with hiding mobile content on Outlook 2007 & 2010. The content is hidden but leaves a big gap and breaks the email. It only effects this versions. Does anybody know what it could be?

Outlook 2007 Outlook 2013

My code for this section looks like:

    <td align="center" class="no-padding" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse !important; padding:0px 0px 0px 0px; background-color:#3D2010" bgcolor="#3D2010">
    <a href="#" target="_blank" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;" >
    <img align="center" src="" width="540" height="245" border="0" alt="Keep warm and toasty this winter" class="mobile-hide" style="display:block;color:#FFFFFF;font-family:Helvetica, arial, sans-serif;font-size:30px;-ms-interpolation-mode:bicubic;border-width:0;height:auto;line-height:100%;outline-style:none;text-decoration:none;" >

    <div style="display:none; font-size:0; line-height:0; mso-hide: all; max-height: 0; max-width: 0; width:0;" class="image-mobile">
    <a href="#"><img border="0" width="420" height="342" src="" alt="" style="display:none; font-size:0; line-height:0; mso-hide: all;max-height: 342; max-width: 420; width:0; -ms-interpolation-mode: bicubic;" class="img-max"></a>

I have a couple of classes to hide/show the content:

hide class="mobile-hide" on image in td
img[class="mobile-hide"]{display: none !important;}

show class="image-mobile" on div
div[class="image-mobile"]{display:block!important; max-height: none !important; max-width:none !important; line-height: 1.5 !important; width:100%!important; height:auto!important;}