HTML email tips and tricks for Android

1. How to prevent text from wrapping within the viewport on Android?

Android wraps text to improve readability.

If the text string's box element parent is set to align: right or centre, the text will not wrap within it. It should be noted that <font> and <span> are not considered box elements. Instead, you would add the alignment to the <td>, <div>, or <p> that contains it.

Another workaround is to set the box element parent's line-height to a value equal to or less than the font-size within the container.

2. How to write CSS that will only render on Android?

Yes. In your embedded CSS, you can use media queries.

As an example:

The Gmail app does not support media queries.

3. How to resize images to better fit on Android?

Try the code below to resize the image on mobile.

1) To the image element, apply the display:block style.

4. How to fix left side padding on Android?

This is something that Android 4.4 has a nasty habit of doing. Simply add the following CSS to your head section to fix it:

5. How to fix enlarged fonts on Android?

To control the font adjustment in Android on a global scale, try adding the following to your embedded CSS:

Alternatively, you can control text on a case-by-case basis by incorporating the following inline CSS: