Hi,

Currently working on a confirmation email and seems to be working correctly in every client bar gmail. Its displaying the table at full width rather than at 590 like the rest of the email. I'm using max and min widths as well so really stuck.

15-06-2017 13-07-04.png


 <style>
@media screen and (max-device-width: 410px), screen and (max-width: 410px) {
span#img1 img{height:100px; width:100px; float:left; margin-left:-40px; margin-top:-20px; margin-right:10px;
                content:url("http://linkspt.eurotunnel.com/custloads/558198920/md_955903.jpg") !important;

            } 
span#img2 img{height:100px; width:100px; float:left; margin-left:-40px; margin-top:-20px; margin-right:10px;
                content:url("http://linkspt.eurotunnel.com/custloads/558198920/md_955979.jpg") !important;
}

  span#img3 {height:100px; width:100px; float:left; margin-left:-40px; margin-top:-20px; margin-right:10px;
                content:url("http://linkspt.eurotunnel.com/custloads/558198920/md_955902.jpg") !important;
}}

</style>

<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#efefef" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;">
  <tr>
    <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 10px 0; font-size: 0;" colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-size: 0px; width: 10px;" width="10">&nbsp;</td>
    <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;">

          <tr>
            <td align="center" valign="top" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-size: 0;">
              <!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="520">
<tr>
<td align="left" valign="top" width="170">
<![endif]-->
              <div style="display:inline-block; max-width:33.3333%; min-width:180px; vertical-align:top; width:100%;">
                <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; max-width: 180px; border-collapse: collapse !important;">

                    <tr>
 <td align="center" valign="top" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0 10px;"><font face="'Open Sans', Helvetica, sans-serif" style="font-size: 14px; font-weight: 400;">                        <div style="border: 1px solid #eeeeee;">
                       <span id="img1"> <a href="https://www.eurotunnel.com/uk/tickets/types/frequent-traveller/" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #6597CF;">
                            <img src="http://linkspt.eurotunnel.com/custloads/558198920/md_955903.jpg" width="108" style="-ms-interpolation-mode: bicubic; height: auto; line-height: 100%; outline: none; text-decoration: none; display: block; border: 0px;" class="vce-image">
                         </a></span>
                          <h3 style="font-size: 14px; font-weight: normal; margin: 0 0 8px 0;"><span style="font-family: 'Open Sans', Helvetica, sans-serif;">Accounts valid for 1 year</span></h3>
                          <table border="0" cellspacing="0" cellpadding="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;">

                              <tr>
                                <td align="center" bgcolor="#efefef" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-size: 0; line-height: 0;" height="10">&nbsp;</td>
                              </tr>


                          </table>
                        </div>
                      </font></td>
                    </tr>

                </table>
                <table width="100%" border="0" cellspacing="0" cellpadding="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;">
                  <tr>
                    <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 10px 0; font-size: 0;">&nbsp;</td>
                  </tr>
                </table>
              </div>
              <!--[if (gte mso 9)|(IE)]>
</td>
<td width="10" style="font-size: 1px;">&nbsp;</td>
<td align="left" valign="top" width="170">
<![endif]-->
              <div style="display:inline-block; max-width:33.3333%; min-width:180px; vertical-align:top; width:100%;">
                <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; max-width: 180px; border-collapse: collapse !important;">

                    <tr>
 <td align="center" valign="top" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0 10px;"><font face="'Open Sans', Helvetica, sans-serif" style="font-size: 14px; font-weight: 400;">                        <div style="border: 1px solid #eeeeee;">
                       <span id="img2">  <a href="https://www.eurotunnel.com/uk/tickets/types/frequent-traveller/" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #6597CF;">
                            <img src="http://linkspt.eurotunnel.com/custloads/558198920/md_955979.jpg" width="108" style="-ms-interpolation-mode: bicubic; height: auto; line-height: 100%; outline: none; text-decoration: none; display: block; border: 0px;" class="vce-image">
                         </a></span>
                          <h3 style="font-size: 14px; font-weight: normal; margin: 0 0 8px 0;"><span style="font-family: 'Open Sans', Helvetica, sans-serif;">All-in-One Insurance + Breakdown</span></h3>
                          <table border="0" cellspacing="0" cellpadding="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;">

                              <tr>
                                <td align="center" bgcolor="#efefef" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-size: 0; line-height: 0;" height="10">&nbsp;</td>
                              </tr>


                          </table>
                        </div>
                      </font></td>
                    </tr>

                </table>
                <table width="100%" border="0" cellspacing="0" cellpadding="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;">
                  <tr>
                    <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 10px 0; font-size: 0;">&nbsp;</td>
                  </tr>
                </table>
              </div>
              <!--[if (gte mso 9)|(IE)]>
