XG0
Responsive Email Not Centered in Gmail for Android
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èdit Andorrà</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;"> </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ó web.</a></span>
</td>
</tr>
<!-- spacing -->
<tr>
<td width="100%" height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </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é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;"> </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"> </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;"> </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;"> </td>
</tr>
<!-- /Spacing -->
<!-- content -->
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 19px; color: #666; text-align:left; line-height: 26px">
• Aportacions a partir de 1.000€
<br/>• Extraordinaria o inicial
<br/>• Nomé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;"> </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;">
</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és informació
</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;">
</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"> </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 és tant important com el passat i el present. Per això, ara és el moment de començar a planificar el demà.<br/><br/>
Si vols calcular la teva jubilació abans de accedir als regals exclusius, prova el nou simulador online de jubilació.<br/><br/>
Perquè el temps passa més de pressa del que creus, pensa en la teva jubilació, 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;">
</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ó
</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;">
</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;"> </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"> </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èdit Andorrà mai no li demanarà, per correu electrònic ni en formularis, dades confidencials com ara contrasenyes o números secrets.<br/><br/> �
</td>
</tr>
<!--fi del legal-->
<tr>
<td height="25px"> </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í </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!!
Hi Xavier!
Did you end up finding a fix for this issue? I am currently feeling the pain that is Gmail App for Android
Cheers,
-Bobby
Unfortunately the Gmail Android app doesn't support media queries so it will go back to the desktop variant (although gmail's smartphone apps like to also do their own thing to try and improve the code (extremely unhelpfully)). The only way around this really is to put a fix at the bottom of the email so it forces the email to display the desktop variant on the gmail app (both iOS and Android).
That fix can be found here - https://litmus.com/community/code/274-force-gmail-app-to-render-desktop-version
Thanks Edward for your answer, but this was not what i was looking for. I've customised a litmus bulletproof template, and the only problem I've got is gmail for android (a very common problem, i see). I don't want to trigger the desktop version, I want the element floating:left in the 2-column desktop layout to be centered in the 1-column responsive layout.
Thanks a lot, I will keeep searching for an answer!