Create a Discussion

Multi Column Responsive Design for Gmail App!

Jeff Dunton posted 2015-11-10 15:33:08

Hey all,

This is my first time posting here, and I'm looking to get some feedback. I have developed a code that can stack multi columns (2, 3 or more) within the Gmail App. The code renders beautifully across all the major email clients (from desktop to mobile), and is fairly straight forward and clean. Please have a look!

Thanks,

Jeff Dunton
Senior Custom Template Developer
Constant Contact
jdunton@constantcontact.com

Randy Brooks replied 2015-11-10 15:45:11

Looks nice. Great job!

Reply to Randy Brooks

Jeff Dunton replied 2015-11-10 16:09:19

Thanks Randy!

Sam Sexton replied 2015-11-10 16:40:28

The link doesn't work for me!

Reply to Sam Sexton

Jeff Dunton replied 2015-11-10 17:42:48

hmmm....not sure why that isn't working....here is the full code that you can paste into builder:

<head>

@media only screen and (max-width:639px) {

*[class~="OneColumnMobile"] {
width:100% !important;
display:block !important;
margin-left:auto !important;
margin-right:auto !important;
}

*[class~="OneColumnMobile"] img {
min-width:1px !important;
max-width:100% !important;
height:auto !important;
}

*[class~="MobCenter"] {
display:block !important;
float:none !important;
margin-left:auto !important;
margin-right:auto !important;
}

*[class~="MobCenterText"] {
text-align:center !important;
}

*[class~="MobLeft"] {
display:block !important;
float:left !important;
}

*[class~="MobLeftText"] {
text-align:left !important;
}

*[class~="MobLeftImage"] img {
float:left !important;
}

*[class~="MobRight"] {
display:block !important;
float:right !important;
}

*[class~="MobRightText"] {
text-align:right !important;
}

*[class~="MobRightImage"] img {
float:right !important;
}

*[class~="MobFullWidth"] {
float:none !important;
margin-left:auto !important;
margin-right:auto !important;
width:100% !important;
max-width:100% !important;
}

*[class~="MobAutoWidth"] {
width:auto !important;
}

*[class~="MobAutoWidthImage"] img {
width:auto !important;
}

*[class~="MobNoMaxWidthImage"] img {
max-width:none !important;
}

*[class~="MobNoMinWidth"] {
min-width:none !important;
}

*[class~="MobTopPad"] {
padding-top:12px !important;
}

*[class~="MobTopMar"] {
margin-top:12px !important;
}

*[class~="MobBottomPad"] {
padding-bottom:15px !important;
}

*[class~="MobBottomMar"] {
margin-bottom:15px !important;
}

*[class~="MobLeftPad"] {
padding-left:12px !important;
}

*[class~="MobLeftMar"] {
margin-left:12px !important;
}

*[class~="MobRightPad"] {
padding-right:12px !important;
}

*[class~="MobRightMar"] {
margin-right:12px !important;
}

*[class~="MobNoSidePad"] {
padding-left:0px !important;
padding-right:0px !important;
}

*[class~="MobNoSideMar"] {
margin-left:0px !important;
margin-right:0px !important;
}

*[class~="MobInlineBlockLinks"] a {
display:inline-block !important;
}

*[class~="MobBlock"] {
display:block !important;
}

*[class~="MobInline"] {
display:inline !important;
}

*[class~="MobInlineBlock"] {
display:inline-block !important;
}

*[class~="MobTable"] {
display:table !important;
}

*[class~="MobRow"] {
display:table-row !important;
}

*[class~="MobCell"] {
display:table-cell !important;
}

*[class~="MobHide"] {
display:none !important;
}

*[class~="ContentWidth"] {
width:100% !important;
}

}

html, body {
min-width:100%;
padding:0px;
margin:0px;
}

a {
color:inherit;
}

table, .OneColumnMobile, .CC_NoEdit, .CC_Divider {
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}

th {
vertical-align:top;
}

.OutlookLineHeightFix {
mso-line-height:exactly;
}

