Skip to content

Instantly share code, notes, and snippets.

@ojas

ojas/email.html

Last active October 24, 2016 21:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ojas/8e8993f5822f72cd66b1addb84c9d6b4 to your computer and use it in GitHub Desktop.
Save ojas/8e8993f5822f72cd66b1addb84c9d6b4 to your computer and use it in GitHub Desktop.
Download ZIP
Hubspot Email Rendering Issue in iOS Mail
Raw
email.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title></title>
<meta property="og:title" content="">
<meta name="twitter:title" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css" id="hs-inline-css">
/*<![CDATA[*/
/* everything in this node will be inlined */
/* ==== Page Styles ==== */
body, #backgroundTable {
background-color: #f2f2f2; /* Use body to determine background color */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#templateTable {
width: 600px;
background-color: #ffffff;
-webkit-font-smoothing: antialiased;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
color:#444444;
display:block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
h1, .h1 {
font-size:26px;
}
h2, .h2 {
font-size:20px;
}
h3, .h3 {
font-size:15px;
}
h4, .h4 {
font-size:13px;
}
h5, .h5 {
font-size:11px;
}
h6, .h6 {
font-size:10px;
}
/* ==== Header Styles ==== */
#headerTable {
background-color: #f2f2f2;
color:#444444;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size:10px;
line-height:120%;
text-align:right;
border-collapse: separate !important;
padding-right: 0px;
}
#headerTable a:link, #headerTable a:visited, /* Yahoo! Mail Override */ #headerTable a .yshortcuts /* Yahoo! Mail Override */{
font-weight:normal;
text-decoration:underline;
}
/* ==== Template Wrapper Styles ==== */
#contentCell {
padding: 10px 20px;
background-color: #f2f2f2;
}
#contentTableOuter {
border-collapse: separate !important;
background-color: #ffffff;
box-shadow: 0px 1px rgba(0, 0, 0, 0.1);
padding: 0px;
}
#contentTableInner {
width: 600px;
}
/* ==== Body Styles ==== */
.bodyContent {
color:#444444;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 15px;
line-height:150%;
text-align:left;
}
/* ==== Column Styles ==== */
table.columnContentTable {
border-collapse:separate !important;
border-spacing:0;
background-color: #ffffff;
}
td[class~="columnContent"] {
color:#444444;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size:15px;
line-height:120%;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
}
/* ==== Footer Styles ==== */
#footerTable {
background-color: #f2f2f2;
}
#footerTable a {
color: #999999;
}
#footerTable {
color:#999999;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size:12px;
line-height:120%;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
text-align:center;
}
#footerTable a:link, #footerTable a:visited, /* Yahoo! Mail Override */ #footerTable a .yshortcuts /* Yahoo! Mail Override */{
font-weight:normal;
text-decoration:underline;
}
.hs-image-social-sharing-24 {
max-width: 24px;
max-height: 24px;
}
/* ==== Standard Resets ==== */
.ExternalClass{
width:100%;
} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
} /* Force Hotmail to display normal line spacing */
body, table, td, p, a, li, blockquote{
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td {
mso-table-lspace:0pt;
mso-table-rspace:0pt;
} /* Remove spacing between tables in Outlook 2007 and up */
img {
vertical-align: bottom;
-ms-interpolation-mode:bicubic;
} /* Allow smoother rendering of resized image in Internet Explorer */
/* Reset Styles */
body {
margin:0;
padding:0;
}
table {
border-collapse:collapse !important;
}
body, #backgroundTable, #bodyCell{
height:100% !important;
margin:0;
padding:0;
width:100% !important;
}
a:link, a:visited {
border-bottom: none;
}
/* iOS automatically adds a link to addresses */
/* Style the footer with the same color as the footer text */
#footer a {
color: #999999;;
-webkit-text-size-adjust: none;
text-decoration: underline;
font-weight: normal
}
/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
/* ==== Mobile Styles ==== */
/* Constrain email width for small screens */
@media screen and (max-width: 650px) {
table[id="backgroundTable"] {
width: 95% !important;
}
table[id="templateTable"] {
max-width:600px !important;
width:100% !important;
}
table[id="contentTableInner"] {
max-width:600px !important;
width:100% !important;
}
/* Makes image expand to take 100% of width*/
img {
width: 100% !important;
height: auto !important;
}
#contentCell {
padding: 10px 10px !important;
}
#headerTable {
padding-right: 0.0px !important;
}
#contentTableOuter {
padding: 0.0px !important;
}
}
@media only screen and (max-width: 480px) {
/* ==== Client-Specific Mobile Styles ==== */
body, table, td, p, a, li, blockquote{
-webkit-text-size-adjust:none !important;
} /* Prevent Webkit platforms from changing default text sizes */
body{
width:100% !important;
min-width:100% !important;
} /* Prevent iOS Mail from adding padding to the body */
/* ==== Mobile Reset Styles ==== */
td[id="bodyCell"] {
padding:10px !important;
}
/* ==== Mobile Template Styles ==== */
table[id="templateTable"] {
max-width:600px !important;
width:100% !important;
}
table[id="contentTableInner"] {
max-width:600px !important;
width:100% !important;
}
/* ==== Image Alignment Styles ==== */
h1, .h1 {
font-size:26px !important;
line-height:125% !important;
}
h2, .h2 {
font-size:20px !important;
line-height:125% !important;
}
h3, .h3 {
font-size:15px !important;
line-height:125% !important;
}
h4, .h4 {
font-size:13px !important;
line-height:125% !important;
}
h5, .h5 {
font-size:11px !important;
line-height:125% !important;
}
h6, .h6 {
font-size:10px !important;
line-height:125% !important;
}
.hide {
display:none !important;
} /* Hide to save space */
/* ==== Body Styles ==== */
td[class="bodyContent"] {
font-size:16px !important;
line-height:145% !important;
}
/* ==== Footer Styles ==== */
td[id="footerTable"]{
padding-left: 0px !important;
padding-right: 0px !important;
font-size:12px !important;
line-height:145% !important;
}
/* ==== Image Alignment Styles ==== */
table[class="alignImageTable"] {
width: 100% !important;
}
td[class="imageTableTop"] {
display: none !important;
/*padding-top: 10px !important;*/
}
td[class="imageTableRight"] {
display: none !important;
}
td[class="imageTableBottom"] {
padding-bottom: 10px !important;
}
td[class="imageTableLeft"] {
display: none !important;
}
/* ==== Column Styles ==== */
td[class~="column"] {
display: block !important;
width: 100% !important;
padding-top: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
}
td[class~=columnContent] {
font-size:14px !important;
line-height:145% !important;
padding-top: 10px !important;
padding-right: 10px !important;
padding-bottom: 10px !important;
padding-left: 10px !important;
}
#contentCell {
padding: 10px 0px !important;
}
#headerTable {
padding-right: 0.0px !important;
}
#contentTableOuter {
padding: 0.0px !important;
}
}
/*]]>*/
</style>
<!-- http://www.emailon@cid.com/blog/details/C13/ensure_that_your_entire_email_is_rendered_by_default_in_the_iphone_ipad -->
<!-- -->
<!-- -->
<!-- _/ _/ _/ _/_/_/ _/ -->
<!-- _/ _/ _/ _/ _/_/_/ _/ _/_/_/ _/_/ _/_/_/_/ -->
<!-- _/_/_/_/ _/ _/ _/ _/ _/_/ _/ _/ _/ _/ _/ -->
<!-- _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ -->
<!-- _/ _/ _/_/_/ _/_/_/ _/_/_/ _/_/_/ _/_/ _/_/ -->
<!-- _/ -->
<!-- _/ -->
<!-- -->
<!-- Extra White Space! -->
<!-- -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<meta name="generator" content="HubSpot"><meta name="viewport" content="width=device-width, initial-scale=1"></head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="background-color:#f2f2f2; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; height:100% !important; margin:0; padding:0; width:100% !important" bgcolor="#f2f2f2" height="100% !important" width="100% !important">
<!-- Preview text (text which appears right after subject) -->
<!-- The backgroundTable table manages the color of the background and then the templateTable maintains the body of
the email template, including preheader & footer. This is the only table you set the width of to, everything else is set to
100% and in the CSS above. Having the width here within the table is just a small win for Lotus Notes. -->
<!-- Begin backgroundTable -->
<table align="center" bgcolor="#f2f2f2" border="0" cellpadding="0" cellspacing="0" height="100% !important" width="100% !important" id="backgroundTable" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important; background-color:#f2f2f2; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; height:100% !important; margin:0; padding:0; width:100% !important">
<tbody><tr>
<td align="center" valign="top" id="bodyCell" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; height:100% !important; margin:0; padding:0; width:100% !important" height="100% !important" width="100% !important"> <!-- When nesting tables within a TD, align center keeps it well, centered. -->
<!-- Begin Template Container -->
<!-- This holds everything together in a nice container -->
<table border="0" cellpadding="0" cellspacing="0" id="templateTable" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important; width:600px; background-color:#ffffff; -webkit-font-smoothing:antialiased" width="600" bgcolor="#ffffff">
<tbody><tr>
<td align="center" valign="top" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt">
<!-- Begin Template Preheader -->
<div class="header-container-wrapper">
</div><table border="0" cellpadding="0" cellspacing="0" width="100%" id="headerTable" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color:#f2f2f2; color:#444444; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:10px; line-height:120%; text-align:right; border-collapse:separate !important; padding-right:0px" bgcolor="#f2f2f2" align="right">
<tbody><tr>
<td align="left" valign="top" class="bodyContent" width="100%" colspan="12" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; color:#444444; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:15px; line-height:150%; text-align:left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important">
<tbody><tr>
<td valign="top" colspan="12" width="100.0%" class=" column" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; width:100.0%; text-align:left; padding:0; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:15px; line-height:1.5em; color:#444444" align="left">
<div class="widget-span widget-type-email_view_as_web_page " style="" data-widget-type="email_view_as_web_page">
<div style="padding-top: 15px; font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: right; font-size: 9px; line-height: 1.34em; color: #999999">
Not rendering correctly? View this email as a web page <a class="hubspot-mergetag" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; color:#999999; text-decoration:underline; white-space:nowrap" data-viewaswebpage="true" href="#" data-hs-link-id="0" target="_blank">here</a>.
</div>
</div><!--end widget-span -->
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="left" valign="top" class="bodyContent" width="100%" colspan="12" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; color:#444444; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:15px; line-height:150%; text-align:left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important">
<tbody><tr>
<td valign="top" colspan="12" width="100.0%" class=" column" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; width:100.0%; text-align:left; padding:0; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:15px; line-height:1.5em; color:#444444; padding:0px 30px 0px 30px" align="left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important">
<tbody><tr>
<td align="left" valign="top" class="bodyContent" width="100%" colspan="12" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; color:#444444; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:15px; line-height:150%; text-align:left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important">
<tbody><tr>
<td valign="top" colspan="12" width="100.0%" class=" column" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; width:100.0%; text-align:left; padding:0; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:15px; line-height:1.5em; color:#444444" align="left">
<div class="widget-span widget-type-rich_text " style="" data-widget-type="rich_text">
<div class="layout-widget-wrapper">
<div id="hs_cos_wrapper_module_14417735328781837" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"><br><img src="//cdn2.hubspot.net/hub/515194/hubfs/B2B_New_Brand_Logos/stratfor-tagline_copy.png?width=145&amp;height=52&amp;name=stratfor-tagline_copy.png" alt="" title="stratfor-tagline_copy.png" width="145" height="52" style="vertical-align:bottom; -ms-interpolation-mode:bicubic; margin:10px 30px" hspace="30" vspace="10"></div>
</div><!--end layout-widget-wrapper -->
</div><!--end widget-span -->
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--end header wrapper -->
</tbody></table>
<!-- End Template Preheader -->
</td>
</tr>
<tr>
<td align="center" valign="top" id="contentCell" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; padding:10px 20px; background-color:#f2f2f2" bgcolor="#f2f2f2">
<!-- Begin Template Wrapper -->
<!-- This separates the preheader which usually contains the "open in browser, etc" content
from the actual body of the email. Can alternatively contain the footer too, but I choose not
to so that it stays outside of the border. -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="contentTableOuter" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:separate !important; background-color:#ffffff; box-shadow:0px 1px rgba(0, 0, 0, 0.1); padding:0px; border:1px solid #cccccc; border-bottom:1px solid #acacac" bgcolor="#ffffff">
<tbody><tr>
<td align="center" valign="top" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt">
<div class="body-container-wrapper">
</div><table border="0" cellpadding="0" cellspacing="0" id="contentTableInner" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important; width:600px" width="600">
<tbody><tr>
<td align="left" valign="top" class="bodyContent" width="100%" colspan="12" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; color:#444444; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:15px; line-height:150%; text-align:left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important">
<tbody><tr>
<td valign="top" colspan="12" width="100.0%" class=" column" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; width:100.0%; text-align:left; padding:0; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:15px; line-height:1.5em; color:#444444; background-color:#ffffff; padding:10px 50px 50px 50px; border-color:#ffffff" align="left" bgcolor="#ffffff">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important">
<tbody><tr>
<td align="left" valign="top" class="bodyContent" width="100%" colspan="12" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; color:#444444; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:15px; line-height:150%; text-align:left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important">
<tbody><tr>
<td valign="top" colspan="12" width="100.0%" class=" column" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; width:100.0%; text-align:left; padding:0; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:15px; line-height:1.5em; color:#444444; padding:30px 0px 30px 0px" align="left">
<div class="widget-span widget-type-rich_text " style="" data-widget-type="rich_text">
<div class="layout-widget-wrapper">
<div id="hs_cos_wrapper_module_146799201624021740" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"><div style="text-align: center;"><span style="font-size: 28px;"><em><strong><span style="font-family: georgia, palatino;">Thank you for contacting us</span></strong></em></span></div></div>
</div><!--end layout-widget-wrapper -->
</div><!--end widget-span -->
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="left" valign="top" class="bodyContent" width="100%" colspan="12" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; color:#444444; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:15px; line-height:150%; text-align:left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important">
<tbody><tr>
<td valign="top" colspan="12" width="100.0%" class=" column" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; width:100.0%; text-align:left; padding:0; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:15px; line-height:1.5em; color:#444444" align="left">
<div class="widget-span widget-type-raw_html " style="" data-widget-type="raw_html">
<div class="layout-widget-wrapper">
<div id="hs_cos_wrapper_module_146799215127524169" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_raw_html" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="raw_html"><hr size="5" color="#CCCCCC" width="75"></div>
</div><!--end layout-widget-wrapper -->
</div><!--end widget-span -->
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="left" valign="top" class="bodyContent" width="100%" colspan="12" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; color:#444444; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:15px; line-height:150%; text-align:left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important">
<tbody><tr>
<td valign="top" colspan="12" width="100.0%" class=" column" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; width:100.0%; text-align:left; padding:0; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:15px; line-height:1.5em; color:#444444; padding:10px 30px 10px 30px" align="left">
<div class="widget-span widget-type-rich_text " style="" data-widget-type="rich_text">
<div class="layout-widget-wrapper">
<div id="hs_cos_wrapper_module_144177553727710543" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"><p style="margin-bottom: 1em; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%"><span style="font-family: verdana, geneva;">Dear FirstName,&nbsp;</span></p>
<p style="margin-bottom: 1em; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%"><span style="font-family: verdana, geneva;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p>
<p style="margin-bottom: 1em; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%">&nbsp;</p>
<p style="margin-bottom: 1em; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%"><span style="font-family: verdana, geneva;"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></span></p></div>
</div><!--end layout-widget-wrapper -->
</div><!--end widget-span -->
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--end body wrapper -->
</tbody></table>
</td>
</tr>
</tbody></table>
<!-- End Template Wrapper -->
</td>
</tr>
<tr>
<td align="center" valign="top" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt">
<!-- Begin Template Footer -->
<div class="footer-container-wrapper">
</div><table border="0" cellpadding="0" cellspacing="0" width="100%" id="footerTable" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important; background-color:#f2f2f2; color:#999999; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:12px; line-height:120%; padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px; text-align:center" bgcolor="#f2f2f2" align="center">
<tbody><tr>
<td align="left" valign="top" class="bodyContent" width="100%" colspan="12" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; color:#444444; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:15px; line-height:150%; text-align:left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important">
<tbody><tr>
<td valign="top" colspan="12" width="100.0%" class=" column" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; width:100.0%; text-align:left; padding:0; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:15px; line-height:1.5em; color:#444444" align="left">
<div class="widget-span widget-type-email_can_spam " style="" data-widget-type="email_can_spam">
<p style="margin-bottom: 1em; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; font-family:Geneva, Verdana, Arial, Helvetica, sans-serif; text-align:center; font-size:12px; line-height:1.34em; color:#999999; display:block" align="center"><span style="font-family: verdana, geneva; font-size: 14px;">Copyright ©2016. All rights reserved.</span></p>
<p id="footer" style="margin-bottom: 1em; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; font-family:Geneva, Verdana, Arial, Helvetica, sans-serif; text-align:center; font-size:12px; line-height:1.34em; color:#999999; display:block" align="center"><span style="font-family: verdana, geneva; font-size: 14px;">Stratfor&nbsp; |&nbsp;P.O. Box 92529 &nbsp; &nbsp;Austin, &nbsp;Texas &nbsp;&nbsp;78709-2529, &nbsp;USA</span></p>
<p style="margin-bottom: 1em; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-align:center" align="center"><span style="color: #808080; font-size: 14px; font-family: verdana, geneva;"><a href="http://lp.stratfor.com/hs/manage-preferences/unsubscribe-all-test?v=1&amp;d=eyJlYSI6ImV4YW1wbGVAZXhhbXBsZS5jb20ifQ%3D%3D" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; cursor:pointer; color:#808080; text-decoration:none" data-hs-link-id="0" target="_blank"></a><a target="_blank" href="http://lp.stratfor.com/hs/manage-preferences/unsubscribe-test?v=1&amp;d=eyJlYSI6ImV4YW1wbGVAZXhhbXBsZS5jb20ifQ%3D%3D" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-decoration:underline; whitespace:nowrap; color:#999999" data-unsubscribe="true" data-hs-link-id="0">UNSUBSCRIBE</a></span></p>
</div><!--end widget-span -->
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--end footer wrapper -->
<tr>
<td style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt"></td>
</tr>
</tbody></table>
<!-- End Template Footer -->
</td>
</tr>
</tbody></table>
<!-- End Template Container -->
</td>
</tr>
</tbody></table>
</body></html>
Raw
preview.md

iOS Basic

iOS Responsive

Chrome

Raw
styles_believed_to_be_causing_the_problem.md

Huge logo

                /* Makes image expand to take 100% of width*/
                img {
                    width: 100% !important;
                    height: auto !important;
                }

Removing padding on the body

                /* ==== Column Styles ==== */

                td[class~="column"] {
                    display: block !important;
                    width: 100% !important;
                    padding-top: 0 !important;
                    padding-right: 0 !important;
                    padding-bottom: 0 !important;
                    padding-left: 0 !important;
                }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment