Wondering if anyone has seen anything like this in a responsive email layout. I've reproduced this on an actual iPhone 3GS I have here (running iOS 4.1).
The design fills the width on the other iPhones and elsewhere, but on the 3GS it's loading in a narrower width (it looks like 300px). I can't see anything in the code that pops out at me as imposing that constraint.
Hi Mark, this is so strange! It's very uncommon for us to see rendering differences between iPhone/iOS versions. Sadly we don't have a live 3GS to test on at present, but my first recommendation would be to see if a live test differs from the Litmus one.
My second tip is to experiment with viewport meta tags. For example:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I'll be sure to let you know if I think of anything else. Thanks, Mark - let us know how you go here.
PS: Can we feature your design in our gallery? :D
Thanks for the tip, Ros! I was able to reproduce on an iPhone 3GS. I included the version of iOS in my original post.
I have not been setting viewport in HTML emails, though. I'll give that a shot tomorrow. My first thought was that the Litmus test was zoomed, but that's not the case on my device, and you can see the logo filling the width of the space the design is using – There should be spacers on either side.
Yes! You are welcome to feature this in the gallery once it's finished up! Here's another new design we did last week that I like, too: http://mailtools.dispatchwire.com/t/r-1734D1D571F208D92540EF23F30FEDED
Awesome - keep us updated. I'll pop you an email in just a moment, too :)
OK - I tried setting the viewport tag -- Didn't work.
I then tried setting all my outer table cells, in the wrapper table, to be 100%. Everything is centered in one of these cells, whether nested tables or not. The logo was directly centered in one. Didn't work.
When I tested on the 3GS, it would load the background color full width, and then it seemed to snap the table width to that 300px wide logo. So instead of having the logo centered in the full-width background color cell, I nested a table with 20px spacer columns on the left and right, like the other cells.
That technically worked.
However, it revealed hairline gaps in background color between rows. I fixed most of those by setting a bgcolor on the table itself, though the bottom row with a different background color still does that a bit.
Seems like it's still scaling something... But at this point, I'll take it!
I was only sizing the logo down to 300px wide in my media queries, + 20px on the outsides = 340 instead of 320. I have that sizing down to 280 now.
Nicely done, Mark - I can't wait to see your design in our gallery! :D