Question
Outlook email shows both mobile image and desktop image when i only want desktop
Hi all,
I'm building an email template module with two images (one for desktop, one for mobile) using the standard CSS media query show/hide approach. It works perfectly in browsers, but Outlook desktop renders both images stacked.
I've done some digging and it seems like Marketo's processing pipeline is stripping the mechanisms I'd normally use to hide content from Outlook (inline styles on image divs, conditional comments in the body). By the time the email reaches Outlook, there's nothing left to tell it to hide the mobile image.
Things I've tried:
<!--[if !mso]><!-->around mobile mktoImg div- Inline
mso-hide:all; display:noneon the mktoImg div - Separate
<tr>rows withmso-hide:allon the<td> - Two separate
mktoModuletables — Marketo merged them back into one - MSO conditional
<style>in<head>— Outlook doesn't apply<style>block rules to suppress images - CSS
width:0 !important; height:0 !importanton.responsive-hero-image-mobile img— Outlook ignores it
Has anyone successfully implemented a desktop/mobile image swap in a Marketo template that actually works in Outlook desktop? If so, how did you approach it?
Any help appreciated, thanks!