Insert Responsive HTML as gmail signature

Question

I've created a html responsive email signature and would like to set it up to use in Gmail. I've found a few articles online on how to do this, but it doesn't render it as responsive. Please see the code below as the screen minimizes the image changes.

I've followed this link: https://www.youtube.com/watch?v=CejHfSH9zhY but all I get is the desktop version of the gmail link. When I email from a mobile I want the mobile version of the signature displayed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="x-apple-disable-message-reformatting">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans">
    <style type="text/css">
      body {
        font-family:'Open Sans';
      }
      
      p {
        margin:0;
      }
      
      @media only screen and (max-width: 600px) {
        .emailImageDesktop {
          display:none;
        }
        
        .dividerDesktop {
          display:none;
        }
        
        #mainStructure {
          max-width:100% !important;
          min-width:320px;
        }
        
        .deviceWidth {
          width:100% !important;
          float:left;
        }
        
        .noPadding {
          padding-left:0 !important;
          padding-right:0 !important;
        }
        
        .pb20 {
          padding-bottom:20px;
        }
        
        .disclaimerText {
          max-width:390px !important;
        }
      }
      
      @media only screen and (max-width: 502px) {
        .emailImageDesktop {
          display:none;
        }
        
        .dividerDesktop {
          display:none;
        }
        
        #mainStructure {
          max-width:100% !important;
          min-width:320px !important;
        }
        
        .deviceWidth {
          width:100% !important;
          float:left;
        }
        
        .noPadding {
          padding-left:0 !important;
          padding-right:0 !important;
        }
        
        .pb20 {
          padding-bottom:20px;
        }
        
        .disclaimerText {
          max-width:390px;
        }
      }
      
      @media only screen and (max-width: 320px) {
        .emailImageDesktop {
          display:none;
        }
        
        .dividerDesktop {
          display:none;
        }
        
        #mainStructure {
          max-width:100% !important;
          min-width:320px !important;
        }
        
        .deviceWidth {
          width:100% !important;
          float:left;
        }
        
        .noPadding {
          padding-left:0 !important;
          padding-right:0 !important;
        }
        
        .pb20 {
          padding-bottom:20px;
        }
        
        .disclaimerText {
          max-width:320px !important;
        }
      }
      
      @media only screen and (min-width: 601px) {
        .emailImageMobile {
          display:none;
        }
        
        .dividerMobile {
          display:none;
        }
      }
      
      @media only screen and (max-width: 480px) {
        table#canspamBar td {
          font-size:14px !important;
        }
        
        table#canspamBar td a {
          display:block !important;
          margin-top:10px !important;
        }
      }
    </style>
  </head>
  <body>
    <table id="mainStructure" style="max-width:930px;" width="100%" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td class="deviceWidth" width="342">
          <table cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td style="padding-right:30px;padding-bottom:30px;">
                <p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">Dominic Colenso</span>
              </p>
              <br>
              <p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">M</span> <span style="font-size: 10pt; color: #152c46;"><a href="tel:07813925938" style="text-decoration:none;color:#152c46;">+44 (0)7813 925 938</a></span>
            </p>
            <p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">T</span> <span style="font-size: 10pt; color: #152c46;"> <a href="tel:03330504036" style="text-decoration:none;color:#152c46;">+44 (0)3330 50 40 36</a></span>
          </p>
          <p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">E</span> <span style="font-size: 10pt; color: #152c46;">  <a href="mailto:dominic@inflow.global" style="text-decoration:none;color:#152c46;">dominic@inflow.global</a></span>
        </p>
        <p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">W</span> <span style="font-size: 10pt; color: #152c46;"><a href="https://www.inflow.global" target="_blank" style="text-decoration:none;color:#152c46;">https://www.inflow.global</a></span>
      </p>
    </td>
    <td valign="middle">
      <img src="https://www.pepperdogdesign.co.uk/images/inflow%20logo_2x.png" width="136" height="104" alt="In Flow Logo">
    </td>
  </tr>
