Responsive emails on Gmail app (Android) - rem and heights

Question

I'm building a responsive email template which should work in all web clients and devices. I had to use rem font-size so that will be readable in cellphones. I did pixels and em versions but none of them gave me the look that I need. However, using rem is making my line-height not working as intended, or better saying: it works well in all except on gmail app.

I brought part of the code to this link: http://jsbin.com/kunowo/1/edit so you can take a look of what I'm expecting to have.

The "Error" or struggle comes when I open the email, the height between the two lines of text is way bigger. For example, instead of 4 pixels between lines, there are like 12 pixels.

Has anyone of you encountered this before? I spent time looking for previous posts but they deal with other issues not related to rems or heights. Thanks in advance.

Answer 1

Responsive doesn't work in Gmail. Here is the list of unsupported email clients. Also, line-height renders inconsistently across email clients, with Gmail being a major culprit.

You could get around this by putting some CSS in the style tag to offset the non-Gmail clients (as Gmail can not see the style tag), but it may cause some other clients that also ignore the style tag to become offset themselves.

Sorry to be the bearer of bad news...