Hello everybody,

I'm new here, just to test an email I've designed based on a template I grabbed (I'm no expert in coding, just learning). Seems to work pretty well in almost every device/browser except for:

-Gmail app for android: I have the classical problem, an element with align="left" in the 2 columns layout (desktop) doesn't appear to be centered in the 1 column responsive layout.

I'll drop here the code so as everyone can see it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" shrink-to-fit="no"/>
      <title>Plans de pensions de Cr&egrave;dit Andorr&agrave;</title>

      <style type="text/css">
         /* Client-specific Styles */
         div, p, a, li, td { -webkit-text-size-adjust:none; }
         #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
         html{width: 100%; }
         body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
         /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
         .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */

         .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. */

         #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}

         img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}

         a img {border:none;}

         .image_fix {display:block;}

         p {margin: 0px 0px !important;}

         table td {border-collapse: collapse;}

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

         a {color: #33b9ff;text-decoration: none;text-decoration:none!important;}





         /*STYLES*/
         table[class=full] { width: 100%; clear: both; }

         /*IPAD STYLES*/
         @media only screen and (max-width: 640px) {
         a[href^="tel"], a[href^="sms"] {
         text-decoration: none;
         color: #c3cd2a; /* or whatever your want */
         pointer-events: none;
         cursor: default;
         }

         body {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}

          div, p, a, li, td { -webkit-text-size-adjust:none; }

         .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
         text-decoration: default;
         color: #c3cd2a !important;
         pointer-events: auto;
         cursor: default;
         }
         table[class=devicewidth] {width: 440px!important;text-align:center!important;}
         table[class=devicewidthinner] {width: 420px!important;text-align:center!important;}
         img[class=banner] {width: 440px!important;height:220px!important;}
         img[class=col2img] {width: 440px!important;height:220px!important;}


         }
         /*IPHONE STYLES*/
         @media only screen and (max-width: 480px) {
         a[href^="tel"], a[href^="sms"] {
         text-decoration: none;
         color: #c3cd2a; /* or whatever your want */
         pointer-events: none;
         cursor: default;
         align-content: center;
         }


         .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
         text-decoration: default;
         color: #c3cd2a !important; 
         pointer-events: auto;
         cursor: default;
         align-content: center;
         }
         table[class=devicewidth] {width: 250px!important;text-align:center!important;}
         table[class=devicewidthinner] {width: 250px!important;text-align:center!important;}
         img[class=banner] {width: 260px!important;height:140px!important; text-align:center !important}
         img[class=col2img] {width: 260px!important;height:140px!important; text-align:center !important}


         }
      </style>
   </head>
   <body>
<!-- Start of preheader -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="preheader" >
   <tbody>
      <tr>
         <td>
            <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
               <tbody>
                  <tr>
                     <td width="100%">
                        <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                           <tbody>
                               <!-- spacing -->
                                          <tr>
                                             <td width="100%" height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                          </tr>
                                          <!-- End of spacing -->
                              <tr>
                                 <td width="100%" align="left" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 15px;color: #666; text-align:center" st-content="preheader">
                                    Publicitat. Si no pots veure correctament aquest missatge, <span style="text-decoration:underline"><a style="color: #666; font-weight: bold">visita la versi&oacute; web.</a></span>
                                 </td>
                              </tr>
                                <!-- spacing -->
                                          <tr>
                                             <td width="100%" height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                          </tr>
                                          <!-- End of spacing -->
                           </tbody>
                        </table>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>
<!-- End of preheader -->      

<!-- Start of seperator -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0"  st-sortable="seperator">
   <tbody>
      <tr>
         <td>
            <table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth">
               <tbody>
                  <tr>
                     <td align="center" height="0" style="font-size:1px; line-height:1px;"></td>

                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>
