Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Desktop and mobile image responsiveness

cchartch

Newbie
Total Posts:  3
Posted: 15 February 2017 09:57 AM

Hi,

I’m running into issues with my code for image swapping when viewing either desktop and mobile. It seems to be working fine for some platforms, but not working on Android mobile and some versions of Outlook. Can I get some assistance?

      <style>
 
  .visible-mobile {
    display: none !important;
  }
 
  @media (max-width: 489px) {
    .visible-mobile {
      display: inline !important;
    }
 
    .hidden-mobile {
      display: none !important;
    }
  }
 
  </style>

And the content

  https://thumb9.shutterstock.com/display_pic_with_logo/839950/117069988/stock-photo-dog-listening-with-big-ear-117069988.jpg
                         
  https://thumb1.shutterstock.com/display_pic_with_logo/2997419/259670459/stock-photo-happy-dog-with-tongue-out-and-head-tilt-259670459.jpg


 

Alex Ilhan

Avatar
Administrator
Total Posts:  210
Posted: 15 February 2017 10:33 PM
[ # 1 ]

Hi cchartch,

Welcome to the Email on Acid forums!

Unfortunately, switching images like this isn’t always reliable as Media Queries aren’t supported everywhere. With that being said, I do have an image switcher which will work in a lot of devices;

For the CSS:

.image_mobile {
    display
block!important;
    
max-heightnone!important;
    
max-widthnone!important;
    
line-height1.5!important;
    
width100%!important;
    
heightauto!important;
}

.hide {
    display
none!important;
    
width0px!important;
    
height0px!important;
    
overflowhidden!important;
    
line-height0px!important;
    
font-size0px!important;

For the HTML

<img class="hide" src="DesktopImage" alt="" style="border:none;display:block;text-decoration:none;width:100%;font-size:10px;color:#000001;">

<
span style="display:none; font-size:0; line-height:0; mso-hide: all; max-height: 0; max-width: 0; width:0;" class="image_mobile">
     <
img class="image_mobile" border="0" src="MobileImage" alt="" style="display:none; font-size:0; line-height:0; mso-hide: all;max-height: 0; max-width: 0; width:0; -ms-interpolation-mode: bicubic; font-size:10px; color:#000001;" />
</
span

Let me know how you get on!

Cheers,
Alex


 

cchartch

Newbie
Total Posts:  3
Posted: 16 February 2017 05:59 AM
[ # 2 ]

Hi, Alex. I’ve worked in Email marketing for a few years now and used Email on Acid for a bit to do browser checks.

I replaced what I had with what you provided and it looks like the desktop image HTML code is not working/showing. It’s actually showing the mobile image. Mobile image stays both desktop and mobile version.


 

Alex Ilhan

Avatar
Administrator
Total Posts:  210
Posted: 16 February 2017 08:36 PM
[ # 3 ]

Hi cchartch,

Awesome! Glad to hear you’ve been using the service.

Would you mind please attaching your code a .HTML file and I’ll try to see what’s going on and why the switcher isn’t working as intended.

Cheers!
Alex


 

cchartch

Newbie
Total Posts:  3
Posted: 17 February 2017 08:59 AM
[ # 4 ]

Hi Alex,

See attached HTML file. Thanks.

File Attachments
untitled.html  (File Size: 7KB - Downloads: 63)

 

Alex Ilhan

Avatar
Administrator
Total Posts:  210
Posted: 19 February 2017 09:25 PM
[ # 5 ]

Thank you cchartch!

I think I figured out your issue. You have the code to switch the images in the <style> block, so it’s getting triggered on desktop right now. You’ll need to add Media Queries around the code. So, this code;

.image_mobile {
    display
block!important;
    
max-heightnone!important;
    
max-widthnone!important;
    
line-height1.5!important;
    
width100%!important;
    
heightauto!important;
}

.hide {
    display
none!important;
    
width0px!important;
    
height0px!important;
    
overflowhidden!important;
    
line-height0px!important;
    
font-size0px!important;

becomes

@media (max-width489px{
.image_mobile {
    display
block!important;
    
max-heightnone!important;
    
max-widthnone!important;
    
line-height1.5!important;
    
width100%!important;
    
heightauto!important;
}

.hide {
    display
none!important;
    
width0px!important;
    
height0px!important;
    
overflowhidden!important;
    
line-height0px!important;
    
font-size0px!important;

Hope this helps! Let me know if you have any further issues.

Cheers,
Alex