media query code for substitute images for email on a mobile device

I'm don't normally get involved in coding, but due to unforeseen I'm having to do so.
I want to send an email with animated gif to a small selection of existing contacts, but having read up on responsive emails I want to use a 2nd gif that is smartphone friendly. Previously a very simple index has been used to send mails but I don't have a clue where to place the relevant media query and change the rest of the code accordingly.

this is the current index, (an online link is yet to be added):

<style type="text/css">
<!--
body {
    background-color: #ffffff;
}
-->
</style><body >
<table width="610" border="0" align="centre" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#ffffff"><img src="http://www.adrianrobson.com/clients/4d/4D_card46.gif" alt="Seasons Greeting from us Us" width="611" height="487" border="0" usemap="#Map"></td>
  </tr>
  <tr>
    <td bgcolor="#ffffff">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        </table></td>
  </tr>
  <tr>
    </tr>
    <tr>
    <td align="center" style="font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #3e8963;"><unsubscribe style="font-size:9px; color:#ffffff;">Unsubscribe</unsubscribe></td>
  </tr>
  <tr>
    <td align="center" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #585858;">&nbsp;</td>
  </tr>
  </table>
</body>
</html>

JohnP JohnP, 4 years ago

media queries go at the top in your <style> tag. Not sure if you can swap out a non-background image. I think most people just resize the same image proportionately so that it fits the mobile screen. In that case you would just declare a different width and height in css. (I don't do a lot of media query work, so correct me if I'm wrong anyone...)

Also, you have a couple of things in your code that need fixing:
remove the align="centre" from the first table and also you have a table below without any rows or cells and a table row without any cells.

Hope that helps

Step, 4 years ago

Hello Toopanga,

The code below should help you with what you want to do. 

<style type="text/css">
<!--
body {
    background-color: #ffffff;
}
    @media only screen and (max-device-width: 480px) {

     td[class="present"] {
        background-image: url("YOUR-ANIMATED-GIF");
        
    }
    td[class="present"] img { 
        display: none !important; 
    }

}




-->
</style><body >
<table width="610" border="0" align="centre" cellspacing="0" cellpadding="0">
  <tr>
    <td class="present" bgcolor="#ffffff"><img src="http://www.adrianrobson.com/clients/4d/4D_card46.gif" alt="Seasons Greeting from us Us" width="611" height="487" border="0" usemap="#Map"></td>
  </tr>
  <tr>
    <td bgcolor="#ffffff">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        </table></td>
  </tr>
  <tr>
    </tr>
    <tr>
    <td align="center" style="font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #3e8963;"><unsubscribe style="font-size:9px; color:#ffffff;">Unsubscribe</unsubscribe></td>
  </tr>
  <tr>
    <td align="center" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #585858;">&nbsp;</td>
  </tr>
  </table>
</body>

A email developer obsessed with gym, coding, design, music, and other things he doesn't understand. Twitter - http://twitter.com/#!/stephenho1mes

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free