Trouble with responsive html email template

[busboy]

The following template looks fine when viewed in a web browser. It also looks great when viewed in Mac Mail. But when I view it using Mail on an iPhone, the top gray bar doesn't go all the way to the right like it does on the left. If I change the top header text from "Testimonial Match Alert", to something short like "Test", then the gray header bar will extend all the way to the right of the iPhone screen.

I've been working on this all day and can't figure out why it's only doing this on the iPhone. Does anyone have any helpful advice?

Thanks!


http://test.oil-testimonials.com/too...archMatch.html

[cheli]

Hey busboy,

Sorry I don't know why this is happening and I can't get it to replicate on my end (I don't have the same environments to play with either!). Am I right to assume you're making your CSS inline before testing? Because if not, that would be the first thing to try.

On an unrelated note, the contrast between the text colour of your connect/contact headings and the background behind is quite low - you might want to darken the grey to help with legibility.

[chris.upjohn]

The problem is the padding on the following element.

<div class="content">...</div>

Its extremely bad practise to use <div> elements in emails, instead you should strictly only use a table elements. Also padding does cause white-space issues in emails, you are better off using extra HTML to achieve the spacing required as it will give you a more consistent experience especially in Outlook.

[cheli]

Good point, @chris.upjohn for some reason I didn't even notice the div

Looking at the styling you've got on that div though might be the key to what you're seeing. You've got your right/left margin set to auto; could it be iPhone's auto margin setting that's the root to your problem?

.content {
	padding:15px;
	max-width:600px;
	margin:0 auto;
	display:block; 
}

Also, not all mail clients render margin. Here's a great link @ronpat shared with me recently, make sure you're covered for the email browsers your readers use: http://www.campaignmonitor.com/css/