Hello fellow email designers, I had posted this question before but still cant solve it.

basically I know that Gmail recently accepted media queries. I am in the process of building a responsive email and gmail is displaying it like this:

http://pasteboard.co/iWhizsjk0.png

As you can see the anchor link goes past the banner in mobile - why is this? CTRL+F to anchormobile_en to find it quick

I appreciate any help on this.


<!DOCTYPE html>
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no"> <!-- remove telephone hyperlink -->

    <title>test</title>


      <style type="text/css">
      img { border: 0 none; -ms-interpolation-mode: bicubic; display: block; }
           table td { border-collapse:collapse; }
          body { width: 100% !important; margin:0px; padding:0px;  }
          .ReadMsgBody{width:100%; }
          .ExternalClass{
    width:100%; line-height: 100%; 
}

 table {
border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}         





       @media only screen and (max-width: 480px){
           table[class="chassis"] {width:100% !important}

           .testblock { display:block !important} 
           .testinline { vertical-align:top; padding-top:10px; display:inline-block !important}
           img[class="kimg"] { width:100% !important; height:auto !important;}
           .hide{display:none !important}

           .picpadding{padding:15px !important;}

           /* If you need more images - create a new class */

           .sideimage1{width:70px !important; height:auto !important}
           .sideimage2{width:70px !important; height:auto !important}
           .sideimage3{width:70px !important; height:auto !important}
            .mobileimage{width:50% !important; height:auto !important}
           span[class="mobileshowanchor"], span[class="mobileshowanchor"] img { display:inline !important; }
           td[class="paddingtop10"]{padding-top:10px;}

           .bluebar { width:18px !important;} 
             table[class="sidetablebody"]{}

       }







      </style>
  </head>
  <body>


      <!--ENGLISH EMAIL-->
      <table width="100%" bgcolor="#ffffff" align="center" cellpadding="0" border="0" cellspacing="0">
       <tr>   
         <td valign="top" width="100%" align="center"> 

           <table align="center" class="chassis" width="600px" style="width:600px;" cellpadding="0" border="0" cellspacing="0">
       <!--PREHEADER
               <tr>
            <td align="center" style="color: #000000; line-height: 20px; padding-top: 5px; padding-bottom: 5px; font-family: Arial; font-size: 9.5pt; mso-line-height-rule: exactly;">
            <strong>Don't miss out!</strong> </td>
        </tr>-->  
               <tr> 
         <td> 


           <table class="chassis" cellpadding="0" border="0" cellspacing="0">
       <tr>   
         <td bgcolor="#00338d"> 


        <img alt="" width="36" class="hide" height="1" src="http://image.testemail.com/lib/ffcf14/m/1/spacer.gif" />



           </td>

           <td valign="top" class="kpadding"> 
          <table cellspacing="0" cellpadding="0" border="0">



             <!--IMAGE HEADER--> 
              <tr>
              <td>
                  <table width="100%" cellpadding="0" cellspacing="0" border="0">
                 <tr> 
                  <td>
       <img width="566" height="90" style="width:566px; height:90px" class="kimg"  border="0" mdid="f97fdfe9-c29d-444f-989d-9b805805dd76" alt="Newsletter-MediumBlue" title="Newsletter-MediumBlue" src="http://image.kpmgemail.com/lib/fe691570716d047c7016/m/4/jan0517_china2.jpg" />

                      <table width="100%" cellpadding="0" cellspacing="0"><tr><td align="right" style="padding-top:10px; padding-right:20px; line-height: 16px; font-family: Arial; font-size: 9.5pt; font-weight: normal;">
                      <a name="anchormobile_en" href="#anchormobile_fr"><b>Français</b></a>

                          </td> </tr> 
                      </table>

                     </td> 
                     </tr>
                  </table>


              </td>
              </tr>




         <!------MAIN BODY CONTENT-->     
               <tr>
              <td align="left" style="padding-top:15px; padding-left:20px; padding-right:20px;padding-bottom:20px">

       <table width="100%" cellspacing="0" cellpadding="0">           
     <tr>             
          <td valign="top" align="left" class="testblock"> 
           <table width="100%">   
              <tr>
                  <td align="left" style="line-height: 16px; font-family: Arial; font-size: 9.5pt; font-weight: normal;">

                     <!--MOBILE ANCHOR-->


                      <!-- END MOBILE ANCHOR-->


       <table width="100%" cellspacing="0" cellpadding="0">
           <tr>

               <td valign="top" class="paddingtop10" style="line-height: 16px; font-family: Arial; font-size: 9.5pt; font-weight: normal;">




                   <h1 style="margin:0px; padding-bottom:10px; color: #00338d; line-height: 45px; font-family: Arial; font-size: 26pt;">{[E-TITLE]}</h1>
                                                <table width="100%">
                                                    <tbody>
                                                        <tr>
                                                            <td align="left" valign="top" style="width: 15%;">
                                                            <p style="margin: 0px 0px 2px; padding: 0px; color: #0091da; line-height: 16px; font-family: Arial; font-size: 9pt; font-weight: normal;"><strong>Date:</strong> </p>
                                                            </td>
                                                            <td align="left" valign="top">
                                                            <p style="margin: 0px 0px 2px; padding: 0px; color: #0091da; line-height: 16px; font-family: Arial; font-size: 9pt; font-weight: normal;"><span style="color: #000000;">{[E-START DATE]}</span></p>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td align="left" valign="top">
                                                            <p style="margin: 2px 0px; padding: 0px; color: #0091da; line-height: 16px; font-family: Arial; font-size: 9pt; font-weight: normal;"><strong> Time:</strong> </p>
                                                            </td>
                                                            <td align="left" valign="top">
                                                            <p style="margin: 2px 0px; padding: 0px; color: #0091da; line-height: 16px; font-family: Arial; font-size: 9pt; font-weight: normal;"><span style="color: #000000;">{[E-START TIME]} - {[E-END TIME]}</span></p>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td align="left" valign="top">
                                                            <p style="margin: 2px 0px; padding: 0px; color: #0091da; line-height: 16px; font-family: Arial; font-size: 9pt; font-weight: normal;"><strong> Locatio&nbsp;n:</strong> </p>
                                                            </td>
                                                            <td align="left" valign="top">
                                                            <p style="margin: 2px 0px 15px; padding: 0px; color: #0091da; line-height: 16px; font-family: Arial; font-size: 9pt; font-weight: normal;"><span style="color: #000000;">{[E-ADDRESS]}&nbsp;</span></p>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>




           Lorem ipsum dolor sit amet, consectetur adipiscinag elit. Maecenas nec ligula mauris. Vestibulum congue finibus aliquam. Curabitur vitae laoreet urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sagittis euismod vestibulum. Aliquam eros elit, dignissim nec ultricies eget, tincidunt eu turpis. Aliquam molestie est odio, a eleifend nibh efficitur vel. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus at ultricies sapien. In nec viverra enim. Cras eget tincidunt tortor. Suspendisse varius dapibus risus non porttitor. Phasellus consectetur odio scelerisque tempus aliquam. Praesent velit risus, fringilla vel vulputate nec, laoreet eu nunc. Nunc vel hendrerit quam. Sed rutrum justo iaculis velit bibendum elementum.<br><br>
       <img alt="" width="300" class="mobileimage" height="100" src="http://image.testemail.com/lib/fe691570716d047c7016/m/4/jan0517_china2.jpg" />
                 <br><br>  


                   <a href="{[E-RSVP%20YES%20URL]}"><img alt="" width="111" height="32" src="https://custom.cvent.com/66C0FC65436D454680AE32F058BA1240/pix/d66e1654cddd4375a343af8254d632d4.jpg" /></a>


     <!--BUTTON-->              
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td style="padding-bottom: 15px; padding-top:15px">
            <table border="0" cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <td style="padding: 12px 18px; font-size: 13px; background-color: #00338d;">



                            <a style="color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 13px; text-decoration: none;" href="http://click.testemail.com/?qs=03e6c473e1df038be6a0c7479520ca738eaf51eeaf833b2d0655c724a3f148b8"><b>Register</b></a>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>               





               </td>
           </tr>
                      </table>
                  </td>
               </tr>

              </table>

         </td> 




         <td valign="top" class="hide" width="5%"><img alt="" src="http://image.testemail.com/lib/ffcf14/m/1/spacer.gif" height="1" width="30" /></td>




         <!--SIDEBAR CONTENT-->
         <td align="left" valign="top" class="testblock" style="line-height: 16px; font-family: Arial; font-size: 9pt; font-weight: normal;">


             <table class="sidetablebody" cellpadding="0" cellspacing="0">
             <tr>
                 <td valign="top">




                     <!--SIDE PIC/CONTENT BLOCK 1-->

         <table class="testinline" cellpadding="0" cellspacing="0">
           <tr>
           <td class="picpadding" style="padding-bottom:10px; line-height: 16px; font-family: Arial; font-size: 9.5pt; font-weight: normal;">    
                 <img class="sideimage1" alt="" width="100" height="126" src="https://custom.cvent.com/66C0FC65436D454680AE32F058BA1240/pix/eff1bb6b639f4555bcd180351e45a52f.jpg" />
               <b> Name</b><br>
               Content

               </td> 
             </tr>





      </table>


                     <!--SIDE PIC/CONTENT BLOCK 2-->

           <table class="testinline" cellpadding="0" cellspacing="0">
           <tr>
           <td class="picpadding" style="padding-bottom:10px; line-height: 16px; font-family: Arial; font-size: 9.5pt; font-weight: normal;">    
               <img class="sideimage2" alt="" width="100" height="126" src="https://custom.cvent.com/66C0FC65436D454680AE32F058BA1240/pix/eff1bb6b639f4555bcd180351e45a52f.jpg" />

                                                        <b> Name</b><br>
               Content

               </td> 
             </tr>





      </table> 

                <!--SIDE PIC/CONTENT BLOCK 3-->

             <table class="testinline" cellpadding="0" cellspacing="0">
           <tr>
           <td class="picpadding" style="padding-bottom:10px; line-height: 16px; font-family: Arial; font-size: 9.5pt; font-weight: normal;">    
                 <img class="sideimage3" alt="" width="100" height="126" src="https://custom.cvent.com/66C0FC65436D454680AE32F058BA1240/pix/eff1bb6b639f4555bcd180351e45a52f.jpg" />
                                                         <b> Name</b><br>
               Content

               </td> 
             </tr>





      </table> 





                 </td>
                 </tr>
             </table>




           </td>


          <!--END SIDEBAR CONTENT-->


           </tr>

      </table>

         </td>
           </tr>



              <!---SOCIAL MEDIA CONTENT-->
              <tr>
                                                <td align="left" valign="top" style="border-top-color: #747678; border-top-width: 1px; border-top-style: solid;">
                                                <table width="140" align="right" border="0" cellspacing="0" cellpadding="0">
                                                    <tbody>
                                                        <tr>
                                                            <td align="right" valign="top" colspan="4">
                                                            <p style="margin: 10px 0px 6px; padding: 0px; color: #747678; line-height: 14px; font-family: Arial; font-size: 9.5pt; font-style: normal; font-weight: normal;"><a href="http://www.test.ca/" style="color: #0563c1;" target="_blank">test.ca</a></p>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td><a href="http://www.linkedin.com/company/test-canada" target="_blank"><img width="28" height="28" style="border: 0px currentColor; border-image: none;" alt="LinkedIn" src="https://custom.cvent.com/66C0FC65436D454680AE32F058BA1240/pix/79649dee5f0444a5b0353ba29393b074.jpg" /></a></td>
                                                            <td><a href="https://twitter.com/test_Canada" target="_blank"><img width="28" height="28" style="border: 0px currentColor; border-image: none;" alt="Twitter" src="https://custom.cvent.com/66C0FC65436D454680AE32F058BA1240/pix/9799329ddd834fdda2cabeeb5ba6e85a.jpg" /></a></td>
                                                            <td><a href="http://www.youtube.com/user/testCanada" target="_blank"><img width="28" height="28" style="border: 0px currentColor; border-image: none;" alt="YouTube" src="https://custom.cvent.com/66C0FC65436D454680AE32F058BA1240/pix/0554ccc8cf9c4979b436ff54737449f0.jpg" /></a></td>
                                                            <td><a href="https://plus.google.com/+testCa/posts" target="_blank"><img width="28" height="28" style="border: 0px currentColor; border-image: none;" alt="Google Plus" src="https://custom.cvent.com/66C0FC65436D454680AE32F058BA1240/pix/6c3d62427e4d429c9fc9536611e0ffbc.jpg" /></a></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                </td>
                                            </tr>


        <!-- FOOTER CONTENT -->    

               <tr>
                                                <td class="kpadding" align="left" style="padding:10px 20px 15px;">

                                                    <!-- BEGIN FOOTER PASTE FROM HERE-->
                                              <p style="color: #747678; line-height: 8pt; font-family: Arial,sans-serif; font-size: 7.5pt;">
