Why is my class being stripped out in gmail? - html

Question

I am coding an email, and have created a class for something to be seen on mobile, but not on desktop.
For some reason, Gmail on the desktop is stripping the class.
Does anyone know where I am going wrong? It works on other desktop email platforms.
<style type="text/css">
/* Smartphone Portrait and Landscape */
#media screen and (max-width: 600px) {
.mobileSpacer {
display: block;
}
}
.mobileSpacer {
display: none;
}
</style>

Answer 1

It should work, as Gmail desktop supports <style> blocks. There are certain forms of Gmail that do not support <style> blocks, and these are: Gmail when viewed from a browser on mobile (Gmail webmail on mobile) - as opposed to the Gmail app; Gmail IMAP/POP (e.g. business users using their own domain); Gmail after you've clicked 'view full email' on a long email.
Gmail will also strip a <style> block(s) if you have something in it that it doesn't like: [attribute] and other fancy selectors, spelling/formatting mistakes. Use it's own style block (you can have multiple) to ensure it doesn't remove this one.
Due to this, I would use a mobile-first solution. That is, inline, use what you want for the mobile view. (I can't suggest what you want inline because you don't have the code for that.) The desktops can cope with <style> blocks.
Then use a min-width #media query:
#media screen and (min-width: 600px) {
.mobileSpacer {
display: none;
}
}
Desktops will apply this (except for a rare few very old desktop/webmail platforms - and that's why we cater for the much more popular Gmail).
Outlook for Windows won't apply it, but it has its own special code. You just add mso-hide:all inline:
<td style="mso-hide:all">