Outlook email shows both mobile image and desktop image when i only want desktop | Community
Skip to main content
A
aayushp20
Level 2
April 7, 2026
Question

Outlook email shows both mobile image and desktop image when i only want desktop

  • April 7, 2026
  • 2 replies
  • 63 views

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:

  1. <!--[if !mso]><!--> around mobile mktoImg div
  2. Inline mso-hide:all; display:none on the mktoImg div
  3. Separate <tr> rows with mso-hide:all on the <td>
  4. Two separate mktoModule tables — Marketo merged them back into one
  5. MSO conditional <style> in <head> — Outlook doesn't apply <style> block rules to suppress images
  6. CSS width:0 !important; height:0 !important on .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!

 

2 replies

Disha_Goyal6
Community Advisor
Disha_Goyal6Community Advisor
Community Advisor
April 13, 2026

Hi ​@aayushp20, in one of the email template, I have used the below code to create show/hide variable of CTA
<!--[if ${cta-1_toggle}mso]><!-- -->
                                      <tr style="display:none${cta-1_toggle}important;">
                                        <td align="${cta_align:center}">
                                          <table class="mob-align-${cta_mob-align:center}" border="0" cellpadding="0" cellspacing="0" style="width:${cta_width:174-270}px;">
                                            <tr>
                                              <td class="flex-${cta_style:a}">
                                                <div class="mktoText" id="banner-a.cta" mktoName="CTA">
                                                  <a href="${CTALink}?utm_medium=${utm-medium}&amp;utm_source=${utm-source}&amp;utm_campaign=${utm-campaign}" target="_blank">${CTAText}</a>
                                                </div>
                                              </td>
                                            </tr>
                                          </table>
                                        </td>
                                      </tr>
                                      <!--<![endif]→

 

 <meta class="mktoBoolean" id="cta-1_toggle" mktoName="CTA #1: Toggle" false_value="IE | " true_value="!" false_value_name="Show" true_value_name="Hide" mktoModuleScope="true">

 

We can customize this solution according to your requirement. If you still face any issue, please share the HTML.

Dave_Roberts
Dave_Roberts
Level 10
April 20, 2026

This looks like code copied from an older version of the [FLEX] EM Framework template -- I’d recommend removing the colons from the variable id values when you get a chance, those can create downstream issues and we’ve since removed them from the Framework a few years ago. 

Disha_Goyal6
Community Advisor
Disha_Goyal6Community Advisor
Community Advisor
April 21, 2026

Hi ​@Dave_Roberts, it is working fine for me till now. I am not seeing any colon in varibale value. Could you please share the screenshot?

Dave_Roberts
Dave_Roberts
Level 10
April 21, 2026

​@Disha_Goyal6 -- it’s not in the value, it’s in the id=”” for the variable. 

 

Disha_Goyal6
Community Advisor
Disha_Goyal6Community Advisor
Community Advisor
April 22, 2026

ok Got it ​@Dave_Roberts.

    Terms & ConditionsAccessibility statement

    Loading footer...