I am trying to build a two column layout for a newsletter, but for some reason my columns are sometimes vertically aligning to the centre?
In some versions of outlook it works but others not?
Any idea how I can fix this?
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="telephone=no" name="format-detection" />
<title>EMAIL NEWSLETTER</title>
<style type="text/css">
body {
-webkit-text-size-adjust: 100%!important;
-ms-text-size-adjust: 100%!important;
-webkit-font-smoothing: antialiased!important
}
img {
border: 0!important;
outline: none!important;
}
p {
margin: 0!important;
padding: 0!important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0;
mso-table-rspace: 0;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
span.MsoHyperlink {
mso-style-priority: 99;
color: inherit
}
span.MsoHyperlinkFollowed {
mso-style-priority: 99;
color: inherit;
}
.em_white a {
text-decoration: none;
color: #ffffff;
}
.em_white_und a {
text-decoration: underline;
color: #ffffff;
}
.em_orange a {
text-decoration: none;
color: #EC8026;
}
.em_orange1 a {
text-decoration: none;
color: #e44c16;
}
.em_marun a {
text-decoration: none;
color: #1e8faa;
}
.em_marun1 a {
text-decoration: none;
color: #1E8FAA;
}
.em_yellow a {
text-decoration: none;
color: #f5ebd7;
}
#media screen and (min-width:601px) {
.container {
width: 600px!important;
}
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">table{border-collapse:collapse!important!important}</style>
<![endif]-->
</head>
<body style="margin:0;padding:0">
<table style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center"><table class="container" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;">
<tr>
<td><table style="max-width:600px" width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table class="container" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;" bgcolor="#1E8FAA">
<tr>
<td bgcolor="#1E8FAA" valign="top" style="border-spacing:0;Margin:0 auto;width:100%;max-width:582px"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><!--[if (gte mso 9)|(IE)]><table width="582" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="max-width:582px" align="center">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="line-height:0px;font-size:0px"> </td>
</tr>
<tr>
<td class="two-column" valign="top" style="text-align:left;font-size:0" dir="rtl"><!--[if (gte mso 9)|(IE)]><table width="100%" dir="rtl"><tr><td width="188"><![endif]-->
<div class="column" style="width:100%;max-width:188px;display:inline-block;vertical-align:top;text-align:left" dir="ltr">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="column">
<tr>
<td valign="top" class="em_hide"><table width="100%" border="0" cellspacing="0" style="max-width:198px;" cellpadding="0" align="right" class="column">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td><table style="max-width:198px;" border="0" cellspacing="0" cellpadding="0" align="left" class="column">
<tr>
<td width="10"> </td>
<td mc:edit="text_2" class="em_center" height="42" valign="middle" align="left" style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:11px; line-height:15px; color:#ffffff;background-color:#1E8FAA;"><multiline style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:11px; line-height:15px; color:#ffffff;background-color:#1E8FAA;"><span class="em_white">Email not displaying properly? </span></multiline>
<br />
<span class="em_white_und">
<webversion style="text-decoration:underline;color:#ffffff;"><span class="em_white_und" style="text-decoration:underline;color:#ffffff;">View it in your browser.</span></webversion>
</span></td>
<td width="10"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="20" style="line-height:1px;font-size:1px"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="384"><![endif]-->
<div class="column" style="width:100%;max-width:384px;display:inline-block;vertical-align:top;text-align:left" dir="ltr">
<table width="100%" style="max-width:384px" cellpadding="0" align="center" cellspacing="0" border="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10" class="em_hide"> </td>
<td width="152" align="center" valign="top"><img editable="true" src="/images/logo.jpg" width="152" alt="logo" style="display:block;font-family:Georgia, 'Times New Roman', Times, serif;font-size:14px;color:#ffffff;font-weight:bold;line-height:20px;max-width:152px;" border="0" /></td>
<td width="222" class="em_hide"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="20" style="line-height:1px;font-size:1px"> </td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" valign="top"><repeater>
<layout label="Gallery">
<table style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center"><table class="container" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;">
<tr>
<td><table style="max-width:600px" width="100%" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
<tr>
<td><!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;" bgcolor="#ffffff">
<tr>
<td width="5" class="em_hide"> </td>
<td class="two-column" valign="top" style="text-align:center;font-size:0"><!--[if (gte mso 9)|(IE)]><table width="100%"><tr><td width="295"><![endif]-->
<div class="column" style="width:100%;max-width:295px;display:inline-block;vertical-align:top;text-align:center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="column">
<tr>
<td width="5" class="em_hide"> </td>
<td align="center" valign="top" class="em_side_space"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top"><img editable="true" src="http://placehold.it/350x250" width="285" alt="GALLERY ARTICLE 1" style="display:block;font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:15px; line-height:30px; color:#000000;font-weight:bold;max-width:285px;" border="0" class="em_full_width" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#1E8FAA" style="background-color:#1E8FAA;"><table width="100%" style="max-width:285px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"> </td>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;"><span class="em_yellow">
<multiline style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</multiline>
</span></td>
</tr>
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="10"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="18" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="5" class="em_hide"> </td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="295"><![endif]-->
<div class="column" style="width:100%;max-width:295px;display:inline-block;vertical-align:top;text-align:center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="column">
<tr>
<td width="5" class="em_hide"> </td>
<td align="center" valign="top" class="em_side_space"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top"><img editable="true" src="http://placehold.it/350x250" width="285" alt="GALLERY ARTICLE 2" style="display:block;font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:15px; line-height:30px; color:#000000;font-weight:bold;max-width:285px;" border="0" class="em_full_width" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#1E8FAA" style="background-color:#1E8FAA;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"> </td>
<td valign="top"><table width="100%" style="max-width:285px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;"><span class="em_yellow">
<multiline style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</multiline>
</span></td>
</tr>
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="10"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="18" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="5" class="em_hide"> </td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
<td width="5" class="em_hide"> </td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</layout>
</repeater></td>
</tr>
</table>
</body>
</html>
By setting a height for the element your trying to valign it should work.
I fixed it with:
<!--[if (gte mso 9)|(IE)]><table width="100%"><tr><td width="295" valign="top"><![endif]-->
Related
I am setting up an email newsletter template however the images at the top as well as the video link at the bottom are not aligned correctly.
When I preview the template/ code in sublime text as well as the email composition page the images look fine but once the email is sent the images bleed out the right-hand side. Help!
body {
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0px;
mso-table-rspace: 0px;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.em_white a {
color: #ffffff !important;
text-decoration: none !important;
}
.em_black a {
color: #000000;
text-decoration: none;
}
.em_green a {
color: #737f48;
text-decoration: none;
}
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="telephone=no" name="format-detection" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Our Preschool Program</title>
</head>
<body style="margin:0px; padding:0px;" bgcolor="#ffffff">
<table width="100%" border="0" align="center" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<!-- Emailer Starts Here-->
<td align="center" valign="top"><table style="table-layout:fixed;" width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td background="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/bg_top.jpg" style="background-repeat:no-repeat;" width="313" height="451" valign="top" bgcolor="#4c6211"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:313px;height:451px;">
<v:fill type="tile" src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/bg_top.jpg" color="#4c6211"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="313" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="80"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="313" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="106"> </td>
<td valign="top" align="center" width="105"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/logo_header.png" width="105" height="105" alt="PRIMROSE SCHOOL" style="display:block; font-family:Arial, sans-serif; font-size:15px; line-height:22px; color:#ffffff; font-weight:bold;" border="0"/></td>
<td width="102"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="61"> </td>
</tr>
<tr>
<td class="em_white" valign="top" align="center" style="font-family:UnitOT, sans-serif; font-size:43px; line-height:50px; color:#ffffff;">Our <br />Preschool<br/>Program</td>
</tr>
<tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
<td valign="top" align="left"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/banner.jpg" width="487" height="451" alt="Our preschool Program" style="display:block;" border="0"/></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="28" bgcolor="#f1f2f2"> </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="36" bgcolor="#f2f2f2"> </td>
<td valign="top" align="center"><table width="728" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="18" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="728" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="18"> </td>
<td width="1" bgcolor="#737f48"></td>
<td valign="top" align="center"><table width="690" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="1" style="font-size:1px; line-height:1px;" bgcolor="#737f48"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="690" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25"> </td>
<td valign="top" align="center"><table width="645" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td class="em_black" valign="top" align="left" style="font-family:Arial, sans-serif; font-size:12px; line-height:15px; color:#000000;"><TemplateField Name="Message" Width="645" MinHeight="30" MaxHeight="1000" Height="30">Thank you for inquiring about the [{CenterName}] for your preschooler! We hope we have the opportunity to partner with you to provide an unparalleled early learning experience for your child and family.<br /><br />
<b>About <i>Primrose®</i> and <i>Balanced Learning®</b></i><br />
At Primrose, we believe who children become is as important as what they know. That's why our exclusive <i>Balanced Learning </i> approach emphasizes character development and life skills in addition to nurturing children's intellectual, creative and physical development.<br /><br />
<i>Balanced Learning</i> is created from the best early education wisdom to ensure we offer the highest quality early education and care possible. Meaningful daily classroom experiences weave learning and fun together for children, and a balance of purposeful play and nurturing guidance from teachers gives every child the opportunity to reach his full learning potential.<br /><br />
<b>About our Preschool Classroom</b><br />
Our Preschool classroom is part of our Venture Program for children ages 3 to 5, which focuses on building children's confidence and independence so they feel comfortable venturing out, exploring on their own and asking questions. We invite you to watch the video below for a glimpse inside our Preschool classroom and to learn more about the unique experiences designed to nurture curiosity, creativity, confidence and compassion.<br /><br />
We would love to speak with you more about what you are looking for in a child care provider. Please let us know a time that is convenient for you to visit our school and meet our School Leadership Team and teachers.<br /><br />
Thank you again for your interest in the [{CenterName}]. We look forward to meeting you and your child soon!<br /><br />
Sincerely,
</TemplateField></td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:Arial, sans-serif;font-size:12px;height:19px;color:#231f20;text-align:left;">[{CenterName}]<br />
[{CenterAddress1}] [{CenterAddress2}] | [{CenterCity}], [{CenterState}] [{CenterZip}]<br />
[{CenterPhone}] | [{CenterWebsite}]</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</table></td>
<td width="20"> </td>
</tr>
</table></td>
</tr>
</table></td>
<td width="1" bgcolor="#737f48"></td>
<td width="18"> </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="18" height="182" bgcolor="#f1f2f2" valign="top"><table width="18" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="162" bgcolor="#ffffff"></td>
</tr>
</table></td>
<td valign="top" height="182" ><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" valign="top" bgcolor="#f1f2f2"><table width="1" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="145" bgcolor="#737f48"></td>
</tr>
<tr>
<td width="1" height="17" bgcolor="#ffffff"></td>
</tr>
</table></td>
<td valign="top" align="center"><table width="690" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="center"><table width="380" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="144" align="center" valign="top"><table width="365" border="0" cellspacing="0" cellpadding="0">
<tr>
</tr>
<tr>
<td height="10" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td class="em_green" valign="top" align="right" style="font-family:'Unitot', Trebuchet MS, Arial, sans-serif; font-size:15px; line-height:18px; color:#737f48; font-weight:bold;">Learn more about our </td>
</tr>
<tr>
<td class="em_green" valign="top" align="right" style="font-family:'Unitot', Trebuchet MS, Arial, sans-serif; font-size:15px; line-height:18px; color:#737f48; font-weight:bold;">Preschool program.</td>
</tr>
<tr>
</tr>
<tr>
<td align="center" valign="top"><table width="365" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="5" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td align="right" valign="top"><table width="365" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="198"> </td>
<td align="right" valign="top" width="31"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/fb.jpg" width="31" height="31" alt="Fb" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></td>
<td width="4"></td>
<td align="right" valign="top" width="30"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/twitt.jpg" width="30" height="31" alt="Tweet" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></td>
<td width="4"></td>
<td align="right" valign="top" width="30"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/media.jpg" width="30" height="31" alt="YT" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></td>
<td width="4"></td>
<td align="right" valign="top" width="30"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/pinterest.jpg" width="30" height="31" alt="Pint" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></td>
<td width="4"></td>
<td align="right" valign="top" width="30"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/blog.jpg" width="30" height="31" alt="Blog" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="5" style="font-size:1px; line-height:1px;"> </td>
</tr>
</table></td>
<td width="15"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1" style="font-size:1px; line-height:1px;" bgcolor="#737f48"> </td>
</tr>
<tr>
<td height="17" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td height="25" style="font-size:1px; line-height:1px;" bgcolor="#f1f2f2"> </td>
</tr>
</table></td>
<td valign="top" align="left" width="293"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/Video.jpg" width="293" height="187" alt="Video" style="display:block;" border="0"/></td>
<td valign="top" align="center" width="17"><table width="17" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="144" width="17"> </td>
</tr>
<tr>
<td height="1" width="17" valign="bottom" style="font-size:1px; line-height:1px;" bgcolor="#737f48"> </td>
</tr>
<tr>
<td height="17" width="17" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td height="25" style="font-size:1px; line-height:1px;" width="17" bgcolor="#f1f2f2"> </td>
</tr>
</table></td>
</tr>
</table></td>
<td width="1" valign="top" bgcolor="#f1f2f2"><table width="1" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="145" bgcolor="#737f48"></td>
</tr>
<tr>
<td width="1" height="17" bgcolor="#ffffff"></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="18" height="182" bgcolor="#f1f2f2" valign="top"><table width="18" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="162" bgcolor="#ffffff"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="36" bgcolor="#f2f2f2"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="20" bgcolor="#f1f2f2"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td background="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/bg_bottom.jpg" style="background-repeat:no-repeat;" width="800" height="135" valign="top" bgcolor="#4c6211"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:800px;height:135px;">
<v:fill type="tile" src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/bg_bottom.jpg" color="#4c6211"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="25"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="36"> </td>
<td width="320" valign="top" align="left"><table width="320" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td height="22"> </td>
</tr>
<tr>
<td class="em_white" align="left" valign="top" style="font-family:'Century Gothic', Arial, sans-serif; font-size:8px; line-height:10px; color:#ffffff;"><span style="font-weight:bold;">Confidentiality Notice:</span> This message (including any attachments) contains information that may be confidential. Unless you are the intended recipient(or authorized to receive for the intended recipient), you may not read, print, retain, use, copy, distribute or disclose to anyone the message or any information contained in the message. If you have received the message in error, please advise the sender by reply e-mail, and destroy all copies of the original message (including any attachments). </td>
</tr>
</table></td>
<td width="300" valign="top" align="center"><table width="300" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td height="57"> </td>
</tr>
<tr>
<td valign="top" align="right" style="font-size:0px; line-height:0px;"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/text_1.png" width="210" height="13" alt="The Leader in Early Education and Care." border="0" style="display:block; font-family:Arial, sans-serif; font-size:10px; line-height:22px; color:#ffffff;" /></td>
</tr>
</table></td>
<td width="5"></td>
<td width="91" valign="top" align="left"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/logo_ftr.png" width="91" height="92" alt="PRIMROSE SCHOOLS" border="0" style="display:block; font-family:Arial, sans-serif; font-size:15px; line-height:22px; color:#ffffff; font-weight:bold;" /></td>
<td width="48"> </td>
</tr>
</table></td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#ffffff" style="line-height:1px; font-size:1px;" width="800"><img alt="" src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/spacer.gif" height="1" width="800" style="max-height:1px; min-height:1px; display:block; width:800px; min-width:800px;" border="0" /></td>
</tr>
</table></td>
</tr>
<!-- Emailer Ends Here //-->
</table>
<div style="display:none; white-space:nowrap; font:20px courier; color:#ffffff; background-color:#ffffff;"> </div>
</body>
</html>
I just need the image to fit within the box when sent and be justified with the rest of the template.
As Nisharg Shah said, use inline CSS instead of creating a style tag. Also, use of !important is usually frowned upon and candle make your CSS very confusing.
I want to put hr between two elements in my table. I am creating mailing templemate. How can I put it in one row? Here's code:
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
line-height: 100%;
}
#outlook a {
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
border-collapse: collapse;
}
.tablereset {
margin: 0 auto;
width: 640px !important;
line-height: 100% !important
}
.button {
margin: 0 auto !important;
}
.devicewidthsocial {
margin: 0 auto;
}
img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%!important;
margin: 0;
padding: 0;
display: block;
}
table td {
border-collapse: collapse;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
td.boxesfont {
font-size: 17px !important;
font-family: 'Roboto', Arial, Helvetica, sans-serif!important
}
td[class*=font-resize] {
font-size: 140%!important
}
td[style*="Roboto"] {
font-family: 'Roboto', Arial, Helvetica, sans-serif!important
}
td[style*="Open Sans"] {
font-family: 'Open Sans', arial, sans-serif !important
}
#media only screen and (max-width:640px) {
a[href="tel"],
a[href="sms"] {
text-decoration: none;
color: #ffffff;
pointer-events: none;
cursor: default;
}
tr.removemobile {
display: none;
}
td[class*=threecolumnphoto] {
padding-bottom: 20px;
}
table[class*=button] {
float: none;
}
table.removemobile {
display: none;
}
table.tablereset {
margin: 0 auto;
width: 440px !important;
line-height: 100% !important
}
table[class*=devicewidth] {
width: 440px!important;
text-align: center!important;
float: none!important;
display: table!important;
}
table[class*=devicewidthinner] {
width: 400px!important;
text-align: center!important;
float: none!important;
}
table[class*=devicewidthinner3] {
width: 173px!important;
float: none!important;
}
img[class*=logoImg] {
width: 110px!important;
height: auto!important;
}
}
#media only screen and (max-width:479px) {
table.removemobile {
display: none;
}
table[class*=tablereset] {
margin: 0 auto;
width: 280px !important;
line-height: 100% !important
}
img[class*=logoImg] {
width: 100px!important;
height: auto!important;
}
td[class*=threecolumnphoto] {
padding-bottom: 20px;
}
table[class*=devicewidthright] {
width: 160px!important;
}
table[class*=devicewidth] {
width: 280px!important;
float: none!important;
display: table!important;
}
table[class*=devicewidthinner] {
width: 240px!important;
float: none!important;
}
table[class*=devicewidthinner3] {
width: 173px!important;
float: none!important;
}
table[class*=button] {
float: none!important;
}
table[class*=button] td,
table[class*=button] td a {
font-size: 12px!important;
}
td[class*=oswaldfont] {
font-size: large!important;
}
}
<body style="margin:0; padding:0">
<div>
<table class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="640">
<table class="devicewidth" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="640">
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="58" width="640"> </td>
</tr>
<tr>
<td>
<p style="text-align: center">xyz</p>
</td>
</tr>
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="18" width="640"> </td>
</tr>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="350">
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:18px; color:#b2b2b2;line-height: 18px;text-align: center;">
Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" width="640"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- pierwsza dwójka -->
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="640">
<table class="devicewidth" align="center" cellspacing="0" cellpadding="0" border="0" width="640" style="margin:0 auto;mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;">
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="317">
<tr>
<td align="left" width="640">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tr>
<td width="640" height="26"> </td>
</tr>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">lorem ipsum</td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Arial, Helvetica, sans-serif;font-weight: 300; font-size: 20px;line-height:24px; color: #606060; font-weight: bold; text-transform: uppercase;">lorem ipsum </td>
</tr>
<tr>
<td width="640" height="25"> </td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300; color: #606060;">Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="640" height="25"> </td>
</tr>
</table>
</td>
</tr>
</table>
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="10">
<tr>
<td align="left" width="10">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="10">
<tr>
<td width="10" height="26">
<hr style="
border:none;border-left:1px solid hsla(200, 10%, 50%,100);height:20px;width:1px;
">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="devicewidthinner" align="right" border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="317">
<tr>
<td align="left" width="640">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tr>
<td width="640" height="26"> </td>
</tr>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">lorem ipsum
<span style="color: red;text-decoration: line-through;">
<span style="color: #606060; font-weight: bold; font-size: 18px;">
100
</span>
</span>
</td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Arial, Helvetica, sans-serif;font-weight: 300; font-size: 14px;line-height:24px;"><span style="font-weight: bold;">lorem ipsum </span><span style="color: #e4001b; font-weight: bold; font-size: 18px;">lorem ipsum</span></td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">
<p>lorem ipsum:</p>
<p><span>lorem ipsum: </span> lorem ipsum</p>
<p><span>lorem ipsum: </span> lorem ipsum</p>
<p><span>lorem ipsum: </span>lorem ipsum</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="640" height="10"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="1280">
<table class="devicewidth" align="center" cellspacing="0" cellpadding="0" border="0" width="640" style="margin:0 auto;">
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="640">
<tr>
<td align="center" width="1280">
Zobacz
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Sample Fiddle..
There are too many extra tables used in your code, although i have updated your code. Please check the updated snippet. Hope it is helpful to you.
<body style="margin:0; padding:0">
<table class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="640">
<table class="devicewidth" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="58" width="640"> </td>
</tr>
<tr>
<td>
<p style="text-align: center">xyz</p>
</td>
</tr>
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="18" width="640"> </td>
</tr>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="350">
<tbody>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:18px; color:#b2b2b2;line-height: 18px;text-align: center;">
Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="40" width="640"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- pierwsza dwójka -->
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="640">
<table class="devicewidth" align="center" cellspacing="0" cellpadding="0" border="0" width="640" style="margin:0 auto;mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;">
<tbody>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td align="left" width="317">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tbody>
<tr>
<td width="640" height="26"> </td>
</tr>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">lorem ipsum</td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Arial, Helvetica, sans-serif;font-weight: 300; font-size: 20px;line-height:24px; color: #606060; font-weight: bold; text-transform: uppercase;">lorem ipsum </td>
</tr>
<tr>
<td width="640" height="25"> </td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300; color: #606060;">Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="640" height="25"> </td>
</tr>
</tbody>
</table>
</td>
<td align="left" width="1" valign="middle">
<span style="width:1px; height:20px; background:#000; display:block;"></span>
</td>
<td width="317" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="317">
<tbody>
<tr>
<td align="left" width="640">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tbody>
<tr>
<td width="640" height="26"> </td>
</tr>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">lorem ipsum
<span style="color: red;text-decoration: line-through;">
<span style="color: #606060; font-weight: bold; font-size: 18px;">
100
</span>
</span>
</td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Arial, Helvetica, sans-serif;font-weight: 300; font-size: 14px;line-height:24px;"><span style="font-weight: bold;">lorem ipsum </span><span style="color: #e4001b; font-weight: bold; font-size: 18px;">lorem ipsum</span></td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">
<p>lorem ipsum:</p>
<p><span>lorem ipsum: </span> lorem ipsum</p>
<p><span>lorem ipsum: </span> lorem ipsum</p>
<p><span>lorem ipsum: </span>lorem ipsum</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="640" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="1280">
<table class="devicewidth" align="center" cellspacing="0" cellpadding="0" border="0" width="640" style="margin:0 auto;">
<tbody>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td align="center" width="1280">
Zobacz
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
A line created with <hr> is (always) horizontal.
BUT, you can simply add a right border at the left column or a left border at the right column of the table.
Your css could look like this:
table tr td:first-child {
border-right: 1px solid #000000;
}
So every first cell in a row, gets a right border. To ensure you don't have gaps between rows you may also want to add the following attributes to your table:
table {
border-collapse: collapse;
border-spacing: 0;
}
I started making a email from a default Mailchimp layout, the "1:3 Column - Full Width" one.
When testing it on diferent devices, I realized that on mobile email client apps (Gmail, Yahoo, etc.), the area marked below is not displayed full width, when should.
I'm unable to find the mistake, I didn't touch any of the responsive code from the default layout.
-Thanks for your time.
Here is the code:
.templateContainer {
max-width: 600px !important;
}
.mcnImageCalendar {
max-width: 100% !important;
height: auto;
display: block;
}
#media only screen and (min-width:768px) {
.templateContainer {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
.columnWrapper {
max-width: 100% !important;
width: 100% !important;
}
}
<table>
<tbody>
<tr>
<td align="center" valign="top" class="templateColumns">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer">
<tr>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Try following code, u need to mention min-width and max-width
.templateContainer {
max-width: 600px !important;
}
.mcnImageCalendar {
max-width: 100% !important;
height: auto;
display: block;
}
#media only screen and (max-width: 768px) and (min-width: 481px) {
.templateContainer {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
.columnWrapper {
max-width: 100% !important;
width: 100% !important;
}
}
<table>
<tbody>
<tr>
<td align="center" valign="top" class="templateColumns">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer">
<tr>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
First - not every email clients use media queries. For example gmail don't. So Your email won't be responsive on gmail and many email clients like Outlook etc. I create my last email template for shop about year ago so do not remember every behavior but this is great tool https://litmus.com .
And what I remember - use only inline styles and tables in template. Good luck because creating email template is a terrible work :)
How can I align these tables to centered when it hits mobile?
I need to do this without media queries to support the Gmail mobile app.
The HTML code is from an actionrocket codepen, but i don't know what will make the tables centered on mobile with breaking the desktop view
http://codepen.io/actionrocket/pen/EoCLH
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ededed">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style=" display:block; max-width:640px !important;" bgcolor="#ffffff">
<tr>
<td>
<table id="holder" class="wrapper" border="0" cellspacing="0" cellpadding="0" style="width:100%; max-width:640px !important;" align="center">
<tr><td align="center">
<!--[if mso]>
<table id="outlookholder" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td>
<![endif]-->
<!--[if (IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="640" align="center"><tr><td>
<![endif]-->
<!--2 column-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="320" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="20"></td>
<td width="280" bgcolor="#ededed">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img style="display:block" border="0" src="http://placehold.it/100x100" width="100" height="100" alt=""/></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#454545; text-align:center;">Module title goes here</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#454545; text-align:center;">Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table width="160" border="0" cellspacing="0" cellpadding="0" class="w300" bgcolor="#a3a3a3">
<tr>
<td width="15"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:16px; line-height:20px; color:#ffffff; text-align:center;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
<a style="color:#FFFFFF; text-decoration:none;" href="#" target="_blank">Call to Action</a>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
</td>
<td width="15"></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
</table>
</td>
<td width="20"></td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table width="320" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td width="20"></td>
<td width="280" bgcolor="#ededed">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img style="display:block" border="0" src="http://placehold.it/100x100" width="100" height="100" alt=""/></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#454545; text-align:center;">Module title goes here</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#454545; text-align:center;">Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table width="160" border="0" cellspacing="0" cellpadding="0" class="w300" bgcolor="#a3a3a3">
<tr>
<td width="15"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:16px; line-height:20px; color:#ffffff; text-align:center;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
<a style="color:#FFFFFF; text-decoration:none;" href="#" target="_blank">Call to Action</a>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
</td>
<td width="15"></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
</td>
<td width="20"></td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr></table>
<!--[if mso]>
</td></tr></table>
<![endif]-->
<!--[if IE]>
</td></tr></table>
<![endif]-->
</td></tr></table>
</td></tr></table>
You'll struggle to do this for Gmail. Because the containing tables for each column are aligned left you cannot override them to certain. Your best alternative is to force the desktop view for Gmail users or creating the email with Gmail & Outlook in mind and then use CSS with media queries to allow for iOS users.
Modules with new design
Don't use tables for design
I do not think you should use tables for design, see Why not use tables for layout in HTML? If you are going to use tables, you should use the CSS properties, such as:
display: table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;
MDN css display
Don't use inline styles
Also I see you are using inline CSS styling. See What's so bad about in-line CSS? Simply, maintaining your code gets really hard and frustrating.
Module solution
I used css-stylesheets (handy thing). In my opinion I have not used any hard to understand css-properties. Positioning is done with text-align center. (inline elements get position centered). Added padding and margin to make thins have a little more space. Used box-sizing: border-box; to maintain size even if I add padding.
width 100px + padding-top: 20px would normally be a size of 120px; with box-sizing you maintain the 100px.
How is this even mobile friendly?
Ah, glad you asked. I use an inline-block element on the module wrapper.
Actually I called the section class for .module. With the inline-block display property the elements wrap. So if there is a lot of width on the page the modules will be displayed next to one another. If there is little they will be displayed under one another.
.module {
display: inline-block;
background-color: #ddd;
width: 300px;
height: 300px;
padding-top: 30px;
box-sizing: border-box;
font-family: arial;
text-align: center;
margin: 5px;
}
.module img {
display: block;
margin: 0 auto;
width: 100px;
}
.module h1 {
font-weight: normal;
}
.invers {
border: none;
background-color: #aaa;
padding: 10px 20px;
font-size: 1em;
color: white;
cursor: pointer;
}
<div class="wrapper">
<section class="module">
<img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
<h1>Module title goes here</h1>
<p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
<button class="invers">Call to Action</button>
</section>
<section class="module">
<img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
<h1>Module title goes here</h1>
<p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
<button class="invers">Call to Action</button>
</section>
<br>
<h1>HERE is what happens if the screen gets small:</h1>
<section class="module">
<img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
<h1>Module title goes here</h1>
<p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
<button class="invers">Call to Action</button>
</section>
<br>
<section class="module">
<img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
<h1>Module title goes here</h1>
<p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
<button class="invers">Call to Action</button>
</section>
</div>
I have a email template table with another table inside it for a two column width style layout. Problem is that the table is rendering correctly in all but outlook 365. What's weird is that in outlook online it renders out fine. I'm completely stumped and need some help.
Code is:
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" style="background-color: #414d7e;" width="600"><!--section-5-->
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="break2" style="background-color: #ffffff; border-collapse: collapse;" width="296">
<tbody>
<tr>
<td><img src="https://admin.gurgl.co.uk/site_assets/warwick_windows/images/warwick-installed-vertical-window.jpg" style="margin: 0; border: 0; padding: 0; display: block; vertical-align: middle;" /></td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="break2" width="296" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="25"><img alt="" height="1" src="https://admin.gurgl.co.uk/site_assets/warwick_windows/images/spacer.gif" title="" width="1" /></td>
<td valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td height="10"><img alt="" height="1" src="https://admin.gurgl.co.uk/site_assets/warwick_windows/images/spacer.gif" title="" width="1" /></td>
</tr>
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="editable" data-selector="td.editable" style="font-family: 'Arial', sans-serif; font-size: 23px; color: #ffffff; line-height: 1.1; padding-top: 10px;">Our Vertical Sliders include</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="20"><img alt="" height="1" src="https://admin.gurgl.co.uk/site_assets/warwick_windows/images/spacer.gif" title="" width="1" /></td>
</tr>
<tr>
<td><img alt="" height="3" src="https://admin.gurgl.co.uk/site_assets/warwick_windows/images/white-line.jpg" title="" width="30" /></td>
</tr>
<tr>
<td class="editable" data-selector="td.editable">
<ul style="padding-top: 20px; margin-top: 2px; color: #ffffff; font-family: 'Arial', sans-serif; sans-serif; font-size: 16px; color: #ffffff; line-height: 26px; list-style-type: none;">
<li>• 10 Day turn around</li>
<li>• 10% off your first order</li>
<li>• 7 Colours from stock</li>
<li>• Timeless Elegance looks</li>
<li>• Built in Security bar</li>
<li>• Made in our Sheffield Factory</li>
</ul>
</td>
</tr>
<tr>
<td height="15"><img alt="" height="1" src="https://admin.gurgl.co.uk/site_assets/warwick_windows/images/spacer.gif" title="" width="1" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td width="20"><img alt="" height="1" src="https://admin.gurgl.co.uk/site_assets/warwick_windows/images/spacer.gif" title="" width="1" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" class="break2" style="background-color: #ffffff;" width="600">
<tbody>
<tr>
<td height="100" style="width: 100%; display: block; font-family: Arial, sans-serif; font-size: 26px; text-align:center;" width="600">We match any like for like quote</td>
</tr>
<tr>
<!--[if mso]>
<td align="center">
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.warwicktradewindows.co.uk/products.php?cat=118" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="0%" stroke="0" fillcolor="#414d7e">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
Read more
</center>
</v:roundrect>
</td>
<![endif]-->
<![if !mso]>
<td style="width: 100%; display: block; font-family: Arial, sans-serif; font-size: 19px; text-align:center;" width="600">Read more</td>
</td>
<![endif]>
</tr>
<tr>
<td height="30"><img alt="" height="1" src="https://admin.gurgl.co.uk/site_assets/warwick_windows/images/spacer.gif" title="" width="1" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--section-5--end-->
</tbody>
Fiddle is here: https://jsfiddle.net/fsc71og6/