Search code examples
htmlcssemailzurb-foundationzurb-ink

Zurb Ink Responsive HTML email: increase line height on mobile devices

Using Zurb Ink ( http://foundation.zurb.com/emails/docs.html )

I have created a responsive layout for my email. For the mobile devices, particularly iPhones, I've been using -webkit-text-size-adjust: 150%; to increase the font size for ONLY mobile devices. However, the line-height does not adjust, and I'm left with bigger font sizes, as I wanted, but some vertical overlap, since the bigger fonts still have smaller line heights.

I tried to add this in my style tags:

@media only screen and (max-width: 480px) {
  .body {
    font-size: 16px !important; line-height: 38px;
  }
}

And then ran it through the zurb inliner ( http://foundation.zurb.com/emails/inliner.html )

But to no avail. Anyone have any idea how to increase line-heights for HTML emails in mobile only?

Solution

  • The line-height is likely defined in px. Change the line-height statements to use em units.

    For example, if you previously had a font-size of 16px and a line-height of 20px, you could change line-height to line-height: 1.25em. This would maintain the same line height as before, but scale with font size when you change it on mobile.