Hello,

We saw on the Samsung s8+ using Android 7 that a large space appears after each table. It looks as though the height of the first table stretches to be the height of the screen. The tables after that each have a space after them that is the color of the light gray background. We did not find this issue on any other mobile device. Below is part of the code as well as an approximate screenshot (I do not have the device on me).

Any suggestions on how to fix this?

Thank you.

Screenshot:
Screenshot

Code:


  <!doctype html>
  <html>
  <head>
  <title>Lorem Ipsum</title>
  <link rel="shortcut icon" href="test.ico" />
  <meta name="viewport" content="width=device-width">
  <style type="text/css">
  /* CLIENT-SPECIFIC STYLES */
  #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
  .ReadMsgBody{width:100%;} .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 */
  body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
  table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
  img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */

  /* RESET STYLES */
  body{margin:0; padding:0;}
  img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
  body{height:100% !important; margin:0; padding:0; width:100% !important;}

  /* iOS BLUE LINKS */
  .appleBody a {color:#68440a; text-decoration: none;}
  .appleBodyWhite a {color:#fff; text-decoration: none;}
  .appleFooter a {color:#777777; text-decoration: none;}
  .appleFooterDark a {color:#333; text-decoration: none;}
  .appleBodyBlue a {color:#33acdb; text-decoration: none;}

  /*<![CDATA[*/ span.preheader { display: none !important; } .appleLinksGrey a{ color: #777; text-decoration:none; } .appleLinksGrey2 a{ color: #777; text-decoration:none; } /*]]>*/

  /* ALLOWS FOR FLUID TABLES */
  @media screen and (max-width: 544px){

  a[class~="mobile-button"]{
  width:80% !important;
  padding: 20px;
  border: 0 !important;
  }

  *[class~="center"]{
  text-align: center !important;
  }

  *[class~="width-90"]{
  width:95% !important;
  max-width:95% !important;
  }

  }
  </style>
  </head>

  <body style="margin: 0; padding: 0;">
      <span class="preheader" style="display:none !important;">Lorem Ipsum</span>
      <center>
          <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="background-color: #eeefef;">
              <tr>
                  <td align="center" height="100%" valign="top" width="100%">
                  <!--[if mso]>
                  <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                  <tr>
                  <td align="center" valign="top" width="600">
                  <![endif]-->
                      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
                          <tr>
                              <td align="center" valign="top" style="padding: 20px 0 20px 0;">
                                  <a href="#" target="_blank" style="text-decoration: none;color:#194d99;"><img alt="Lorem Ipsum" src="test.png" width="230" height="35" style="display: block; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; color: #194d99; font-size: 24px;" border="0"></a>
                              </td>
                          </tr>
                      </table>
                  <!--[if mso]>
                  </td>
                  </tr>
                  </table>
                  <![endif]-->
                  </td>
              </tr>
          </table>
          <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="background-color: #eeefef;">
              <tr>
                  <td align="center" height="100%" valign="top" width="100%">
                  <!--[if mso]>
                  <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                  <tr>
                  <td align="center" valign="top" width="600">
                  <![endif]-->
                      <div style="display:inline-block; max-width:600px; vertical-align:top; width:100%;">
                          <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px; background-color: #e26734;-webkit-border-top-left-radius: 3px;-webkit-border-top-right-radius: 3px;-moz-border-radius-topleft: 3px;-moz-border-radius-topright: 3px;border-top-left-radius: 3px;border-top-right-radius: 3px;">
                              <tr>
                                  <td align="center" valign="top" style="padding: 40px 10px 0px 10px;background-color: #e26734;-webkit-border-top-left-radius: 3px;-webkit-border-top-right-radius: 3px;-moz-border-radius-topleft: 3px;-moz-border-radius-topright: 3px;border-top-left-radius: 3px;border-top-right-radius: 3px;">
                                  <!--[if mso]>
                                  <table align="center" border="0" cellspacing="0" cellpadding="0" width="530">
                                  <tr>
                                  <td align="center" valign="top" width="530">
                                  <![endif]-->
                                  <div style="display:inline-block; max-width:530px; vertical-align:top; width:100%;">
                                      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:530px;">
                                          <tr>
                                              <td align="center" valign="top" style="padding: 0 20px 0 20px">
                                                  <div style="font-size: 27px; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; color: #ffffff;"><a href="#" target="_blank" style="color: #ffffff; text-decoration: none;"><b>Lorem ipsum dolor sit amet</b></a></div>
                                              </td>
                                          </tr>
                                      </table>
                                  </div>
                                  <!--[if mso]>
                                  </td>
                                  </tr>
                                  </table>
                                  <![endif]-->
                                  </td>
                              </tr>
                              <tr>
                                  <td align="center" valign="top" style="padding: 20px 0 40px 0;background-color: #e26734;">
                                  <!--[if mso]>
                                  <table align="center" border="0" cellspacing="0" cellpadding="0" width="530">
                                  <tr>
                                  <td align="left" valign="top" width="250">
                                  <![endif]-->
                                      <div style="display:inline-block; max-width:260px; vertical-align:top; width:100%;">
                                          <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:250px;">
                                              <tr>
                                                  <td align="left" valign="top" style="padding: 10px 10px 20px 10px;">
                                                      <div style="color: #ffffff; font-size: 16px; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; line-height: 24px;" class="center">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem.</div>

                                                      <br>

                                                      <a class="mobile-button" href="#" target="_blank" style="background-color:#f4b24a; border-top:15px solid #f4b24a; border-right:25px solid #f4b24a; border-bottom:15px solid #f4b24a; border-left:25px solid #f4b24a; border-radius:3px; color:#ffffff; display:inline-block; font-size: 16px; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; text-align:center; text-decoration:none;">Lorem Ipsum</a>
                                                  </td>
                                              </tr>
                                          </table>
                                      </div>
                                      <!--[if mso]>
                                      </td>
                                      <td align="left" valign="top" width="228">
                                      <![endif]-->
                                      <div style="display:inline-block; max-width:228px; vertical-align:top; width:100%;" class=" width-90">
                                          <table align="center"  border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:228px;" class="width-90">
                                              <tr>
                                                  <td align="center" valign="top" style="padding:0px 10px 0px 10px;">
                                                      <a href="#" target="_blank" style="color: #ffffff; text-decoration: none;"><img src="test.png" height="" width="" border="0" alt="Lorem Ipsum" style="display: block; height: auto !important; max-width:100%;font-family: Helvetica Neue, Helvetica, Arial, sans-serif; color: #ffffff; font-size: 18px;"></a>
                                                  </td>
                                              </tr>
                                          </table>
                                      </div>
                                  <!--[if mso]>
                                  </td>
                                  </tr>
                                  </table>
                                  <![endif]-->
                                  </td>
                              </tr>                 
                          </table>
                      </div>
                  <!--[if mso]>
                  </td>
                  </tr>
                  </table>
                  <![endif]-->
                  </td>
              </tr>
          </table>
      </center>
  </body>

  </html>