<!-- End of seperator --> 
<!-- start of header -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0"  st-sortable="full-text">
   <tbody>
      <tr>
         <td>
            <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
               <tbody>
                  <tr>
                     <td width="100%">
                        <table bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                           <tbody>

                              <tr bgcolor="#c3cd2a" height="60">
                                <td width="217"><span class="imgpop"><a target="_blank" href="#"><img src="cabecera3.jpg" alt="" border="0" height="37" width="217" style="display:block; border:none; outline:none; text-decoration:none;"/></a></span></td>
                                <td style="font-family:Arial, Helvetica, sans-serif; font-size:16px; text-align:right; color:#ffffff; font-weight: bold; padding-right:15px"> Plans de pensions

                                 </td>
                              </tr>
                              <tr>
                                 <td colspan="2">


                                    <table width="560" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidthinner">
                                       <tbody>



                                          <!-- Title -->
                                          <tr>
                                            <td height="25px">
                                            </td>
                                          </tr>

                                          <tr>
                                             <td style="font-family: Helvetica, arial, sans-serif; font-size: 34px; font-weight:bold; color: #000000; text-align:center; line-height: 38px;">
                                                El temps passa m&eacute;s de pressa del que creus

                                             </td>
                                          </tr>
                                          <!-- End of Title -->
                                          <!-- spacing -->
                                          <tr>
                                             <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                          </tr>
                                          <!-- End of spacing -->

                                       </tbody>
                                    </table>
                                 </td>
                              </tr>
                              <!-- Spacing -->
                              <tr>
                                 <td height="20" colspan="2" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly; background-color:#fff">&nbsp;</td>
                              </tr>
                              <!-- Spacing -->
                           </tbody>
                        </table>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>
<!-- End of Full Text -->




<!-- Start of Left Image -->      
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="left-image">
   <tbody>
      <tr>
         <td>
            <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
               <tbody>
                  <tr>
                     <td width="100%">
                        <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                           <tbody>
                              <tr>
                                 <td>
                                    <!-- Start of left column -->
                                    <table width="280" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth" >
                                       <tbody>
                                          <!-- image -->
                                          <tr>

                                             <td width="280" height="140" align="center" class="devicewidth" style="width:100%!important; min-width: 100%">
                                                <img src="principal_foto.jpg" width="280" height="140" alt="" border="0"  style="display:block; border:none; outline:none; text-decoration:none; text-align: center; font-size: 0px" class="col2img">
                                             </td>
                                          </tr>
                                          <!-- /image -->
                                       </tbody>
                                    </table>
                                    <!-- end of left column -->
                                    <!-- spacing for mobile devices-->
                                    <table align="left" border="0" cellpadding="0" cellspacing="0" class="mobilespacing">
                                       <tbody>
                                          <tr>
                                             <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                          </tr>
                                       </tbody>
                                    </table>
                                    <!-- end of for mobile devices-->
                                    <!-- start of right column -->
                                    <table width="280" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
                                       <tbody>
                                          <tr>
                                             <td>
                                                <table width="280" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
                                                   <tbody>

                                                      <!-- Spacing -->
                                                      <tr>
                                                         <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                      </tr>
                                                      <!-- /Spacing -->
                                                      <!-- content -->
                                                      <tr>
                                                          <td style="font-family: Helvetica, arial, sans-serif; font-size: 19px; color: #666; text-align:left; line-height: 26px">
                                &bull; Aportacions a  partir de 1.000&euro;
                                 <br/>&bull; Extraordinaria o inicial
                                 <br/>&bull; Nom&eacute;s fins el 31/01/3015<br/>

                                                         </td>
                                                      </tr>
                                                      <!-- end of content -->
                                                      <!-- Spacing -->
                                                      <tr>
                                                         <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                      </tr>
                                                      <!-- /Spacing -->
                                                     <!-- START CENTERED BUTTON -->