.OneColumnMobile img {
min-width:1px;
max-width:100%;
height:auto;
margin-left:auto;
margin-right:auto;
}

</style>

</head>

<div title="Top Content" data-is-visible="false">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" valign="top" class="OuterText OuterContent" style="title:Outer Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; line-height:1.3; color:#ffffff; padding:10px 25px 10px 25px;">
<div>
The sentence after your subject line should grab the reader's attention.<br />
</div>
</td>
</tr>
</table>
</div>

</td>

</tr>
</table>

</td>
<td valign="bottom"><img width="1" height="5" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" /></td>
</tr>
</table>
</div>
</td>
</tr>

</td>

</tr>

<div title="Article">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" class="MainText ArticleOuter" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding:20px 25px 20px 25px;">
<div class="ContentMaxWidth" style="max-width:100%;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="ContentWidth CC_NoEdit" style="width:100%; min-width:100% !important; margin-left:auto; margin-right:auto;">
<tr>
<td align="left" valign="top" class="MainText Content" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding:0px 0px 0px 0px;">
<div>
<div class="HeadingText" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50;">HEADING HERE<br /></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia. Ut metus nibh, mollis eget sapien vitae, iaculis efficitur nisi. In quis pharetra ipsum, a volutpat orci. Sed facilisis convallis quam, eu dictum nibh varius at. Aenean volutpat sodales risus. Lorem ipsum dolor sit amet, consectetur adipiscing.<br />
<br /></div>
<table cellpadding="0" cellspacing="0" border="0" style="width:auto !important; title:Button Border Color; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; border-color: #000000 ;" class="ButtonRound ButtonBGColor CC_NoEdit">
<tr>
<td align="center" valign="top" class="ButtonText Button" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50; padding:8px 25px 8px 25px;">
<div><a href="www.website.com" class="ButtonText" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50;">READ MORE</a></div>
</td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>

<div title="Section Heading">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="SectionHeadingBGColor" style="title:Section Heading Background Color; background-color:#000001; min-width:100% !important;">
<tr>
<td align="left" valign="top" class="SectionHeadingText SectionHeading" style="title: Section Heading Text ; font-family: Segoe UI,Lucida Grande,Tahoma,sans-serif ; font-size: 10pt ; font-weight:bold ; color: #ffffff ; padding: 20px 25px 20px 25px ;">
<div>Section Heading</div>
</td>
</tr>
</table>
</div>

</td>

</tr>

<tr>

<div title="Events Heading">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" class="HeadingText EventsHeading" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50; padding: 0px 0px 0px 0px ;">
<div>HEADING HERE<br /></div>
</td>
</tr>
<tr>
<td align="left" valign="top" class="HeadingText EventsHeading" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50; padding: 0px 0px 0px 0px ;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

<div title="Events Content">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" class="MainText EventsOuter" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 0px 0px 0px 0px ;">
<div class="ContentMaxWidth" style="max-width:100%;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="ContentWidth CC_NoEdit" style="width:100%; min-width:100% !important; margin-left:auto; margin-right:auto;">
<tr>
<td align="left" valign="top" class="MainText EventsContent" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 0px 0px 0px 0px ;">
<div>
<div class="SubheadingText" style="title:Subheading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; font-weight: bold ; color:#2c3e50;">Subheading Here</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia.<br />
<br />
<div class="SubheadingText" style="title:Subheading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; font-weight: bold ; color:#2c3e50;">Subheading Here</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia.<br />
<br />
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>

</td>

</tr>
</table>
</div>

</th><th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="290" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>

<div title="Events Content">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" class="MainText EventsOuter" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 0px 0px 0px 0px ;">
<div class="ContentMaxWidth" style="max-width:100%;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="ContentWidth CC_NoEdit" style="width:100%; min-width:100% !important; margin-left:auto; margin-right:auto;">
<tr>
<td align="left" valign="top" class="MainText EventsContent" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 0px 0px 0px 0px ;">
<div>
<div class="SubheadingText" style="title:Subheading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; font-weight: bold ; color:#2c3e50;">Subheading Here</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia.<br /><br />
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>

