MR2
Update: Layout Not Filling iPad Viewport with single-column nested tables
Please see latest comment: https://litmus.com/community/code/1332-layout-not-filling-ipad-viewport#comment-4337
I've poured a ton of time into troubleshooting this, including reaching out to Litmus support, and am baffled. I'm specifically look at the two iPad tests. This is a centered layout that is fine in Outlook and Apple Mail, and with iOS versions working correctly per media queries.
The iPad layouts are left-aligned (instead of centered) and only filling 669px. There's nothing in the code resembling 669px.
Max & min zoom set to 1:
https://litmus.com/pub/bd05120
Just initial scale set:
https://litmus.com/pub/2d10d7b
Nested table in the email (works!):
https://litmus.com/pub/e7ad0e6
Any thoughts? Help!
Thanks!
Mark
Hi Mark,
Using your Just initial scale set: https://litmus.com/pub/2d10d7b for testing. I noticed under the code analysis on lines 6 & 7 that the meta tags are in caps, they should be in lowercase and on line 355 I noticed there's a <span> wrapped around a table seeing as a <span> is an inline-block element I'd suggest removing it.
As for centering the content try replacing the styles within the <body> from:
<body style="-webkit-text-size-adjust:none !important;-ms-text-size-adjust:none !important;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;height:100% !important;width:100% !important;" >
to:
<body style="-webkit-text-size-adjust:none !important;-ms-text-size-adjust:none !important;margin:0 auto; padding:0px; height:100% !important;width:100% !important;" >
Interesting. The change to the body tag sorts out the left alignment but does nothing to correct the width issue.
After a little experimenting with Mark's Basic test example, I found that if you add min-width:100% to the <body> it'll fix the width issue:
https://litmus.com/pub/72301b2
Yup, That's got it. What an odd bug, thanks Melissa!
No problem. It really is an odd bug, I'm still trying to understand it myself.
That did the trick - Thanks, Melissa!!
Thanks for your help and extra set of eyes! I think the meta & span tag issues you observed were inserted/modified by Act-On, and were preserved in my tests. Running into this bug in the context of a particularly kludgey ESP didn't help matters :)
Weird, I'm currently battling with the exact same issue.
Trying out some things to see if I can work out what's going on. I shall report back later.
I encountered something similar a while ago. As far as I know, this has nothing to do with viewport. Adding
html { min-width:100%; }solved the problem for me.@Mark, I've poured some good time troubleshooting this myself. Just curious: when you are viewing the email in portrait view:
Hope it makes sense. This is what baffled me the most because doing the steps I above stretches the email 100%. Doesn't fix it, though.
Jonathan
Thanks for the reply! Unfortunately I'm relying on the Litmus tests alone for modern iPad testing.
I've stripped the test email down to the minimum. Nesting a single-column table triggers this. If nested tables have multiple columns, there's no issue; If the nested tables are both single-column, as with a centered table layout with full-width background colors, it occurs.
Is this a code issue or a viewport issue?
See screenshot:
https://dl.dropboxusercontent.com/u/2953460/single-column-table-ipad.png