Outlook conditional comments hiding mobile version on all clients

Question

I am having trouble with my responsive email template. When I add the if !mso statement, to prevent my mobile version from displaying under my desktop version in Outlook, it also hides the mobile version on mobile email clients. How do I hide the mobile version in Outlook but still have it appear in mobile clients?

CSS:

    @media screen and (max-width: 320px), screen and (max-device-width: 540px) 
    {body { -webkit-text-size-adjust: none;}
    div[id=desktop] {
    display:none !important;
    width:0px !important;
    overflow:hidden !important;
    }
    <!--[if !mso]><!-->
    div[id=mobile] {
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:inherit !important;
    overflow:visible !important;
    } <!--<![endif]-->

HTML:

    <!--MOBILE VERSION -->
    <!--[if !mso]><!-- -->
    <div style="width: 0px; display: none; max-height: 0px; overflow: hidden"  
    id="mobile">
    <table width="320" cellspacing="0" cellpadding="0" border="0" id="body">
    <tr><td>MOBILE CONTENT</td></tr>
    </table>
    </div>
    <!--<![endif]-->
    <!--END MOBILE VERSON-->

Answer 1

Instead of conditional comments, set display:none as the default:

div[id='desktop'], div[id='mobile'] { display: none; }

then override it for clients that support media queries:

 /* Desktop */
 @media screen
   {
   div[id='desktop'] { display: block; }
   div[id='mobile'] { display: none; }
   }

 /* Mobile */
 @media screen and (max-width: 320px)
   { 
   div[id='desktop'] { display: none; }
   div[id='mobile'] { display: block; }
   }

 /* Mobile */
 @media screen and (max-device-width: 540px)
   { 
   div[id="desktop"] { display: none; }
   div[id="mobile"] { display: block; }
   }

References

• HTML ignored by Outlook