<div title="Events Content">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" class="MainText EventsOuter" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 0px 0px 0px 0px ;">
<div class="ContentMaxWidth" style="max-width:100%;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="ContentWidth CC_NoEdit" style="width:100%; min-width:100% !important; margin-left:auto; margin-right:auto;">
<tr>
<td align="left" valign="top" class="MainText EventsContent" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 0px 0px 0px 0px ;">
<div>
<div class="SubheadingText" style="title:Subheading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; font-weight: bold ; color:#2c3e50;">Subheading Here</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia.<br />
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>

</td>

</tr>
</table>
</div>

</th>
</tr>
</table>
</td>
</tr>
</table>

</td>
</tr>

<tr>

<div title="Article w/ Right Image">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="left" class="MainText DoubleOuter" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 10px 10px 10px ;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="370" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>
<td align="left" valign="top" class="MainText DoubleColumn" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 15px 10px 15px ;">
<div>
<div class="HeadingText" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50;">HEADING HERE<br /></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia. Ut metus nibh, mollis eget sapien vitae, iaculis efficitur nisi.<br /><br /></div>
<table cellpadding="0" cellspacing="0" border="0" style="width:auto !important; title:Button Border Color; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; border-color: #000000 ;" class="ButtonRound ButtonBGColor CC_NoEdit">
<tr>
<td align="center" valign="top" class="ButtonText Button" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50; padding:8px 25px 8px 25px;">
<div><a href="www.website.com" class="ButtonText" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50;">READ MORE</a></div>
</td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>

</th><th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="210" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>
<td align="left" valign="top" class="MainText DoubleColumn" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 15px 10px 15px ;">
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile" style="min-width:100% !important;">
<tr>
<td width="1%" valign="top" style="padding: 0px 0px 0px 0px ;">
<div align="center"><img alt="" width="180" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_BlankGrayGrad_4to3.png" style="display:block;min-width:100% !important;" /></div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td align="left" valign="top" class="MainText" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="CC_NoEdit" style="float:left;">
<tr>
<td align="left" valign="top" style="line-height:1px;"><img alt="" width="60" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table><table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="CC_NoEdit" style="float:left;">
<tr>
<td align="left" valign="top" style="line-height:1px;"><img alt="" width="60" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table><table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="CC_NoEdit" style="float:left;">
<tr>
<td align="left" valign="top" style="line-height:1px;"><img alt="" width="60" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table><table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="CC_NoEdit" style="float:left;">
<tr>
<td align="left" valign="top" style="line-height:1px;"><img alt="" width="60" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table><table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="CC_NoEdit" style="float:left;">
<tr>
<td align="left" valign="top" style="line-height:1px;"><img alt="" width="60" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>

</table>
</div>

</th>
</tr>
</table>
</td>
</tr>
</table>
</div>

</table>
</div>

</th><th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="370" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>
<td align="left" valign="top" class="MainText DoubleColumn" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 15px 10px 15px ;">
<div>
<div class="HeadingText" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50;">HEADING HERE<br /></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia. Ut metus nibh, mollis eget sapien vitae, iaculis efficitur nisi.<br /><br /></div>
<table cellpadding="0" cellspacing="0" border="0" style="width:auto !important; title:Button Border Color; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; border-color: #000000 ;" class="ButtonRound ButtonBGColor CC_NoEdit">
<tr>
<td align="center" valign="top" class="ButtonText Button" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50; padding:8px 25px 8px 25px;">
<div><a href="www.website.com" class="ButtonText" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50;">READ MORE</a></div>
</td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>

</th>
</tr>
</table>
</td>
</tr>
</table>
</div>

