CODEWITHSUNDEEP
androidhtmlcsshtml-tablehtml-email
Adam
Adam

Reputation: 1383

Table row on Android 6 is not taking 100% width

I have the code below used in an html email and it's working as expected in all email clients, except Android 6.0 Gmail! the blue contact us button is not taking 100% of the width.

Any thoughts?

First screenshot shows how it looks like on real device, while the second one is from litmus which is not correct, but this is what I'm trying to make look like.

Check screenshot here

This is how Litmus show but in reality its not

The code: 

.cta {
  text-align: left;
  vertical-align: middle;
}

@media only screen and (max-width:414px) {
  .mobile {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
<tr>
  <td>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#00a5c9; font-weight: normal;">
      <tr>
        <td class="cta" style="text-align: left; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; padding: 10px; color: #FFFFFF; vertical-align: top; line-height: normal !important;">
          <a style="text-align: left; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">CONTACT US</a>
        </td>
        <td style="text-align: left; color: #FFFFFF; font-weight: 700;"><img src="http://via.placeholder.com/25/0f0" /></td>
      </tr>
    </table>
  </td>
</tr>
</table>

Upvotes: 0

Views: 1335

Answers (3)

gj-wes
gj-wes

Reputation: 932

A good way around this is the force Android 5.1 & 6.0 to display the desktop version of your email. The code snippet below needs a 600x1 transparent png to act as a full width spacer. This spacer will be hidden on all mobile clients that support media queries and allow the mobile view to render.

  <tr style="line-height: 1px; mso-line-height-rule: exactly;" class="mobilehide">
    <td align="center" style="min-width:600px;font-size:1px; line-height: 1px; mso-line-height-rule: exactly;">
      <img src="images/android-spacer.png" alt="" width="600" height="1" style="display: block;" border="0">
    </td>
  </tr>

This should be added before the closing tag of your outermost table (last one before the closing body)

        </td>
      </tr>
    <!-- add here -->
    </table>
  </body>
</html>

Upvotes: 2

gwally
gwally

Reputation: 3527

Certain versions of Android and Gmail do not use media queries.

This is why the blue contact button only takes up 1/3 of the Android screen, but it takes up 100% of the screen on IOS devices. IOS will respect the media query and Android will use the width="33%" from the table:

<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">

Since you will not post the rest of your code as expected on Stack Overflow, I cannot offer a suggestion for a workaround because I'm not sure what you're trying to do. At least you now know why it isn't working.

Good luck.

Upvotes: 0

Dmitry Khotinskiy
Dmitry Khotinskiy

Reputation: 63

Instead of using width: 100%;, try using width: 100vw;

Upvotes: 0

Related Questions