RK
0
Tables Thrown Off + Tests (iPhone 7) not working
Hi, I'm having a heck of time with my email. My tables for some reason are all thrown off in a bunch of Outlook versions and for iPhone7 (iOS11) it's completely skewing toward the left. Any help would be greatly appreciated as I've been in the code all day and can't figure this out. Previews and access to code below:
https://litmus.com/builder/820ca0c
Thank you!
You can prevent iOS 11 from automatically scaling your email by adding the following bit of code to the
<head>of your emails:<meta name="x-apple-disable-message-reformatting">Awesome, thank you Kevin! That worked!
If my guess is correct, please give it a try by adding align="center" to the body tag, like:
<body align="center" style="background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;">
This might solve the issue of the table skewed towards left.
Please let us know your findings.
Hi! This did not work out for me. There is a bigger issue at hand I think with the arrangement of my tables. I'm going to have to explore further. Thank you though!
Hi,
Not able to reply to your response, hence replying to the main query.
Checking into the code, I found that the comment tag was not closed in line #740, and hence the closing table and html tags rendered ineffective.
Please change the code in line #740 as : <!-- END MAIN TABLE -->
and then give it a try. This might help.
Guru - thanks again for your help. Still something is throwing these off even with the tag closed. Here are the previews:
https://litmus.com/pub/b462f4a PREVIEW
https://litmus.com/builder/820ca0c CODE
I also notice how my background image is completely stretched in some versions. At a loss here, I've been working on this thing for awhile. Any help would be amazing. Thank you!
I would like to mention here that many browsers do not support style tags and android and iPhone devices do not display background images. Hence the background-image:url(.....) will be of no help in such cases.
Also, the main table containing the background image does not have a specified width and takes the entire width of the email reading pane in different email client [Outlook, Outlook.com, Gmail, AOL, etc], and this might be the cause of the irregular size of the background image in various cases, depending on the reading pane width of each ESP.
Please can you give it a try by specifying a width [say, 750px] to the beginning table, in line #237? This might make the background look uniform.
After removing the style tag of image for background, the image is rendering in iPhone clients.
https://litmus.com/builder/9f51c70
Please let me know if this was helpful.
Now some of the more popular email clients DO support embedded style (<style></style>)—Gmail, Outlook, iOS, Yahoo! Mail, and even some international email clients, to name a few!
@Jaina, I am aware of the fact, but the issue faced by the OP is about the background image, which is used in style tag. I got an improved result in my litmus instant previews after removing the same [retaining the href= for the bg image], hence posted the same, hoping it might help the OP. The outlook 2010 [for WIN 7] still has skewed table, though.
Guru, this did not work for me. I was actually able to get the background image to work and test in all of my clients by adjusting the actual image itself. However, I'm still having issues with my tables and think this has to do more with the VML competing in my code. I have plans to explore this further.
Hi Robyn!
We covered you question in today's episode of the Email Design Podcast! :) Check it out here:
https://litmus.com/blog/email-design-podcast-82-litmus-community-qa-rapid-fire
Whoo HOO! I'm geeking out. Thank you all for being an amazing support system for all my questions big and small! You guys are the best :)