<div title="Double Article">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" class="MainText DoubleOuter" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 10px 10px 10px ;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="290" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>
<td width="100%" align="left" valign="top" class="MainText DoubleColumn" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 15px 10px 15px ;">
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile" style="min-width:100% !important;">
<tr>
<td width="1%" valign="top" style="padding: 0px 0px 15px 0px ;">
<div align="center"><img alt="" width="260" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_BlankGrayGrad_4to3.png" style="min-width:100% !important;display:block;" /></div>
</td>
</tr>
</table>
<div class="HeadingText" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50;">HEADING HERE<br /></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia. Ut metus nibh, mollis eget sapien vitae, iaculis efficitur nisi.<br /><br /></div>
<table cellpadding="0" cellspacing="0" border="0" style="width:auto !important; title:Button Border Color; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; border-color: #000000 ;" class="ButtonRound ButtonBGColor CC_NoEdit">
<tr>
<td align="center" valign="top" class="ButtonText Button" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50; padding:8px 25px 8px 25px;">
<div><a href="www.website.com" class="ButtonText" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50;">READ MORE</a></div>
</td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>

</th><th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="290" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>
<td align="left" valign="top" class="MainText DoubleColumn" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 15px 10px 15px ;">
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile" style="min-width:100% !important;">
<tr>
<td width="1%" valign="top" style="padding: 0px 0px 15px 0px ;">
<div align="center"><img alt="" width="260" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_BlankGrayGrad_4to3.png" style="min-width:100% !important;display:block;" /></div>
</td>
</tr>
</table>
<div class="HeadingText" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50;">HEADING HERE<br /></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia. Ut metus nibh, mollis eget sapien vitae, iaculis efficitur nisi.<br /><br /></div>
<table cellpadding="0" cellspacing="0" border="0" style="width:auto !important; title:Button Border Color; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; border-color: #000000 ;" class="ButtonRound ButtonBGColor CC_NoEdit">
<tr>
<td align="center" valign="top" class="ButtonText Button" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50; padding:8px 25px 8px 25px;">
<div><a href="www.website.com" class="ButtonText" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50;">READ MORE</a></div>
</td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>

</th>
</tr>
</table>
</td>
</tr>
</table>
</div>

<div title="Triple Article">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" class="MainText TripleOuter" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 15px 10px 15px ;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="190" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>
<td width="100%" align="left" valign="top" class="MainText TripleColumn" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 10px 10px 10px ;">
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile" style="min-width:100% !important;">
<tr>
<td width="1%" valign="top" style="padding: 0px 0px 15px 0px ;">
<div align="center"><img alt="" width="170" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_BlankGrayGrad_4to3.png" style="min-width:100% !important;display:block;" /></div>
</td>
</tr>
</table>
<div class="HeadingText" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50;">HEADING HERE<br /></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia.<br /><br /></div>
<table cellpadding="0" cellspacing="0" border="0" style="width:auto !important; title:Button Border Color; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; border-color: #000000 ;" class="ButtonRound ButtonBGColor CC_NoEdit">
<tr>
<td align="center" valign="top" class="ButtonText Button" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50; padding:8px 25px 8px 25px;">
<div><a href="www.website.com" class="ButtonText" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50;">READ MORE</a></div>
</td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>

</th><th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="190" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>
<td width="100%" align="left" valign="top" class="MainText TripleColumn" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 10px 10px 10px ;">
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile" style="min-width:100% !important;">
<tr>
<td width="1%" valign="top" style="padding: 0px 0px 15px 0px ;">
<div align="center"><img alt="" width="170" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_BlankGrayGrad_4to3.png" style="min-width:100% !important;display:block;" /></div>
</td>
</tr>
</table>
<div class="HeadingText" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50;">HEADING HERE<br /></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia.<br /><br /></div>
<table cellpadding="0" cellspacing="0" border="0" style="width:auto !important; title:Button Border Color; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; border-color: #000000 ;" class="ButtonRound ButtonBGColor CC_NoEdit">
<tr>
<td align="center" valign="top" class="ButtonText Button" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50; padding:8px 25px 8px 25px;">
<div><a href="www.website.com" class="ButtonText" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50;">READ MORE</a></div>
</td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>

