Removing email images in Mobile Setting

[Pete_Jones]

Is there a way to remove an image in an email when it is viewed in a mobile device? We have a newsletter that has several 150x150 images that when viewed in mobile really clutter the experience. I'd like for them to have a default removal option after the mobile break.

Thanks.

[Grace_Brebner3]

Hey Pete,

You can generally do this pretty easily with CSS media queries. It tends to look something like this:

@media only screen and (max-width: 380px){
     .hide-mobile {
          display:none !important;
          overflow:hidden; 
          mso-hide:all;
          margin:0;
          font-size:0; 
          max-height:0;
     }
}

Note that this will not work with absolute consistency across all email clients - some don't accept CSS styling. You'll find it helpful to test across your priority email clients using a tool like Litmus or Email on Acid.

Hope that helps.

[Dave_Roberts]

Hey Pete, I've also had inconsistent results when trying to hide stuff for mobile in email. Another approach to this that might be more effort is to think about this the other way around and coding the image to be hidden and then using media queries to show it at larger sizes - which generally means more CSS is accepted b/c your in a "bigger" (i.e. desktop/tablet) environment rather than a mobile system. It's probably a lot more work to turn a template 'upside-down' and code it to be mobile first, but that's the only sure-fire way I could think of to accomplish this with any consistency.