Image swap using Media Queries not working

Hello,
I'm trying to show two different main banners depending on desktop or mobile viewing. I've read your guide on Optimizing images for mobile, but still can't manage to achieve the right outcome. I'm able to show the 'desktop' image like normal, but below 480px, the 'mobile' image doesn't render and instead the area is blank. I think it might have something to do with the display:none attribute on my td.

Any feedback would be greatly appreciated!

Here is the media queries inside the <head>:

@media only screen and (max-device-width: 480px) {
     /* MOBILE WIDTH - SINGLE COLUMN */
          table[class="mobile"], td[class="mobile"], img[class="mobile"] {
          width: 320px !important;
          height: auto !important;
          margin: 0 !important;
          padding: 0 !important;
     }
        
     td[class="headercell"] {
          background-image:url(images/main-mobile.jpg) !important;
          width: 320px !important;
          height: 187px !important;
     }
    
     td[class="headercell"] img { 
          display: none !important;
     }
}

Here is my code inside the <body>:

<!-- START WRAPPER -->
<table width="100%" border="0" cellpadding="10" cellspacing="0" align="center" class="mobile">
<tr>
<td bgcolor="#ffffff" width="100%">

     <!-- START MAIN BANNER -->
     <table border="0" cellpadding="0" cellspacing="0" align="center">
     <tr>
     <td class="headercell" background="images/main-mobile.jpg no-repeat 100% 0%"><img width="650" height="380" alt="" src="images/main.jpg" border="0"  /></td>
     </tr>
     </table>
     <!-- END MAIN BANNER -->

</td>
</tr>
</table>
<!-- END WRAPPER -->
roshodgekiss roshodgekiss, 3 years ago

Hi there designbyremedy, I suspect the issue is that you're using an invalid HTML attribute in here:

<td class="headercell" background="images/main-mobile.jpg no-repeat 100% 0%">

Without that, the following code performs the swap just fine:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Kitten test</title>
<style type="text/css">
@media only screen and (max-width: 480px) {
     /* MOBILE WIDTH - SINGLE COLUMN */
          table[class="mobile"], td[class="mobile"], img[class="mobile"] {
          width: 320px !important;
          height: auto !important;
          margin: 0 !important;
          padding: 0 !important;
     }
        
     td[class="headercell"] {
          background-image:url(http://placekitten.com/320/187) !important;
          width: 320px !important;
          height: 187px !important;
     }
    
     td[class="headercell"] img { 
          display: none !important;
     }
}
</style>
</head>

<body>

<!-- START WRAPPER -->
<table width="100%" border="0" cellpadding="10" cellspacing="0" align="center" class="mobile">
<tr>
<td bgcolor="#ffffff" width="100%">

     <!-- START MAIN BANNER -->
     <table border="0" cellpadding="0" cellspacing="0" align="center">
     <tr>
     <td class="headercell"><img width="650" height="380" alt="" src="http://placekitten.com/650/380" border="0"  /></td>
     </tr>
     </table>
     <!-- END MAIN BANNER -->

</td>
</tr>
</table>
<!-- END WRAPPER -->

</body>
</html>

Hope that helps!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
designbyremedy, 3 years ago

Thanks for the reply roshodgekiss! Even after your suggestion, my code still wasn't working right. So I looked closely again at your code and realized the issue! The image(s) have to be hosted somewhere and references as a URL rather than a local file. I've tested this and that seems to be required for the image switch to take place.

Thanks!

roshodgekiss roshodgekiss, 3 years ago

Hi designbyremedy, excellent, I'm glad you found the solution! I should have thought of that before throwing in a bunch of placeholder images... ;)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098