</th><th align="left" class="MainText MobBlock MobFullWidth CC_NoEdit" style="font-weight:normal;display:inline-table !important;padding:0px;margin:0px;border:0px;float:left; title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<div>
<table width="190" cellpadding="0" cellspacing="0" border="0" class="MobFullWidth CC_NoEdit">
<tr>
<td width="100%" align="left" valign="top" class="MainText TripleColumn" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C; padding: 10px 10px 10px 10px ;">
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile" style="min-width:100% !important;">
<tr>
<td width="1%" valign="top" style="padding: 0px 0px 15px 0px ;">
<div align="center"><img alt="" width="170" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_BlankGrayGrad_4to3.png" style="min-width:100% !important;display:block;" /></div>
</td>
</tr>
</table>
<div class="HeadingText" style="title:Heading Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:11pt; line-height:1.1; font-weight: bold ; color:#2c3e50;">HEADING HERE<br /></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td align="left" style="height:1px;line-height:1px; padding: 10px 0px 10px 0px ;" class="HeadingDividerPadding">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="CC_NoEdit">
<tr>
<td height="1" align="left" valign="middle" style="height:1px;line-height:1px; title: Heading Divider Color ; background-color: #000000 ; padding-bottom: 1px ;" class="HeadingDivider HeadingDividerBGColor"><img alt="" width="30" height="1" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
</table>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor ex faucibus purus auctor lacinia.<br /><br /></div>
<table cellpadding="0" cellspacing="0" border="0" style="width:auto !important; title:Button Border Color; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; border-color: #000000 ;" class="ButtonRound ButtonBGColor CC_NoEdit">
<tr>
<td align="center" valign="top" class="ButtonText Button" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50; padding:8px 25px 8px 25px;">
<div><a href="www.website.com" class="ButtonText" style="title:Button Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2c3e50;">READ MORE</a></div>
</td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>

</th>
</tr>
</table>
</td>
</tr>
</table>
</div>

</td>

</tr>
</table>

</td>
</tr>

<tr>

