Hi all,

I was recently been made aware that Android 6.0 version doesn’t center align the body content, but instead left-aligns it creating space/gap on the right. All Litmus test renders show fine and as intended but when I open a test email on my Android 6.0 device, using ‘Mail’ app, there’s a gap on the right.

I have tried various tricks to fix this and to center it, but nothing’s seems to be working. The best I came up with was removing 'margin: 0 !important;’ from the body styles, however this breaks the Android 4.4 layout. The template, well the Lorem version, is attached here.

Any help / suggestions would be greatly appreciated!

Thank you :-)



<!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=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style type="text/css">
.ReadMsgBody {
    width: 100%;
    background-color: #FFFFFF;
}
.ExternalClass {
    width: 100%;
    background-color: #FFFFFF;
}
body {
    width: 100%;
    background-color: #cccccc;
    margin: 0 !important;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    font-family: Arial, Helvetica, sans-serif;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
td {
    padding: 0;
}
img {
    border: 0;
}
div[style*="margin: 16px 0px"] {
    margin: 0 !important;
}
.wrapper {
    width: 100%;
    table-layout: fixed;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
.webkit {
    max-width: 600px;
    margin: 0 auto;
}
.outer {
    Margin: 0 auto;
    width: 100%;
    max-width: 600px;
}
.full-width-image img {
    width: 100%;
    max-width: 600px;
    height: auto;
}
.logo-image img {
    width: 80%;
    max-width: 350px;
    height: auto;
}
.inner {
    padding: 10px;
}
p {
    Margin: 0;
}
.two-column {
    text-align: center;
    font-size: 0;
}
.two-column .column {
    width: 100%;
    max-width: 300px;
    display: inline-block;
    vertical-align: top;
}
.two-column p {
    Margin: 0px;
}
.contents {
    width: 100%;
}
.two-column .contents {
    font-size: 14px;
    text-align: left;
}
.two-column img {
    width: 100%;
    max-width: 280px;
    height: auto;
}
.two-column .text {
    padding-top: 10px;
}
.disable-link {
    pointer-events: none;
    cursor: default;
}
/* Re-style iPhone automatic links (eg. phone numbers) */
.appleBodyBlackTxt a {
    color: #000000 !important;
    text-decoration: none;
}
.appleBodyWhiteTxt a {
    color: #ffffff !important;
    text-decoration: none;
}
.appleBodyBlueTxt a {
    color: #012248 !important;
    text-decoration: none;
}
.appleBodyRedTxt a {
    color: #790030 !important;
    text-decoration: none;
}
.appleFooter a {
    color: #000000 !important;
    text-decoration: none;
}

@media only screen and (max-width: 640px) {
.two-column .column {
    max-width: 90% !important;
}
.two-column img {
    max-width: 100% !important;
}
.deviceWidth {
    width: 440px !important;
    padding: 0;
}
.center {
    text-align: center !important;
}
.hideonmobile {
    display: none !important;
} /*hide on mobile*/
.heightauto {
    height: auto !important;
}
.disable-link {
    pointer-events: auto !important;
    cursor: auto !important;
}
.paddingLeft0 {
    padding-left: 0px !important;
}
.paddingLeft10 {
    padding-left: 10px !important;
}
.paddingLeft20 {
    padding-left: 20px !important;
}
.paddingRight0 {
    padding-right: 0px !important;
}
.paddingRight10 {
    padding-right: 10px !important;
}
.paddingRight20 {
    padding-right: 20px !important;
}
}

@media only screen and (max-width: 479px) {
.deviceWidth {
    width: 280px !important;
    padding: 0;
}
.center {
    text-align: center !important;
}
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
</style>
<![endif]-->
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center class="wrapper" style="width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
 <div class="webkit" style="max-width: 600px; margin: 0px auto;"> 
  <!--[if (gte mso 9)|(IE)]><table width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0; font-family: Arial, Helvetica, sans-serif; color: #000000;"><tr><td align="center" valign="top" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px;"><![endif]-->
  <table class="outer" align="center" border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0; Margin: 0px auto 0px auto; width: 100%; max-width: 600px;">
   <!--view in browser-->
   <tr>
    <td valign="top" class="one-column" style="padding: 0px 0px 0px 0px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0;">
      <tr>
       <td valign="top" bgcolor="#ffffff" class="inner" style="padding: 0px 0px 0px 0px; width: 100%; text-align: left;"><table width="100%" border="0" cellpadding="0" cellspacing="0">
         <tr>
          <td valign="top" style="padding: 20px 40px 20px 40px; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 15px; color: #000000; font-weight: normal; text-align: center; vertical-align: top;"><a href="#" target="_blank" style="color: #000000; text-decoration: none;">View in web browser</a></td>
         </tr>
        </table></td>
      </tr>
     </table></td>
   </tr>
   <!--//end view in browser--> 

   <!--module 1-->
   <tr>
    <td valign="top" class="one-column" style="padding: 0px 0px 0px 0px; font-size: 0px; line-height: 0px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0;" bgcolor="#7eb4c1">
      <tr>
       <td align="center" valign="top" class="inner" style="padding: 20px 0px 0px 0px; width: 100%; font-size: 0px; line-height: 0px;"><table width="100%" border="0" cellpadding="0" cellspacing="0">
         <!--1-->
         <tr>
          <td align="center" valign="top" class="logo-image" style="padding: 0px 0px 20px 0px;"><a href="#" target="_blank"><img src="_img/logo.png" width="350" alt=""/></a></td>
         </tr>
         <!--1//end --> 

         <!--2-->
         <tr>
          <td valign="top" class="two-column" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px; text-align: center;font-size: 0;"><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0; font-family: Arial, Helvetica, sans-serif; color: #000000;"><tr><td width="50%" valign="top" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px;"><![endif]-->

           <div class="column" style="width: 100%; max-width: 300px; display: inline-block; vertical-align: top;">
            <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="border-spacing: 0;">
             <tr>
              <td align="center" valign="top" class="inner" style="padding-top: 0px; padding-bottom: 10px; padding-right: 0px; padding-left: 0px;"><table border="0" align="center" cellpadding="0" cellspacing="0" class="contents" style="border-spacing: 0;">
                <tr>
                 <td align="center" valign="top" class="text" style="padding: 0px 0px 5px 0px; font-family: Arial, Helvetica, sans-serif; width: 100%; font-size: 24px; line-height: 30px; color: #ffffff; font-weight: normal; text-align: center;"><a href="#" class="disable-link" title="Call" style="font-family: Arial, Helvetica, sans-serif; font-size: 24px; line-height: 30px; color: #ffffff; font-weight: normal; text-align: center; text-decoration: none;">XXX XXXX XXX</a></td>
                </tr>
               </table></td>
             </tr>
            </table>
           </div>

           <!--[if (gte mso 9)|(IE)]></td><td width="50%" valign="top" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px;"><![endif]-->

           <div class="column hideonmobile" style="width: 100%; max-width: 300px; display: inline-block; vertical-align: top;">
            <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="border-spacing: 0;">
             <tr>
              <td align="center" valign="top" class="inner" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px;"><table class="contents" border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0;">
                <tr>
                 <td align="center" valign="top" class="text" style="padding: 0px 0px 20px 0px;"><table width="240" align="center" border="0" cellpadding="0" cellspacing="0">
                   <tr>
                    <td valign="top" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px;"><a href="#" target="_blank"><img src="_img/i-facebook.png" width="30" alt="facebook" style="border-width: 0; width: 30px; max-width: 30px; height: auto;" /></a></td>
                    <td valign="top" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px;"><a href="#" target="_blank"><img src="_img/i-twitter.png" width="30" alt="twitter" style="border-width: 0; width: 30px; max-width: 30px; height: auto;" /></a></td>
                    <td valign="top" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px;"><a href="#" target="_blank"><img src="_img/i-youtube.png" width="30" alt="youtube" style="border-width: 0; width: 30px; max-width: 30px; height: auto;" /></a></td>
                    <td valign="top" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px;"><a href="#" target="_blank"><img src="_img/i-google.png" width="30" alt="google plus" style="border-width: 0; width: 30px; max-width: 30px; height: auto;" /></a></td>
                    <td valign="top" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px;"><a href="#" target="_blank"><img src="_img/i-pinterest.png" width="30" alt="pinterest" style="border-width: 0; width: 30px; max-width: 30px; height: auto;" /></a></td>
                    <td valign="top" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px;"><a href="#" target="_blank"><img src="_img/i-blog.png" width="30" alt="blog" style="border-width: 0; width: 30px; max-width: 30px; height: auto;" /></a></td>
                   </tr>
                  </table></td>
                </tr>
               </table></td>
             </tr>
            </table>
           </div>

           <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
         </tr>
         <!--//end 2--> 

         <!--3-->
         <tr>
          <td valign="top" class="" style="padding: 0px 0px 0px 0px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0;">
            <tr>
             <td valign="top" class="inner" style="padding: 0px 8px 20px 8px; width: 100%; text-align: left;"><table width="100%" border="0" cellpadding="0" cellspacing="0">
               <tr>
                <td valign="top" style="padding: 0px 0px 0px 0px; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 20px; color: #ffffff; font-weight: normal; text-align: center;"><span style="white-space:nowrap;"><a href="#" title="link 1" target="_blank" style="text-decoration: none; color: #001b45;">link 1</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" title="link 2" target="_blank" style="text-decoration: none; color: #001b45;">link 2</a>&nbsp;&nbsp;|&nbsp;&nbsp;</span> <span style="white-space:nowrap;"><a href="#" title="link 3" target="_blank" style="text-decoration: none; color: #001b45;">link 3</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" title="link 4" target="_blank" style="text-decoration: none; color: #001b45;">link 4</a>&nbsp;&nbsp;|&nbsp;&nbsp;</span> <span style="white-space:nowrap;"><a href="#" title="link 5" target="_blank" style="text-decoration: none; color: #001b45;">link 5</a></span></td>
               </tr>
              </table></td>
            </tr>
           </table></td>
         </tr>
         <!--//end 3-->
        </table></td>
      </tr>
     </table></td>
   </tr>
   <!--//end module 1--> 

   <!--hero module 2-->
   <tr>
    <td width="600" valign="top" bgcolor="#7eb4c1" class="full-width-image" style="padding: 0px 0px 0px 0px; font-size: 0px; line-height: 0px;"><a href="#" target="_blank"><img src="_img/hero_image.jpg" width="600" alt="" /></a></td>
   </tr>
   <!--//end module 2--> 

   <!--module 3-->
   <tr>
    <td valign="top" class="one-column" style="padding: 0px 0px 0px 0px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0;">
      <tr>
       <td valign="top" bgcolor="#012248" class="inner" style="padding: 0px 0px 0px 0px; width: 100%; text-align: left;"><table width="100%" border="0" cellpadding="0" cellspacing="0">
         <tr>
          <td valign="top" class="paddingLeft20 paddingRight20" style="padding: 20px 40px 20px 40px; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 26px; color: #ffffff; font-weight: normal; text-align: center; vertical-align: top;"><strong>Lorem ipsum</strong><br />
           <span style="font-size: 15px; font-weight: normal;">Sed ut perspiciatis unde omnis iste natus error</span></td>
         </tr>
        </table></td>
      </tr>
     </table></td>
   </tr>
   <!--//end module 3--> 

   <!--module 4-->
   <tr>
    <td valign="top" class="one-column" style="padding: 0px 0px 0px 0px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0;">
      <tr>
       <td valign="top" bgcolor="#ffffff" class="inner" style="padding: 0px 0px 0px 0px; width: 100%; text-align: left;"><table width="100%" border="0" cellpadding="0" cellspacing="0">
         <tr>
          <td valign="top" class="paddingLeft20 paddingRight20" style="padding: 30px 40px 20px 40px; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 23px; color: #012248; font-weight: bold; text-align: center; vertical-align: top;">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius.</td>
         </tr>
        </table></td>
      </tr>
     </table></td>
   </tr>
   <!--//end module 4--> 

   <!--module 5-->
   <tr>
    <td align="center" valign="top" class="text" style="padding: 0px 0px 40px 0px;"  bgcolor="#ffffff"><table width="85%" align="center" border="0" cellpadding="0" cellspacing="0">
      <tr>
       <td style="padding: 10px 20px 10px 20px; background-color: #790030; background-repeat: repeat-x;" align="center"><a href="#" title="Find out more" target="_blank" style="font-family: Arial, sans-serif; font-size: 16px; color: #ffffff; font-weight: bold; text-align: center; text-decoration: none; -webkit-text-size-adjust: none;">Lorem <img src="_img/arrow_12_white.gif" width="10" height="10" alt="arrow"/></a></td>
      </tr>
     </table></td>
   </tr>
   <!--//end module 5--> 

   <!--module 6-->
   <tr>
    <td valign="top" class="one-column" style="padding: 0px 0px 0px 0px;" bgcolor="#e2e1dc"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="border-spacing: 0;">
      <tr>
       <td valign="top" class="inner" style="padding: 0px 0px 0px 0px; width: 100%; text-align: left;"><table width="100%" border="0" cellpadding="0" cellspacing="0">
         <tr>
          <td valign="top" class="paddingLeft20 paddingRight20" style="padding: 30px 40px 30px 40px; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 23px; color: #414042; font-weight: normal; text-align: center; vertical-align: top;"><span
           style="color: #012248; font-size: 18px; font-weight: bold;">Lorem</span><br />
           Neque porro quisquam est</td>
         </tr>
        </table></td>
      </tr>
     </table></td>
   </tr>
   <!--//end module 6--> 

   <!--module 7-->
   <tr>
    <td valign="top" class="one-column" style="padding: 0px 0px 0px 0px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0;">
      <tr>
       <td valign="top" bgcolor="#ffffff" class="inner" style="padding: 0px 0px 0px 0px; width: 100%; text-align: left;"><table width="100%" border="0" cellpadding="0" cellspacing="0">
         <tr>
          <td valign="top" class="paddingLeft20 paddingRight20" style="padding: 30px 40px 30px 40px; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 23px; color: #414042; font-weight: normal; text-align: center; vertical-align: top;"><strong><span style="font-size: 18px; color: #790030;">Lorem ipsum dolor sit amet</span></strong><br />
           Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient.</td>
         </tr>
        </table></td>
      </tr>
     </table></td>
   </tr>
   <!--//end module 7--> 

   <!--module 8-->
   <tr>
    <td valign="top" class="one-column" style="padding: 0px 0px 0px 0px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0;" bgcolor="#7eb4c1">
      <!--1-->
      <tr>
       <td valign="top" class="inner" style="padding: 0px 0px 0px 0px; width: 100%; text-align: left;"><table width="100%" border="0" cellpadding="0" cellspacing="0">
         <tr>
          <td valign="top" style="padding: 20px 0px 10px 0px; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 22px; line-height: 26px; color: #ffffff; font-weight: normal; text-align: center;">Lorem <a href="#" class="disable-link" title="" style="color: #ffffff; text-decoration: none; font-weight: bold;">XXXX XXXX XXX</a></td>
         </tr>
         <tr>
          <td height="17" valign="top" style="padding: 0px 30px 15px 30px; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 17px; color: #012248; font-weight: normal; text-align: center;"><span class="appleBodyBlueTxt">Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</span></td>
         </tr>
        </table></td>
      </tr>
      <!--//end 1--> 

      <!--2-->
      <tr>
       <td valign="top" class="one-column" style="padding: 0px 0px 0px 0px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0;">
         <tr>
          <td valign="top" class="inner" style="padding: 0px 30px 20px 30px; width: 100%; text-align: left;"><table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
             <td valign="top" style="padding: 0px 0px 20px 0px; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 15px; color: #000000; font-weight: normal; text-align: left;"><span class="appleFooter"><strong>T&amp;Cs:</strong> Lorem ipsum</span></td>
            </tr>
           </table></td>
         </tr>
        </table></td>
      </tr>
      <!--//end 2-->
     </table></td>
   </tr>
   <!--//end module 8--> 

   <!--module 9-->
   <tr>
    <td valign="top" class="one-column" style="padding: 0px 0px 0px 0px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0;">
      <tr>
       <td valign="top" bgcolor="#ffffff" class="inner" style="padding: 0px 0px 0px 0px; width: 100%; text-align: left;"><table width="100%" border="0" cellpadding="0" cellspacing="0">
         <tr>
          <td valign="top" style="padding: 10px 20px 20px 20px; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 15px; color: #000000; font-weight: normal; text-align: center; vertical-align: top;"><a href="#" target="_blank" style="color: #000000; text-decoration: none;">Terms &amp; Conditions</a> | <a href="#" target="_blank" style="color: #000000; text-decoration: none;">Privacy Policy</a> | <a href="#ß" target="_blank" style="color: #000000; text-decoration: none;">Unsubscribe</a></td>
         </tr>
        </table></td>
      </tr>
     </table></td>
   </tr>
   <!--//end module 9-->

  </table>
 </div>
</center>
</body>
</html>