<tr><td>                                                   
<center>
  <table width="100%">
    <tr>
      <td>
        <table border="0" cellpadding="0" cellspacing="0"> 
          <tr>
            <td height="2" width="100%" style="font-size: 2px; line-height: 2px;">&nbsp;

            </td>
          </tr>
        </table>
        <table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
          <tbody>
          <tr>
            <td align="center">
              <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                <tr>
                  <td align="center" bgcolor="#c3cd2a" width="150">
                    <a href="http://www.example.com" style="padding: 10px;width:200px;display: block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 17px;font-family: Arial, Helvetica, sans-serif;color: #ffffff;background: #c3cd2a;line-height:17px;" class="button_link"><img src="calculadora.jpg" alt="" width="18" height="18" />
                      M&eacute;s informaci&oacute;
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          </tbody>
        </table>
        <table border="0" cellpadding="0" cellspacing="0"> 
          <tr>
            <td height="2" width="100%" style="font-size: 2px; line-height: 2px;">&nbsp;

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

      </td>
    </tr>
  </table>
</center>
</td></tr>
<!-- END CENTERED BUTTON -->
                                                   </tbody>
                                                </table>
                                             </td>
                                          </tr>
                                       </tbody>
                                    </table>
                                    <!-- end of right column -->
                                  </td>
                              </tr>
                           </tbody>
                        </table>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>
<!-- End of Left Image -->    
<!-- Start of seperator -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" st-sortable="seperator">
   <tbody>
      <tr>
         <td>
            <table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth">
               <tbody>
                  <tr>
                     <td align="center" height="30" style="font-size:1px; line-height:1px; background-color:#FFF">&nbsp;</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>
<!-- End of seperator --> 
<!-- start of Full text -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" st-sortable="full-text">
   <tbody>
      <tr>
         <td>

            <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" style="border: 2px #c3cd2a dashed ">
               <tbody>
                  <tr>
                     <td width="100%">


                        <table bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">


                           <tbody>

                              <tr>
                                 <td>
                                    <table width="560" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidthinner">
                                       <tbody>




                                          <!-- content -->
                                          <tr>

                                             <td style="font-family: Helvetica, arial, sans-serif; font-size: 19px; color: #666; text-align:left; line-height: 24px; padding-right:10px; padding-left:10px">

                                             <br/>
                                                El futur &eacute;s tant important com el passat i el present. Per aix&ograve;, ara &eacute;s el moment de comen&ccedil;ar a planificar el dem&agrave;.<br/><br/> 
                                                Si vols calcular la teva jubilaci&oacute; abans de accedir als regals exclusius, prova el nou simulador online de jubilaci&oacute;.<br/><br/> 
                                                Perqu&egrave; el temps passa m&eacute;s de pressa del que creus, pensa en la teva jubilaci&oacute;, pensa en els nostres plans.<br/><br/>


                                             </td>
                                          </tr>
                                           <!-- START CENTERED BUTTON -->
<tr><td>                                                   
<center>
  <table width="100%">
    <tr>
      <td>
        <table border="0" cellpadding="0" cellspacing="0"> 
          <tr>
            <td height="2" width="100%" style="font-size: 2px; line-height: 2px;">&nbsp;

            </td>
          </tr>
        </table>
        <table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
          <tbody>
          <tr>
            <td align="center">
              <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                <tr>
                  <td align="center" bgcolor="#c3cd2a" width="150">
                    <a href="http://www.example.com" style="padding: 10px;width:200px;display: block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 17px;font-family: Arial, Helvetica, sans-serif;color: #ffffff;background: #c3cd2a;line-height:17px;" class="button_link"><img src="calculadora.jpg" alt="" width="18" height="18" />
                      Simula la teva pensi&oacute;
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          </tbody>
        </table>
        <table border="0" cellpadding="0" cellspacing="0"> 
          <tr>
            <td height="2" width="100%" style="font-size: 2px; line-height: 2px;">&nbsp;

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

      </td>
    </tr>
  </table>