<div title="Social Media">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="ContactInfoBGColor" style="title: Contact Info Background Color ; background-color:#ffffff; min-width:100% !important;">
<tr>
<td align="center" class="ContactInfoText ContactInfoOuter" style="title: Contact Info Text ; font-family: Segoe UI,Lucida Grande,Tahoma,sans-serif ; font-size: 9pt ; line-height:1.3 ; color:#131C1C; padding:35px 25px 10px 25px;">
<div class="ContentMaxWidth" style="max-width:100%;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="ContentWidth CC_NoEdit" style="width:100%; min-width:100% !important; margin-left:auto; margin-right:auto;">
<tr>
<td align="center" valign="top" class="ContactInfoText ContactInfo" style="title: Contact Info Text ; font-family: Segoe UI,Lucida Grande,Tahoma,sans-serif ; font-size: 9pt ; line-height:1.3 ; color:#131C1C; padding: 0px 0px 0px 0px ;">
<div>
<b>Company Name</b><br />
Phone | Fax | Email | Website<br />
<table width="1" cellpadding="0" cellspacing="0" border="0" style="display:inline-block !important;width:auto !important;" class="CC_NoEdit">
<tr>
<td align="center" valign="top" class="MainText" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<table width="32" align="left" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile MobAutoWidth">
<tr>
<td width="1%" valign="top" class="SocialMediaIcon" style="padding:10px 5px 0px 5px;">
<div align="center"><a href="www.website.com" class="MainLink" style="title:Main Link; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2929AF;"><img alt="Facebook" width="32" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_SOCIALICON_Facebook.png" style="display:block;max-width:none !important;" /></a></div>
</td>
</tr>
</table>
</td>
<td align="center" valign="top" class="MainText" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<table width="32" align="left" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile MobAutoWidth">
<tr>
<td width="1%" valign="top" class="SocialMediaIcon" style="padding:10px 5px 0px 5px;">
<div align="center"><a href="www.website.com" class="MainLink" style="title:Main Link; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2929AF;"><img alt="Twitter" width="32" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_SOCIALICON_Twitter.png" style="display:block;max-width:none !important;" /></a></div>
</td>
</tr>
</table>
</td>
<td align="center" valign="top" class="MainText" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<table width="32" align="left" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile MobAutoWidth">
<tr>
<td width="1%" valign="top" class="SocialMediaIcon" style="padding:10px 5px 0px 5px;">
<div align="center"><a href="www.website.com" class="MainLink" style="title:Main Link; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2929AF;"><img alt="LinkedIn" width="32" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_SOCIALICON_LinkedIn.png" style="display:block;max-width:none !important;" /></a></div>
</td>
</tr>
</table>
</td>
<td align="center" valign="top" class="MainText" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<table width="32" align="left" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile MobAutoWidth">
<tr>
<td width="1%" valign="top" class="SocialMediaIcon" style="padding:10px 5px 0px 5px;">
<div align="center"><a href="www.website.com" class="MainLink" style="title:Main Link; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2929AF;"><img alt="Pinterest" width="32" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_SOCIALICON_Pinterest.png" style="display:block;max-width:none !important;" /></a></div>
</td>
</tr>
</table>
</td>
<td align="center" valign="top" class="MainText" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<table width="32" align="left" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile MobAutoWidth">
<tr>
<td width="1%" valign="top" class="SocialMediaIcon" style="padding:10px 5px 0px 5px;">
<div align="center"><a href="www.website.com" class="MainLink" style="title:Main Link; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2929AF;"><img alt="YouTube" width="32" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_SOCIALICON_YouTube.png" style="display:block;max-width:none !important;" /></a></div>
</td>
</tr>
</table>
</td>
<td align="center" valign="top" class="MainText" style="title:Main Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:10pt; line-height:1.3; color:#131C1C;">
<table width="32" align="left" cellpadding="0" cellspacing="0" border="0" class="OneColumnMobile MobAutoWidth">
<tr>
<td width="1%" valign="top" class="SocialMediaIcon" style="padding:10px 5px 0px 5px;">
<div align="center"><a href="www.website.com" class="MainLink" style="title:Main Link; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; text-decoration:none; font-weight:bold; line-height:1.3; color:#2929AF;"><img alt="RSS" width="32" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/CS_SOCIALICON_RSS.png" style="display:block;max-width:none !important;" /></a></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>

<div title="Footer">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="FooterBGColor" style="title:Footer Background Color; background-color:#000000; min-width:100% !important;">
<tr>
<td align="center" class="FooterText FooterOuter" style="title:Footer Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; line-height:1.3; color:#ffffff; padding: 7px 25px 7px 25px ;">
<div class="ContentMaxWidth" style="max-width:100%;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="ContentWidth CC_NoEdit" style="width:100%; min-width:100% !important; margin-left:auto; margin-right:auto;">
<tr>
<td align="center" valign="top" class="FooterText Footer" style="title:Footer Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; line-height:1.3; color:#ffffff; text-decoration:none;">
<div>
Optional Text Here<br />
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>

</td>

</tr>
</table>

</td>
</tr>
</table>
</div>

</td>
<td valign="bottom"><img width="1" height="5" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" /></td>
</tr>
</table>
</div>
</td>
</tr>

<div title="Bottom Content" data-is-visible="false">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="min-width:100% !important;">
<tr>
<td align="center" valign="top" class="OuterText OuterContent" style="title:Outer Text; font-family:Segoe UI,Lucida Grande,Tahoma,sans-serif; font-size:9pt; line-height:1.3; color:#ffffff; padding:10px 25px 10px 25px;">
<div>
Copyright © 20XX. All Rights Reserved.<br />
</div>
</td>
</tr>
</table>
</div>

</td>

</tr>
</table>

</td>
<td valign="bottom"><img width="1" height="5" border="0" hspace="0" vspace="0" src="http://img.constantcontact.com/letters/images/1101116784221/S.gif" /></td>
</tr>
</table>
</div>
</td>
</tr>
</table>

</div>
</body>
</html>

Multi Column Responsive Design for Gmail App!

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password