Email layout different between mobile and desktop

Question

I had a little problem while creating an html email. I have two layouts: one for desktop(and tablet) and one for mobile. The problem is that those layouts are different in many ways, from images to texts. I had to create two tables in order to do it and in every table that should be visible on Desktop I put a class "Desktop" and same for mobile(class Mobile and added "display: none;" too for Mobile). Then I added this 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>

Many people on the web said that media queries can be used in Gmail but, with this code, I see both Desktop and Mobile in: Desktop: Gmail Outlook 2010 Outlook Web App Mobile: Gmail App (Android) Gmail App (iPhone) Email default App(Android)

Can someone help me showing Desktop tables only on desktop and Mobile tables only on Mobile?

score 2 · Answer 1 · edited May 23 '17 at 12:20

This has been asked a few times - for example, Gmail Responsive Email - Media Queries - Style Tag

The short answer: Gmail doesn't support @media queries - it strips all embedded styles (<style>…</style>), leaving only inline styles (e.g. <div style="…">), and you can't use media queries in inline styles. The various versions of Outlook are a whole different problem. Check out the free trials of www.litmus.com and/or www.emailonacid.com. There are lots of good resources out there on how to deal with mobile HTML emails - Litmus and Email On Acid both have good blogs, and there's good info in the answers to related questions here.

Email layout different between mobile and desktop

1 Answers1