</table>
</td>
<td width="6" class="deviceWidth noPadding pb20" align="left" style="padding-left:20px;padding-right:20px;">
<img src="https://www.pepperdogdesign.co.uk/images/divider%20desktop_2x.png" class="dividerDesktop" alt="divider%20desktop_2x.png"><img src="https://www.pepperdogdesign.co.uk/images/divider%20mobile_2x.png" class="dividerMobile" alt="divider%20mobile_2x.png">
</td>
<td class="deviceWidth pb20">
<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="padding-right:20px;">
      <span style="color: #36a9e1; font-size: 10pt;">Follow me:</span>
      <br><a href="https://twitter.com/dominiccolenso" target="_blank"><img src="https://www.pepperdogdesign.co.uk/images/twitter_2x.png" style="padding-right: 5px; border: 0;" alt="Twitter"></a><a href="https://www.linkedin.com/in/dominiccolenso/" target="_blank"><img src="https://www.pepperdogdesign.co.uk/images/linked%20in_2x.png" alt="LinkedIn" style="border: 0;"></a>
    </td>
    <td>
      <img src="https://www.pepperdogdesign.co.uk/images/dominic_2x.png" alt="Dominic Colenso">
    </td>
  </tr>
</table>
</td>
</tr>
<tr>
<td class="deviceWidth" style="padding-bottom:20px;" colspan="3">
<a href="http://www.thebookaboutimpact.com/launch" target="_blank"><img src="https://www.pepperdogdesign.co.uk/images/banner%20desktop_2x.png" style="border: 0; max-width: 930px;" width="930" height="202" class="emailImageDesktop" alt="In Flow Banner"></a>
<a href="http://www.thebookaboutimpact.com/launch" target="_blank"><img src="https://www.pepperdogdesign.co.uk/images/banner%20mobile_2x.png" style="border: 0; max-width: 100%;" width="390" height="398" class="emailImageMobile" alt="In Flow Banner"></a>
</td>
</tr>
<tr>
<td class="disclaimerText" style="color:#8995a2;font-size:9pt;font-weight:bold;" colspan="3">
In Flow Training Limited is registered in England and Wales with registered Number: 09111119, having its registered office at 2 Forest Farm Business Park, Fulford, York, YO19 4RH. If you are not the intended recipient of this email, please notify the sender as soon as possible, delete it from your systems and do not disclose its contents to anyone else.
</td>
</tr>
</table>
<center>
<br>
<br>
<br>
<br>
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF;border-top:1px solid #E5E5E5;">
<tr>
<td align="center" valign="top" style="padding-top:20px;padding-bottom:20px;">
  <table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
    <tr>
      <td align="center" valign="top" style="color:#606060;font-family:Helvetica, Arial, sans-serif;font-size:11px;line-height:150%;padding-right:20px;padding-bottom:5px;padding-left:20px;text-align:center;">
        This email was sent to <a href="mailto:*|EMAIL|*" target="_blank" style="color:#404040 !important;">*|EMAIL|*</a>
        <br><a href="*|ABOUT_LIST|*" target="_blank" style="color:#404040 !important;"><em>why did I get this?</em></a>    <a href="*|UNSUB|*" style="color:#404040 !important;">unsubscribe from this list</a>    <a href="*|UPDATE_PROFILE|*" style="color:#404040 !important;">update subscription preferences</a>
        <br>*|LIST:ADDRESSLINE|*
        <br>
        <br>*|REWARDS|*
      </td>
    </tr>
  </table>
</td>
</tr>
</table>
</center>
</body>
</html>

Any ideas on how to do this?

Thanks in advance.

Gmail is very strict with spaces in media queries. Remove the space after the colon and before the pixel value. Here is a working Gmail code that was tested a few days ago: https://stackoverflow.com/questions/49701247/how-do-i-write-a-media-query-for-gmail — Syfer, Jul 10 '19 at 08:03
@Syfer - thanks for the feedback. I've just tried testing your code in the link you provided. However, it's not working when I view in gmail app. I've got the correct version you specified it should work on. Thanks — Robert, Jul 11 '19 at 09:46
What are you using to send? Is it creating spaces after colons? — Syfer, Jul 11 '19 at 09:53

Insert Responsive HTML as gmail signature

0 Answers0