Menu icon Foundation
Ink - Android emails not resizing

We're encountered a rendering error on Android 4 devices using the default mail client. The emails aren't resizing to fit the screen. When you open the email you'll have significant horizontal scrolling or you're forced to zoom out.

We were using Email On Acid to test our email. This problem wouldn't occur on either the Android 2.3 or Android 4 tests, but it would show up when we tested on a physical device.

At first I thought there was an issue with my code. I tried removing various sections of my email to isolate the issue but the problem persisted.

I finally tried sending one of the INK templates to see if it was responsive on our andorid devices, it wasn't. I downloaded the Hero-Sidebar template, ran it through the Ink Inliner and I got the same issue. I've attached a screenshot that was taken on a Galaxy S 3.

Ink template screenshot

email

We're encountered a rendering error on Android 4 devices using the default mail client. The emails aren't resizing to fit the screen. When you open the email you'll have significant horizontal scrolling or you're forced to zoom out.

We were using Email On Acid to test our email. This problem wouldn't occur on either the Android 2.3 or Android 4 tests, but it would show up when we tested on a physical device.

At first I thought there was an issue with my code. I tried removing various sections of my email to isolate the issue but the problem persisted.

I finally tried sending one of the INK templates to see if it was responsive on our andorid devices, it wasn't. I downloaded the Hero-Sidebar template, ran it through the Ink Inliner and I got the same issue. I've attached a screenshot that was taken on a Galaxy S 3.

Ink template screenshot
Raziel over 3 years ago

I've noticed that after inlining a template with the zurb ink inliner, it moves the internal style sheet from the head to the body . Try to move back the internal style sheet in the head, it may solve the problem.

Aaron Ransley over 3 years ago

I'm encountering the same issues. A simple .row > .wrapper > .six.columns (x2) setup is not flowing properly, and continues to display side-by-side on Android 4.4 devices.

I have tested with the Android SDK / emulator, as well as with Litmus.

I've also tried using a basic example from the Zurb Ink template pack and am having the same issues.

Is Android 4.4 no longer supported?

Raziel over 3 years ago

Yes there is a problem with some versions of android, including Android 4.4, the display:block and float:left for the td doesn't work because the Doctype gets stripped.
Try then to use "th" instead of "td", but make sure to close the "th" tags and make sure to override the font-weight and align for "th", cause by default it's bold and center.

Justin Schier about 3 years ago

Hello, any updates to this? I'm still experiencing this with the latest Zurb Foundation for Emails as of today, September 15, 2016.

Geir Kristian Thunem almost 3 years ago

I am also experiencing this "feature". Running latest SASS (gulp) version.

Would very much like a fix for this - else we might need to change our setup to a different framework.

Raziel almost 3 years ago

For me it works perfectly. Try maybe to rename the sections with two or more columns from "td" to "th" maybe after you inline your template. If it doesn't work can you send me your code to see what's wrong.

Geir Kristian Thunem almost 3 years ago

Tried changing to th yesterday, with no result. Sendt you a mail with my source.

Thank you Raziel, for helping me out! :)

Brian Maier Jr. over 2 years ago

I'm new to using the framework but I'm having the same issue. Emulators work but actual devices do not... Did you happen to find a solution?

Geir Kristian Thunem over 2 years ago

Unfortunately, no.

I've debugged a lot of different possible reasons, and got a lot of help from Raziel.

my debugging stopped at trying new mailers, after trying out various markup alternatives, and changing various mail headers with no result.

Please let me know if you find some answers ;)