The designers that I work w/ are completely anal, and refuse to accept that some things just aren't possible, so for me, having them comp up both a "mobile" and "non mobile" is the only way that we can come to an agreement.
One thing to note is that for Outlook, ALL of your tables in your mobile div need to have a display:none; property inline. Lack of not including this will have outlook render your mobile version in addition to your non mobile. So the code is as follows, and I would suggest putting it after your <body>:
<style type="text/css">
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
@media screen and (max-width: 540px), screen and
(max-device-width: 540px) {
body { -webkit-text-size-adjust: none;}
div[id=desktop] {
display:none !important;
width:0px !important;
overflow:hidden !important;
}
div[id=mobile] {
display:block !important;
width:100% !important;
height:auto !important;
max-height:inherit !important;
overflow:visible !important;
}
table[id=body]{
width:100% !important; display:block !important;
}
</style>
<div id="desktop">
<table border="0" cellpadding="0"
cellspacing="0" width="100%" align="center"
bgcolor="#CCCCCC">
<tr>
<td bgcolor="#CCCCCC">
<!---Desktop Email goes here--->
</td>
</tr>
</table>
</div>
<div style="width: 0px; display: none; max-height:
0px; overflow: hidden" id="mobile">
<table width="100%" cellspacing="0"
cellpadding="0" border="0" style="display: none"
id="body">
<tr>
<td
bgcolor="#FFFFFF">
<!---Mobile
Email goes here--->
</td>
</tr>
</table>
</div>
