NG
0
iPhone Centering
Hi, for some reason my design is looking very awkward on iPhone only - firtly the div <fine-print> before my actual image table is getting squashed to the left side for some reaosn instead of stretching the full width of the screen and flow with the rest of the design. Also the whole thing is not so centered- not sure what's going on, there's a bit of a margin on the left, top and bottom but the right side the white stretches across... Any ideas? Below is my code. thanks in advance :)
<html>
<head>
<title>We Miss You!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
a, a:link, a:visited {text-decoration:none; color:inherit}
a:hover {text-decoration: underline;}
img{
display:block;
border:none;
font-family:Arial, Helvetica, sans-serif;
color: #555555;
font-size: 10px;"
}
a img{
border:none;
}
.bold {
font-weight: bold;
}
/*table {
border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}*/
.fine-print {
font-family:"Arial", Helvetica, sans-serif;
font-size:9px;
font-weight: normal;
color: #555;
}
.text2 {
font-size:8px;
font-style:italic;
font-family:"Arial", Helvetica, sans-serif;
color:#555555;
}
.text3 {
font-size:8px;
font-family:"Arial", Helvetica, sans-serif;
color:#555555;
}
</style>
</head>
<body bgcolor="#FF9999" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<div style="width:600px; max-width:600px; text-align:center;" class="container">
<div class="fine-print" style="width:600px; margin-top:20px; background-color:#FFFFFF;">
<table width="600" border="0" cellspacing="0" cellpadding="0" style="background-color:#FFFFFF; width:600px;" bgcolor="#FFFFFF">
<tr class="text3">
<td width="190" style="padding-top:10px; padding-left:10px; text-align:left;">
We miss you! Want to come back?
</td>
<td width="390" style="padding-top:10px; padding-right:10px; text-align:right;">
Images not showing up?
<webversion style= "color:inherit;">View in your browser</webversion>
</td>
</tr>
</table>
<table>
<tr>
</tr>
<tr class="text2">
<td width="600" scope="col" style="text-align:center;">
You are receiving this email because you subscribed via our <a href="http://www.ababy.com/" style="text-decoration:underline; color:inherit;">website</a>. You may
<unsubscribe style= "color:inherit;">unsubscribe</unsubscribe>
if you are no longer interested.
</td>
</tr>
</table>
</div> <!--fine-print-->
<!-- Save for Web Slices (Unsubscribe2.psd) -->
<table id="Table_01" width="600" height="920" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><a href="www.ababy.com"><img src="images/Unsubscribe-final_01.jpg" width="600" height="92" alt="aBaby.com" style="font-family:Arial, Helvetica, sans-serif; color: #555555; font-size: 10px;"></a></td>
</tr>
<tr>
<td colspan="2">
<img src="images/Unsubscribe-final_02.jpg" width="600" height="396" alt="We haven't heard from you lately, but we'd love to..." style="font-family:Arial, Helvetica, sans-serif; color: #555555; font-size: 10px;"></td>
</tr>
<tr>
<td colspan="2"><a href="www.ababy.com"><img src="images/Unsubscribe-final_03.jpg" width="600" height="269" alt="Want to stay? Enjoy 10% off your next purchase. Enter code LUVABABY at checkout." style="font-family:Arial, Helvetica, sans-serif; color: #555555; font-size: 10px;"></a></td>
</tr>
<tr>
<td><preferences><img src="images/Unsubscribe-final_04.jpg" width="306" height="49" alt="I want to stay! :) Get Shopping >" style="font-family:Arial, Helvetica, sans-serif; color: #555555; font-size: 10px; font-weight:bold;"></preferences></td>
<td><unsubscribe><img src="images/Unsubscribe-final_05.jpg" width="294" height="49" alt="I want to unsubscribe :(" style="font-family:Arial, Helvetica, sans-serif; color: #555555; font-size: 10px; font-weight:bold;"></unsubscribe></td>
</tr>
<tr>
<td colspan="2">
<img src="images/Unsubscribe-final_06.jpg" width="600" height="114" alt="We don't want to clutter your inbox. We'll miss you, but we sure understand! Hope to see you back soon!"></td>
</tr>
</table>
<!-- End Save for Web Slices -->
<div id="footer" align="center" style="background-color:#FFFFFF; text-align:center; width:600px; max-width:600px;">
<div id="social-media" align="center" style="width:600px; max-width:600px;">
<table width="600" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center" style="width:600px; max-width:600px;">
<tr style="width:580px;">
<td width="35" style="padding-left:10px;"><a href="https://www.pinterest.com/ababyshop/"><img src="images/pinterest.png" width="35" height="31" alt="Pinterest" style="font-family:Arial, Helvetica, sans-serif; color: #555555; font-size: 6px;"></a></td>
<td width="35"><a href="http://www.twitter.com/AbabyInc"><img src="images/twitter.png" width="35" height="34" alt="Twitter"style="font-family:Arial, Helvetica, sans-serif; color: #555555; font-size: 6px;"></a></td>
<td width="35"><a href="https://www.youtube.com/user/aBabyShop/videos"><img src="images/youtube.png" width="35" height="33" alt="YouTube"style="font-family:Arial, Helvetica, sans-serif; color: #555555; font-size: 6px;"></a></td>
<td width="35"><a href="http://www.facebook.com/ababy.com#!/pages/aBabycom/148974605130096?ref=sgm"><img src="images/facebook.png" width="35" height="33" alt="Facebook" style="font-family:Arial, Helvetica, sans-serif; color: #555555; font-size: 6px;""></a></td>
<td width="35"><a href="https://plus.google.com/100829226880354295415"><img src="images/google.png" width="35" height="31" alt="Google+"style="font-family:Arial, Helvetica, sans-serif; color: #555555; font-size: 6px;"></a></td>
<td width="425" align="right" class="PhoneNum" style="padding-right:10px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size: 18px; color: #555555;"> <a href="tel://1-877-552-2229" style="text-decoration:none; color:inherit;"> 877.552.2229 </a></td>
</tr>
</table>
</div> <!--social-media-->
<div id="footer-text" align="center" style="width:600px; max-width:600px;">
<table width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF" align="center" style="width:600px; max-width:600px;">
<tr style="width:560px;">
<td style="padding: 10px 20px 0px 20px;" class="fine-print">
Just a reminder that you’re receiving this email because you are a valued customer and you subscribed via our <a href="http://www.ababy.com/" style="text-decoration:underline; color:inherit;">website</a>. You may
<unsubscribe style= "color:inherit;">unsubscribe</unsubscribe>
if you are no longer interested.
</td>
<tr style="width:560px;">
<td style="padding: 10px 20px 0px 20px;" class="fine-print">
Never miss a deal! To ensure future information from ababy.com is delivered to your inbox (not junk or bulk folders), please add <a href="mailto:sales@ababy.com" target="_blank" style="text-decoration:underline; color:inherit;">sales@ababy.com </a> to your address book.<br>
Have friends who love aBaby too? <forwardtoafriend style="color:inherit;">Forward this email to them</forwardtoafriend> so they can also hear about all things aBaby. <br><br>
</td>
</tr>
<tr style="width:560px;">
<td style="padding: 5px 20px 0px 20px;" class="fine-print">
Did you receive this email from a friend?<br>
Want to subscribe to ababy.com email list or refer a friend? <a href="http://www.ababy.com/info/join_list.asp" target="_blank" style="text-decoration:underline; color:inherit;">Click here</a>
</td>
</tr>
<tr style="width:560px;">
<td style="padding: 10px 20px 0px 20px;" class="fine-print">
Take <span class="bold">10% off your order!</span> <br><span class="fine-print"> Use code</span> <span class="bold">LUVABABY</span> <span class="fine-print">at checkout.</span><br>Exclusions apply. Not all merchants participate in sales. Does not apply to free shipping items. <br> Cannot be combined with any other promotion. Offer expires 04/01/16 at 12:00 AM EST.
</td>
</tr>
<tr style="width:560px;">
<td style="padding: 10px 20px 20px 20px;" class="fine-print">
aBaby.com has satisfied many proud parents and grandparents over the years with our beautiful selection of classic, elegant, and unique style baby furniture & bedding. We have a large variety of all the furniture pieces your child will need as a newborn, then toddler and even as a dashing teen. Our friendly customer service team is always ready to assist you in finding the perfect gift for all occasions; from baby showers to birthday parties and everything in between. We have a large array of kids baby furniture, table and chair sets, soft play, pretend play, outdoor play and much more. We also offer a large assortment of baby nursery décor which will add the finishing touch to your child’s lovely nursery. The Wall letters, Name Plaques, Lighting and Artwork will do it all. So go ahead and take a look at all the excellent, top quality furniture and products we offer to the proud parents and grandparents.
</td>
</tr>
</table>
</div> <!--footer-text-->
</div> <!--footer-->
</div> <!--container-->
</div> <!--center-->
</body>
</html>
Have you tried adding style="padding:0; margin:0;" inside the opening <body> tag?
Thanks, Paul, the iPhone 5 is still showing with the slightly nudged tables, and the iPhone 5S & 6 shows even worse. The 6s (and iPad) looks fine. - See screenshots below:
iPhone 6: http://cm.d.pr/1ft89/47wbjGTG
iPhone 5: http://d.pr/i/1ixh8
Let me know if you can help! I am totally stuck here.
Here's my code (there may be a few slight changes since I posted originally).
I actually managed to solve this by putting my entire code in one table with some nested tables inside. A bit of an unnecessary mess :), but it worked! I took out all the divs also. My final working code is below:
Could you post a screenshot or two of your fixed message? I've been having a similar problem and would like to see if this would achieve the desired solution. Thanks!
Sure, here you go - good luck!
It's 2 screenshots in a zip file shared thru Droplr below:
http://d.pr/f/12S28