</center>
</td></tr>
<!-- END CENTERED BUTTON -->



                                                      <!-- Spacing -->
                                                      <tr>
                                                         <td width="100%" height="32px" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
                                                      </tr>
                                                      <!-- /Spacing -->

                                          <!-- End of content -->


                           </tbody>
                        </table>

<!-- End of Full Text -->


                                    <!-- spacing for mobile devices-->
                                    <table align="left" border="0" cellpadding="0" cellspacing="0" class="mobilespacing">
                                       <tbody>
                                          <tr>
                                             <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                          </tr>
                                       </tbody>
                                    </table>
                                    <!-- end of for mobile devices-->


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



                     </td>
                  </tr>

               </tbody>






</table> 
<!-- End of Right Image -->








            <table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth" style="background-color:#FFF">
               <tbody>
               <!-- Spacing -->

                              <tr>
                                 <td width="600" height="50" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly; background-color:#fff">&nbsp;</td>
                              </tr>

                              <!-- Spacing -->

                       <tr>
                    <td>
                     <!--inici icones-->
                                          <table bgcolor="#FFFFFF" align="right" cellpadding="0" cellspacing="0" style="box-shadow: 0 5px 15px 0 rgba(200, 200, 200, 0.7) ;
-moz-box-shadow:0 5px 15px 0 rgba(200, 200, 200, 0.7) ;
-webkit-box-shadow:0 5px 15px 0 rgba(200, 200, 200, 0.7) ;
-khtml-box-shadow:0 5px 15spx 0 rgba(200, 200, 200, 0.7) ;">
                                              <tbody style=" z-index:1">
                                            <tr><td height="10" colspan="6"></td></tr>
                                              <tr>
                                                <td width="15"></td>
                                                <td width="60" style="border-right:#5e5e5e 1px solid; text-align:center" ><img src="linkedin.jpg" width="35" alt="" height="35" /></td>
                                                <td width="60" style="border-right:#5e5e5e 1px solid; text-align:center"><img src="pinterest.jpg" width="35" alt="" height="35" /></td>
                                                <td width="60" style="border-right:#5e5e5e 1px solid; text-align:center"><img src="facebook.jpg" width="35" alt="" height="35" /></td>
                                                <td width="60" style="text-align:center"><img src="youtube.jpg" width="35" alt="" height="35" /> </td>
                                                <td width="15px"></td>
                                            </tr>
                                            <tr><td height="10" colspan="6"></td></tr>
                                            </tbody>
                                            </table>
                                          <!--fi de icones-->


                    </td>
                    </tr>

                   <!-- content -->


                                          <!--inici legal-->
                                          <tr>
                                             <td  bgcolor="#CCCCCC" style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #ffffff; text-align:left; line-height: 16px; padding-left:25px; padding-right:25px">
                                            <br/> Consultar les bases legals.�Li recordem que
Cr&egrave;dit Andorr&agrave;  mai no li demanar&agrave;, per correu electr&ograve;nic ni en formularis, dades confidencials com ara contrasenyes o n&uacute;meros secrets.<br/><br/> �
                                             </td>
                                             </tr>
                                             <!--fi del legal-->
                                             <tr>
                                                 <td height="25px">&nbsp;</td>
                                             </tr>

                                          <!-- End of content -->
               </tbody>
            </table>




<!-- Start of Postfooter -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0"  st-sortable="postfooter" >
   <tbody>
      <tr>
         <td>
            <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
               <tbody>


                  <tr>
                     <td align="center" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 15px;color: #666" st-content="preheader">
                        Si no vol tornar a rebre aquest e-mail <span style="text-decoration: underline;font-weight:bold"><a href="#" style="color: #666">cliqui aqu&iacute; </a></span> 
                     </td>
                  </tr>
                  <!-- Spacing -->
                  <tr>
                     <td width="100%" height="20"></td>
                  </tr>
                  <!-- Spacing -->

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

<!-- End of postfooter -->      
   </body>
   </html>

Thanks everybody! Any help will be super appreciated!!