</td>
<td width="10" style="font-size: 1px;">&nbsp;</td>
<td align="left" valign="top" width="170">
<![endif]-->
              <div style="display:inline-block; max-width:33.3333%; min-width:180px; vertical-align:top; width:100%;">
                <table align="right" border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; max-width: 180px; float: right; border-collapse: collapse !important;">

                    <tr>
                      <td align="center" valign="top" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0 10px;"><font face="'Open Sans', Helvetica, sans-serif" style="font-size: 14px; font-weight: 400;">
                        <div style="border: 1px solid #eeeeee;"><span id="img3">
                         <a href="https://www.eurotunnel.com/uk/tickets/types/frequent-traveller/" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #6597CF;">
                            <img src="http://linkspt.eurotunnel.com/custloads/558198920/md_955902.jpg" width="108" style="-ms-interpolation-mode: bicubic; height: auto; line-height: 100%; outline: none; text-decoration: none; display: block; border: 0px;" class="vce-image">
                          </a></span>
                          <h3 style="font-size: 14px; font-weight: normal; margin: 0 0 8px 0;"><span style="font-family: 'Open Sans', Helvetica, sans-serif;">Sanef tolling for stress-free tolls</span></h3>
                          <table border="0" cellspacing="0" cellpadding="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;">

                              <tr>
                                <td align="center" bgcolor="#efefef" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-size: 0; line-height: 0;" height="10">&nbsp;</td>
                              </tr>


                          </table>
                        </div>
                      </font></td>
                    </tr>

                </table>
                <table width="100%" border="0" cellspacing="0" cellpadding="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;">
                  <tr>
                    <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 10px 0; font-size: 0;">&nbsp;</td>
                  </tr>
                </table>
              </div>
              <!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
            </td>
          </tr>

      </table>
    </td>
    <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-size: 0px; width: 10px;" width="10">&nbsp;</td>
  </tr>
</table>


<table width="100%" border="0" cellspacing="0" bgcolor="#efefef" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;">
  <tr>
    <td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
      <table border="0" cellspacing="0" cellpadding="10" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;">
        <tr>
          <td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"><a href="https://www.facebook.com/EurotunnelLeShuttle?rf=163316523681060" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #6597CF; text-decoration: none; font-size: 0;"><img src="http://linkops.eurotunnel.com/templates/eurotunnel_ops1en/img/fb1.jpg" width="45" alt="Facebook" style="-ms-interpolation-mode: bicubic; height: auto; line-height: 100%; outline: none; text-decoration: none; display: block; border: 0px;"></a></td>

 <td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"><a href="https://twitter.com/leshuttle" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #6597CF; text-decoration: none; font-size: 0;"><img src="http://linkops.eurotunnel.com/templates/eurotunnel_ops1en/img/twitter1.jpg" width="45" alt="Twitter" style="-ms-interpolation-mode: bicubic; height: auto; line-height: 100%; outline: none; text-decoration: none; display: block; border: 0px;"></a></td>

 <td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"><a href="https://www.youtube.com/user/EurotunnelLeShuttle" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #6597CF; text-decoration: none; font-size: 0;"><img src="http://linkops.eurotunnel.com/templates/eurotunnel_ops1en/img/youtube1.jpg" width="45" alt="YouTube" style="-ms-interpolation-mode: bicubic; height: auto; line-height: 100%; outline: none; text-decoration: none; display: block; border: 0px;"></a></td>

  <td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"><a href="http://www.eurotunnel.com/uk/blog/" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #6597CF; text-decoration: none; font-size: 0;"><img src="http://linkops.eurotunnel.com/templates/eurotunnel_ops1en/img/blog1.jpg" width="45" alt="Blog" style="-ms-interpolation-mode: bicubic; height: auto; line-height: 100%; outline: none; text-decoration: none; display: block; border: 0px;"></a></td>
        </tr>
      </table> 

Any help is greatly appreciated