This question appears to be off-topic. The users who voted to close gave this specific reason:

"Questions about general computing hardware and software are off-topic for Stack Overflow unless they directly involve tools used primarily for programming. You may be able to get help on Super User." – Scott Barta, GrIsHu, SKRocks, ling.s, Shankar Damodaran

2 Answers
2

Gmail can render emails quite well if you program them properly. Your HTML look fairly well formed. So I don't see that you should have much trouble getting this to render correctly.

A couple notes:

Android Gmail app does not have full support of @media queries. If your email isn't 'responding' properly on Android Gmail that is the reason.

In order to make sure you don't get spacing issues around images your images should always have style="display:block". And if your image is sitting in a table cell make sure you add style=font-size: 1px; line-height: 1px;" on the table cell. This will ensure that email clients don't render and extra spacing above and below images (I usually see this in Outlook, but I've come across it in Gmail too).

The problem with adding font-size:1px is the alt text will be too small when images are hidden at first. Though I already tried adding the font-size and line-height as well. I wonder if this is really a GMAIL app problem or something wrong with the code.
–
Tux DictumstJan 30 '14 at 16:14

I've never had a problem with the gap. Providing you have margin: 0; border: 0; padding: 0; display:block; in your image CSS and it sits alone in a <td>, you don't need all the font and line height stuff.
–
JohnJan 30 '14 at 17:26

Even with margin: 0; border: 0; padding: 0; display:block; I've noticed problems. And if we want to be picky: font-size: 1px; line-height: 1px; is less code than all the margin stuff on all images. :P This technique usually works for me. If you're concerned with how your alt tags will look if images don't show, you can apply the css styling on the actual image.
–
Darryl VosJan 31 '14 at 14:13

^ You should avoid setting font-size to less than 5px because SpamAssassin sees that style as an identifier of spammy content. Gmail mobile's problem is that it has a default line-height of 16px on table cells. Set the line-height lower (but not <5px) on the <td> of whatever content is breaking the layout.