Troubleshooting text alignment in Gmail app for Android versions prior to 13

Other Questions Gmail
1

I’m stumped by a formatting issue in the Gmail app for Android. The problem affects versions before Android 13. Here’s what’s going on:

In Android 13, the text looks fine. But in older versions, like Android 8, the text is shifted up. It’s as if the app is ignoring padding, line-height, or something else.

I’ve tried to fix it by adding margin-top and line-height to the CSS, but no luck. The weird part is that it looks good in other email clients. It’s just Gmail acting up.

Here’s a simplified version of the HTML structure I’m using:

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td width="30%" align="left">
      <img width="30" src="icon.png" />
    </td>
    <td width="70%" align="left" style="font-size: 14px; padding: 15px;">
      <font face="arial" color="#333">
        Sample text here
      </font>
    </td>
  </tr>
</table>

Any ideas on how to make this work consistently across different Android versions in Gmail? It’s not a major issue, but it’s bugging me.

2

hey emma, have u tried using viewport units instead of pixels? somethin like vh or vw might help. also, check if ur using any web fonts - they can mess with alignment on older androids. maybe stick to system fonts for better compatibility? just a thought!

3

I’ve encountered similar alignment issues with Gmail on older Android versions. One workaround that’s worked for me is using padding on the parent table cell instead of the inner elements. Try moving your padding to the that contains both the image and text, like this:

<td style="padding: 15px;">
  <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td width="30%" align="left">
        <img width="30" src="icon.png" />
      </td>
      <td width="70%" align="left" style="font-size: 14px;">
        <font face="arial" color="#333">
          Sample text here
        </font>
      </td>
    </tr>
  </table>
</td>

This approach tends to be more consistently interpreted across different Android versions. Also, consider using inline CSS for critical styles to ensure they’re not stripped out by email clients.

4

I’ve dealt with this exact issue in my work as an email developer. One trick that’s worked wonders for me is using vertical-align on the table cells. Try adding vertical-align: middle; to both your image and text cells. This often fixes weird alignment issues across different Android versions.

Another thing to consider is setting a specific line-height on your text. Sometimes the default line-height can vary between devices. I usually go with something like line-height: 1.4; for readability.

Lastly, have you tried using a nested table for your content? Sometimes wrapping your content in another table cell can help maintain consistent spacing. It’s a bit of extra markup, but it’s saved my bacon more than once when dealing with finicky email clients.

Remember, email rendering is always a bit of a dark art. What works in one scenario might not in another, so don’t be afraid to experiment!