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, 3 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, 3 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

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