❗️ Mobile / Desktop element visibility not working reliably
I
Ian Molendyk
I had a client show me an email I sent him that contained desktop-only and mobile-only elements. He opened it up in his Outlook desktop client and it was showing all elements regardless of mobile/desktop visibility settings. I'm nervous about using this feature now.
Log In
I
Ian Molendyk
ChatGPT has this to say about it...
This issue arises from how different email clients and servers render HTML and CSS within emails. The “show/hide elements by mobile/desktop” functionality relies heavily on CSS media queries, which are not universally supported across email clients—especially in Microsoft Outlook, which uses its own rendering engine (Word-based rendering) that has limited support for modern email design techniques.
Why This Is Happening:
1. Outlook Rendering Engine (Word-based):
• Outlook for desktop (and emails routed through MS Exchange) does not fully support CSS media queries, which are typically used to show/hide elements based on screen size. This means the visibility rules may be ignored, resulting in all elements being displayed.
2. Different Rendering Standards:
• Spark (and many modern email clients) render emails using WebKit, which supports media queries and other modern CSS rules. This is why it looks fine in Spark but not in Outlook.
3. MS Exchange Stripping CSS or Modifying HTML:
• If your client’s email is routed through an MS Exchange server, it may strip or alter the CSS in your email. This can break visibility settings, causing the issue you described.