user1554264
Reputation: 1224
HTML email liquid layout breaking in Gmail
I have created a HTML email that has a particular layout issue when viewed in Gmail on a web browser, and on the Android App (Gmail). I've been unable to track down the offending code so far, and cannot understand why Gmail is splitting the HTML email in two past a certain point and placing the content in what appear to be two separate columns.
If anyone can help suggest a solution or what is the cause of the issue, along with a potential fix then this would be much appreciated.
HTML viewable here:
https://jsfiddle.net/59bd2z0L/
Screenshots of issue here (Gmail web browser):
Screenshots of issue here (Gmail Android App):
Source HTML here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
map area {outline:none;}
</style>
<title>Lorem Ipsum</title>
</head>
<body bgcolor="#FFFFFF">
<center>
<font style="font-size:13px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">Header goes here Lorem ipsum dolor sit amet, consectetur.<media><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a style="color:#000000;" href="&&&">click here</a>.</font><br /><br />
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="640">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="right">
<font style="font-size:16px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;"><a style="color:#000000;" href="">Lorem Ipsum</a></font><br />
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
<table border="0" cellspacing="0" width="100%"><tr><td></td><td width="640">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td>
<!-- Image Section -->
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/gold-te-header.jpg" width="100%" style="max-width:500px;" alt="" border="0" /></a></center>
<!-- End Image Section -->
<!-- Image Section -->
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-logo.jpg" width="100%" style="max-width:500px;" alt="" border="0" /></a></center>
<!-- End Image Section -->
</td></tr>
<tr><td height="10" style="font-size: 1px; line-height: 10px;"> </td></tr>
<!-- Menu Section -->
<tr><td><center><table border="0" cellpadding="0" cellspacing="0"><tr>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-women-top.jpg" width="100%" style="max-width:121px;" alt="Women" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-men-top.jpg" width="100%" style="max-width:81px;" alt="Men" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-uni-top.jpg" width="100%" style="max-width:116px;" alt="Unisex" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-foot-top.jpg" width="100%" style="max-width:165px;" alt="Footwear" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/clear-top.jpg" width="100%" style="max-width:157px;" alt="Clearance" border="0" /></a></td>
</tr></table></center></td></tr>
<!-- End Menu Section -->
<tr><td height="10" style="font-size: 1px; line-height: 10px;"> </td></tr>
<!-- Image Section -->
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork1.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td></tr>
<!-- End Image Section -->
<!-- Image Section -->
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork2.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td></tr>
<!-- End Image Section -->
<!-- Image Section -->
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork3.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td></tr>
<!-- End Image Section -->
<tr><td height="20" style="font-size: 1px; line-height: 20px;"> </td></tr>
<!-- Large Live Text Section -->
<tr><td>
<center>
<font style="font-size:19px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
<strong>Size 19 Live text:</strong> et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque deserunt mollitia animi, id est laborum.</strong>
</font>
</center>
</td></tr>
<!-- End Large Live Text Section -->
<tr><td height="20" style="font-size: 1px; line-height: 20px;"> </td></tr>
<!-- Image Section -->
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork4cta.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td></tr>
<!-- End Image Section -->
<tr><td height="20" style="font-size: 1px; line-height: 20px;"> </td></tr>
<!-- Image Section -->
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork5.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td></tr>
<!-- End Image Section -->
<!-- Image Section -->
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork6cta.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td></tr>
<!-- End Image Section -->
<tr><td height="20" style="font-size: 1px; line-height: 20px;"> </td></tr>
<!-- Letter Text Section -->
<tr><td>
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td width="3%"></td><td width="94%">
<font style="font-size:16px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
</font>
</center>
</td><td width="3%"></td></tr></table>
</td></tr>
<!-- End Letter Text Section -->
<tr><td height="30" style="font-size: 1px; line-height: 30px;"> </td></tr>
<!-- Grey Background Section -->
<tr><td bgcolor="#eff0f2" height="20" style="font-size: 1px; line-height: 20px;"> </td></tr>
<tr><td bgcolor="#eff0f2">
<center>
<font style="font-size:19px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
<strong>Lorem ipsum dolor sit amet, consectetur</strong><br /><br /><br />
</font>
<font style="font-size:12px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
Lorem ipsum dolor sit amet, consectetur.
</font>
</center>
</td></tr>
<tr><td bgcolor="#eff0f2" height="20" style="font-size: 1px; line-height: 20px;"> </td></tr>
<!-- End Grey Background Section -->
<tr><td height="30" style="font-size: 1px; line-height: 30px;"> </td></tr>
<!-- Double Banner -->
<tr><td><center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/email-ecat.jpg" width="100%" style="max-width:320px;" alt="Header goes here using promotional code <media>" border="0" /></a><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-banner-r.jpg" width="100%" style="max-width:320px;" alt="Header goes here using promotional code <media>" border="0" /></a></center></td></tr>
<!-- End Double Banner -->
<!-- USP Section -->
<tr><td><center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-locator.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-size.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-care.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-returns.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a></center></td></tr>
<!-- End USP Section -->
<!-- Social Section -->
<tr><td><center><table border="0" cellpadding="0" cellspacing="0"><tr>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-fbook.jpg" width="100%" style="max-width:196px;" alt="Facebook" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-pin.jpg" width="100%" style="max-width:78px;" alt="Pinterest" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-twi.jpg" width="100%" style="max-width:77px;" alt="Twitter" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-google.jpg" width="100%" style="max-width:96px;" alt="Google+" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-blog.jpg" width="100%" style="max-width:192px;" alt="Blog" border="0" /></a></td>
</tr></table></center></td></tr>
<!-- End Social Section -->
<!-- Bottom Menu -->
<tr><td>
<center><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-viewmore.jpg" width="100%" style="max-width:639px;" alt="View More" /></center>
</td></tr>
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-women-bot.jpg" width="100%" style="max-width:639px;" alt="Women" border="0" /></a></center>
</td></tr>
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-men-bot.jpg" width="100%" style="max-width:639px;" alt="Men" border="0" /></a></center>
</td></tr>
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-uni-bot.jpg" width="100%" style="max-width:639px;" alt="Unisex" border="0" /></a></center>
</td></tr>
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-foot-bot.jpg" width="100%" style="max-width:639px;" alt="Footwear" border="0" /></a></center>
</td></tr>
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-security.jpg" width="100%" style="max-width:639px;" alt="Clearance" border="0" /></a></center>
</td></tr>
<!-- End Bottom Menu -->
<!-- Security Banners -->
<tr><td>
<center><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-1.jpg" width="100%" style="max-width:639px;" alt="Security" /></center>
</td></tr>
<!-- End Security Banners -->
<!-- T&Cs -->
<tr><td>
<center>
<font style="font-size:12px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;"><br />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
</font>
</center>
</td></tr>
<!-- End T&Cs -->
</table>
</td><td></td></tr></table>
</center>
</body>
</html>
Upvotes: 0
Views: 165
Answers (1)
Sudipto
Reputation: 440
There were many HTML tag placement errors in your code. Here's the corrected code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
map area {
outline: none;
}
</style>
<title>Lorem Ipsum</title>
</head>
<body bgcolor="#FFFFFF">
<center>
<font style="font-size:13px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">Header goes here Lorem ipsum dolor sit amet, consectetur.<br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a style="color:#000000;" href="&&&">click here</a>.
</font>
<br />
<br />
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="640">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="right">
<font style="font-size:16px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;"><a style="color:#000000;" href="">Lorem Ipsum</a></font>
<br />
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="640">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<!-- Image Section -->
<center>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/gold-te-header.jpg" width="100%" style="max-width:500px;" alt="" border="0" /></a>
</center>
<!-- End Image Section -->
<!-- Image Section -->
<center>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-logo.jpg" width="100%" style="max-width:500px;" alt="" border="0" /></a>
</center>
<!-- End Image Section -->
</td>
</tr>
<tr>
<td height="10" style="font-size: 1px; line-height: 10px;"> </td>
</tr>
<!-- Menu Section -->
<tr>
<td>
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-women-top.jpg" width="100%" style="max-width:121px;" alt="Women" border="0" /></a>
</td>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-men-top.jpg" width="100%" style="max-width:81px;" alt="Men" border="0" /></a>
</td>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-uni-top.jpg" width="100%" style="max-width:116px;" alt="Unisex" border="0" /></a>
</td>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-foot-top.jpg" width="100%" style="max-width:165px;" alt="Footwear" border="0" /></a>
</td>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/clear-top.jpg" width="100%" style="max-width:157px;" alt="Clearance" border="0" /></a>
</td>
</tr>
</table>
</center>
</td>
</tr>
<!-- End Menu Section -->
<tr>
<td height="10" style="font-size: 1px; line-height: 10px;"> </td>
</tr>
<!-- Image Section -->
<tr>
<td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork1.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td>
</tr>
<!-- End Image Section -->
<!-- Image Section -->
<tr>
<td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork2.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td>
</tr>
<!-- End Image Section -->
<!-- Image Section -->
<tr>
<td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork3.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td>
</tr>
<!-- End Image Section -->
<tr>
<td height="20" style="font-size: 1px; line-height: 20px;"> </td>
</tr>
<!-- Large Live Text Section -->
<tr>
<td>
<center>
<font style="font-size:19px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
<strong>Size 19 Live text:</strong> et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque deserunt mollitia animi, id est laborum.
</font>
</center>
</td>
</tr>
<!-- End Large Live Text Section -->
<tr>
<td height="20" style="font-size: 1px; line-height: 20px;"> </td>
</tr>
<!-- Image Section -->
<tr>
<td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork4cta.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td>
</tr>
<!-- End Image Section -->
<tr>
<td height="20" style="font-size: 1px; line-height: 20px;"> </td>
</tr>
<!-- Image Section -->
<tr>
<td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork5.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td>
</tr>
<!-- End Image Section -->
<!-- Image Section -->
<tr>
<td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork6cta.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td>
</tr>
<!-- End Image Section -->
<tr>
<td height="20" style="font-size: 1px; line-height: 20px;"> </td>
</tr>
<!-- Letter Text Section -->
<tr>
<td>
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="3%"></td>
<td width="94%">
<font style="font-size:16px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
</font>
</td>
<td width="3%"></td>
</tr>
</table>
</center>
</td>
</tr>
<!-- End Letter Text Section -->
<tr>
<td height="30" style="font-size: 1px; line-height: 30px;"> </td>
</tr>
<!-- Grey Background Section -->
<tr>
<td bgcolor="#eff0f2" height="20" style="font-size: 1px; line-height: 20px;"> </td>
</tr>
<tr>
<td bgcolor="#eff0f2">
<center>
<font style="font-size:19px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
<strong>Lorem ipsum dolor sit amet, consectetur</strong><br /><br /><br />
</font>
<font style="font-size:12px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
Lorem ipsum dolor sit amet, consectetur.
</font>
</center>
</td>
</tr>
<tr>
<td bgcolor="#eff0f2" height="20" style="font-size: 1px; line-height: 20px;"> </td>
</tr>
<!-- End Grey Background Section -->
<tr>
<td height="30" style="font-size: 1px; line-height: 30px;"> </td>
</tr>
<!-- Double Banner -->
<tr>
<td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/email-ecat.jpg" width="100%" style="max-width:320px;" alt="Header goes here using promotional code <media>" border="0" /></a><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-banner-r.jpg" width="100%" style="max-width:320px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td>
</tr>
<!-- End Double Banner -->
<!-- USP Section -->
<tr>
<td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-locator.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-size.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-care.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-returns.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a>
</center>
</td>
</tr>
<!-- End USP Section -->
<!-- Social Section -->
<tr>
<td>
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-fbook.jpg" width="100%" style="max-width:196px;" alt="Facebook" border="0" /></a>
</td>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-pin.jpg" width="100%" style="max-width:78px;" alt="Pinterest" border="0" /></a>
</td>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-twi.jpg" width="100%" style="max-width:77px;" alt="Twitter" border="0" /></a>
</td>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-google.jpg" width="100%" style="max-width:96px;" alt="Google+" border="0" /></a>
</td>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-blog.jpg" width="100%" style="max-width:192px;" alt="Blog" border="0" /></a>
</td>
</tr>
</table>
</center>
</td>
</tr>
<!-- End Social Section -->
<!-- Bottom Menu -->
<tr>
<td>
<center><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-viewmore.jpg" width="100%" style="max-width:639px;" alt="View More" /></center>
</td>
</tr>
<tr>
<td>
<center>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-women-bot.jpg" width="100%" style="max-width:639px;" alt="Women" border="0" /></a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-men-bot.jpg" width="100%" style="max-width:639px;" alt="Men" border="0" /></a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-uni-bot.jpg" width="100%" style="max-width:639px;" alt="Unisex" border="0" /></a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-foot-bot.jpg" width="100%" style="max-width:639px;" alt="Footwear" border="0" /></a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-security.jpg" width="100%" style="max-width:639px;" alt="Clearance" border="0" /></a>
</center>
</td>
</tr>
<!-- End Bottom Menu -->
<!-- Security Banners -->
<tr>
<td>
<center><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-1.jpg" width="100%" style="max-width:639px;" alt="Security" /></center>
</td>
</tr>
<!-- End Security Banners -->
<!-- T&Cs -->
<tr>
<td>
<center>
<font style="font-size:12px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;"><br /> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
</font>
</center>
</td>
</tr>
<!-- End T&Cs -->
</table>
</td>
<td></td>
</tr>
</table>
</center>
</body>
</html>Use it and let me know if it works :)
Upvotes: 1
Related Questions
- Why is my HTML email coming out completely mangled in Gmail?
- Gmail Client for android doesn't apply my css style to email
- Email coding : Gmail and Gmail app seems to be ignoring my CSS
- Gmail removes in-line CSS
- HTML Email on Gmail App not rendering
- Gmail breaks the formatting of my HTML email?
- Email layout different between mobile and desktop
- HTML mail does not display complete on android gmail client
- Can HTML email be fixed in gmail, fluid in mobile?
- Gmail screws up html emails that I send out