<a title="Contact Us" href="http://home.test.com/ca/en/home/misc/contact.html" alias="Contact Us" conversion="true">Contact Us</a>&nbsp;|&nbsp;<a href="http://pages.testemail.com/page.aspx?QS=2e4c31a3756cb940905a9c06f8dc58bbf70c42b484900bf7f6ceb3664674de13&e=%%emailaddr%%" target="_blank" rel="noreferrer">Manage my Subscriptions</a>&nbsp;|&nbsp;<a title="Unsubscribe" href="http://pages.testemail.com/page.aspx?QS=1550dccf35ce5f74c6c7835f80755d0afd82cf3017098bbdb28b24716688b5b1&e=%%emailaddr%%&lang=EN" target="_blank" rel="noreferrer" alias="Unsubscribe" conversion="undefined">Unsubscribe</a>&nbsp;|&nbsp;<a title="test in Canada Privacy Policy" href="http://home.test.com/ca/en/home/misc/privacy.html" alias="test in Canada Privacy Policy" conversion="true">test in Canada Privacy Policy</a>&nbsp;|&nbsp;<a title="test On-Line Privacy Policy" href="http://home.test.com/ca/en/home/misc/privacy.html" alias="test On-Line Privacy Policy" conversion="true">test On-Line Privacy Policy</a>&nbsp;|&nbsp;<a title="Legal" href="http://home.test.com/ca/en/home/misc/legal.html" alias="Legal" conversion="true">Legal</a> 
<br />
<br />
This email was sent to you by <a href="http://www.test.com/Ca/en/Pages/Associated-companies-and-partnerships.aspx" rel="noreferrer">test</a>. To sign up to receive other communications  from us (we have some informative publications that may be of interest to you),  or to stop receiving electronic messages sent by test, visit the <a href="http://pages.testemail.com/page.aspx?QS=2e4c31a3756cb940905a9c06f8dc58bbf70c42b484900bf7f6ceb3664674de13&e=%%emailaddr%%" target="_blank" rel="noreferrer" conversion="undefined">test Online Subscription Centre</a>.
<br />
<br />
At test we are passionate about earning your trust and building a long-term relationship through service excellence. This extends to our communications with you. 
<br />
<br />
Our lawyers have recommended that we provide certain disclaimer language with our messages.  Rather than including them here, we&rsquo;re drawing your attention to the following links where the full legal wording appears.
<br />
<br />
<a title="Disclaimer concerning confidential and privileged information/unintended recipient" href="http://home.test.com/ca/en/home/misc/disclaimer-confidential.html" alias="Disclaimer concerning confidential and privileged information/unintended recipient" conversion="true">Disclaimer concerning confidential and privileged  information/unintended recipient</a><br />
<a title="Disclaimer concerning tax advice" href="http://home.test.com/ca/en/home/misc/disclaimer-tax.html" alias="Disclaimer concerning tax advice" conversion="true">Disclaimer concerning tax advice</a>
<br />
<br />
&copy; 2017 test LLP, a Canadian limited liability partnership and a member firm of the test network of independent member firms affiliated with test International Cooperative (&quot;test International&quot;), a Swiss entity. All rights reserved. The test name and logo are registered trademarks or trademarks of test International.
</p>
                                                <!-- END FOOTER --></td>
                                            </tr>



               </table>
           </td>










          </tr>  
      </table>



           </td>
          </tr>  







      </table>



















           </td>
          </tr>  
      </table>