Hide certain email elements on mobile

Question

I'm sending out an email in which there is a clever visual element that relies on being able to highlight text. As this is not really possible on mobile and it looks really awkward without that visual effect, I was thinking of trying to just not show this element on mobile.

As far as I know however, the only way to do this is with an @media tag, which to the best of my knowledge can't be done in the in-line email-friendly css way. Is this possible in some other way?

I'm using MailChimp if that's relevant, but I'm not sure that it would be.

Answer 1

Media queries will definitely work inline through MailChimp. Basically you just assign a class to the element you want to hide, like "desktop-only," and then apply a CSS rule to that selector to display:none when the browser width is below a certain pixel width.

@media only screen and (max-device-width: 480px) {
  .desktop-only {
     display:none;
  }
}

https://blog.mailchimp.com/using-media-queries-to-improve-readability/

Answer 2

Media queries have partial support in major email clients. There is no 100% technique to target all mobile devices across all clients.

Instead of using a max-width media query to hide it on mobile, you could use a min-width media query to show it on non-mobile platforms if you prefer. That way it will default to hidden in clients that do not support media queries.

Also, there is a difference between min-width and min-device-width when calling them. Most responsive email templates use max-width.