While creating an html email, I encountered a little issue. I have designed two layouts - one for desktop (and tablet) and one for mobile. These layouts differ in multiple ways, from images to text. To address this, I created two tables and assigned a class "Desktop" to the table visible on desktop, and "Mobile" with added "display: none;" for the mobile table. I then incorporated the following CSS:
<style>
@media all and (max-width: 767px){
table.Desktop{ display: none;vertical-align:top;line-height:0px;font-size:0px;height:0px;margin:0;padding:0;mso-hide:all;max-height:0px; }
table.Mobile{ display: block !important;opacity: 1 !important;vertical-align:inherit;line-height:inherit;font-size:inherit;height:auto;margin:0;padding:0;mso-hide:inherit; }
table[class="Desktop"]{ display: none;vertical-align:top;line-height:0px;font-size:0px;height:0px;margin:0;padding:0;mso-hide:all;max-height:0px; }
table[class="Mobile"]{ display: block !important; opacity: 1 !important; }
*[class="Desktop"]{ display: none;vertical-align:top;line-height:0px;font-size:0px;height:0px;margin:0;padding:0;mso-hide:all;max-height:0px; }
*[class="Mobile"]{ display: block !important; opacity: 1 !important; }
}
</style>
Despite what some on the web have claimed about using media queries in Gmail, with this code, both Desktop and Mobile elements appear in: Desktop: Gmail Outlook 2010 Outlook Web App Mobile: Gmail App (Android) Gmail App (iPhone) Email default App (Android)
Could anyone assist me in displaying Desktop tables only on desktop and Mobile tables only on Mobile?