HTML Email Footer Not Rendering Correctly on Desktop (Gmail) - html

I'm an HTML/CSS newbie and am using a free program called Topol.io to create an HTML footer for an email I'm going to send (in EMMA).
On the Topol site, in Preview mode, it looks correct on both desktop and mobile (2 rows of four buttons across on desktop, one stacked column of buttons on mobile).
However, when I send a test email to myself (in Gmail, on desktop), the buttons are stacked instead of in two rows of 4.
Can someone point out what's wrong with my code? I know it's something to do with the screen size code but I'm not just sure exactly what the change is.
Here's the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if !mso]><!-->
<style type="text/css">
#media only screen and (max-width:480px) {
#-ms-viewport {
width: 320px;
}
#viewport {
width: 320px;
}
}
</style>
<!--<![endif]-->
<!--[if mso]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings></xml><![endif]-->
<!--[if lte mso 11]><style type="text/css"> .outlook-group-fix { width:100% !important; }</style><![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">
#import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
#media only screen and (min-width:480px) {
.mj-column-per-25 {
width: 25% !important;
}
}
</style>
</head>
<body style="background: #FFFFFF;">
<div class="mj-container" style="background-color:#FFFFFF;">
<!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"> <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<table role="presentation" cellpadding="0" cellspacing="0" style="background:#7784C3;font-size:0px;width:100%;" border="0">
<tbody>
<tr>
<td>
<div style="margin:0px auto;max-width:600px;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:26px 0px 26px 0px;">
<!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:150px;"> <![endif]-->
<div class="mj-column-per-25 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/new-parent-baby/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Programs</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/contact-us/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Contact</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:150px;"> <![endif]-->
<div class="mj-column-per-25 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/class-calendar/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Schedule</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/curriculum/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Preschool</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:150px;"> <![endif]-->
<div class="mj-column-per-25 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/class-calendar/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Events</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/what-we-do/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">About Us</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:150px;"> <![endif]-->
<div class="mj-column-per-25 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/birthdays/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Parties</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/blog/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:17px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Blog</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td></tr></table> <![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]> </td></tr></table> <![endif]-->
Thank you in advance!!

Related

HTML Email: Iphone clients are adding spacing underneath images with the more content I add. How do I fix this?

The more content I add the bigger the white spaces are. I tested this theory when I started deleting sections and noticed the spacing got smaller. My email is way bigger then this btw, this is just a snippet. This sucks because there's a deadline for this tomorrow for me to submit so any help would be appreciated
<body style="Margin:0;padding:0;min-width:100%;background-color:#FFFFFF;">
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body {background-color:#dde0e1!important;}
body, table, td, p, a {font-family: sans-serif, Arial, Helvitica!important;}
</style>
<![endif]-->
<center style="width: 100%;table-layout: fixed;background-color:#FFFFFF;padding-bottom: 40px;">
<div style="max-width: 600px;background-color: #fafdfe;box-shadow: 0 0 10px rgba(0, 0, 0, .2);">
<div style="font-size: 0px;color: #953192;line-height: 1px;mso-line-height-rule:exactly;display: none;max-width: 0px;max-height: 0px;opacity: 0;overflow: hidden;mso-hide:all;">
A Follow up to our conversation
</div>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-spacing:0;">
<tr>
<td style="padding:0;">
<![endif]-->
<table align="center" style="border-collapse:collapse; table-layout:fixed; border-spacing:0;font-family: 'Raleway', Arial, sans-serif, Helvitica!important;background-color: #FFFFFF;Margin:0;padding:0;width: 100%;max-width: 600px;" role="presentation">
<!-- START LOGO -->
<tr>
<td style="padding: 0;Margin: 0;">
<table align="center" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-spacing: 0;background-color: #fafdfe;" role="presentation">
<tr>
<td style="text-align: center;">
<div>
<img style="display: block; line-height: 0;" src="http://ibb.co.com/images/Oxbryta_Main_Banner4cae03d152df13c8.jpg" width="600" border="0" alt="Fashion Nova Logo" title="Brand Logo">
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- END LOGO -->
<!-- START SHOWCASE -->
<tr>
<td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;">
<tr>
<td width="100%" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0; max-width: 600px;" role="presentation">
<tr>
<td style="padding-top:0;padding-bottom:0;width:100%;max-width:600px;text-align:center; line-height: 0;">
<div>
<img align="top" src="http://ibb.co.com/images/Showcased30db973e177738b.jpg" alt="logo" width="600" style="border-width:0;display: block; " border="0">
</div>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- SHOWCASE -->
<!-- START SHOWCASE FOOTER -->
<tr>
<td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0; background-color: #953192;">
<table width="100%" style="border-spacing:0; max-width: 600px;" role="presentation">
<td style="text-align: center; padding-top: 16px; padding-bottom: 16px; border-right: 1px solid #FFFFFF;">
<a style="text-decoration: none; font-weight: bold; font-size: 14px; color: #FFFFFF;Margin:0;padding: 0;" href="https://www.google.com">Important Safety Information</a>
</td>
<td style="text-align: center; padding-top: 16px; padding-bottom: 16px; ">
<a style="text-decoration: none; font-weight: bold; font-size: 14px; color: #FFFFFF; Margin: 0; padding: 0;" href="https://www.google.com">Full Prescribing Information</a>
</td>
</table>
</td>
</tr>
<!-- END SHOWCASE FOOTER -->
<!-- START CUSTOMER CONTENT -->
<tr>
<td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td class="padding content" style="padding-top:28px;padding-right:47px;padding-bottom:15px;padding-left:48px;width:100%;text-align:left;">
<p style="color:#000000;font-size:16px;font-weight: 500; color: #333;">Dear</p>
<p style="color:#000000;font-size:16px;font-weight: 500; color: #333;">Thank you for meeting with me to talk about Oxbryta. The materials below may help your patients as they start their treatment journey on Oxbryta.</p>
<p style="color:#000000;font-size:16px;font-weight: 500;color: #333;">You can find links to the resources we discussed below. If you have any questions, please don't hesitate to reach out.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END CUSTOMER CONTENT -->
<!-- START 1ST TWO COLUMNS ROW 1 -->
<tr>
<td style="padding-top:35px;padding-right:0;padding-bottom:15px;padding-left:0;">
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td class="two-columns" style="padding-right:0;padding-left:0;font-size:0;text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td width="280" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<![endif]-->
<table class="column" style="border-spacing:0;vertical-align:top;width:100%;max-width:280px;display:inline-block;" role="presentation">
<tr>
<td class="padding" style="padding-top: 0;padding-right: 0;padding-bottom: 20px;padding-left: 52px;">
<table class="content" style="border-spacing:0;text-align: left;" role="presentation">
<tr>
<td>
<img src="http://ibb.co.com/images/01_columnafad21be3a944f8d.jpg" width="280" alt="" style="border-width:0;width:100%;max-width:280px;height:auto;display:block;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td><td width="320" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<![endif]-->
<table class="column" style="border-spacing:0;vertical-align:top;width:100%;max-width:320px;display:inline-block;" role="presentation">
<tr>
<td class="padding" style="padding-top: 0;padding-right: 43px;padding-bottom: 0px;padding-left: 0;">
<table class="content" style="border-spacing:0;text-align: left;" role="presentation">
<tr>
<td style="padding-top: 0;padding-right: 10px;padding-bottom: 20px;padding-left: 0;">
<p style="font-size: 22px;font-weight: bold; color: #953192; Margin: 0;padding-bottom: 20px;">Getting Started on Oxbryta Brochure</p>
<p style="font-size: 15px; font-weight: 600; margin: 0; padding-bottom: 0px;">A guide to help educate your patients about Oxbryta. what to expect during the first 30 days, and points of discussion for follow-up appointments</p>
</td>
</tr>
<tr>
<td align="left" style="margin-right: 62px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-spacing:0;">
<tr>
<td align="center" style="border-radius:4px;" bgcolor="#277fd2">
<a href="https://www.google.com" target="_blank"><img src="http://ibb.co.com/images/Download_bannerdbaadb5db3d11822.jpg" alt="">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<!-- 1ST END TWO COLUMNS ROW 1 -->

How to fix or normalise MJML output for Mailchimp?

So, I'm working on developing a newsletter using the MJML framework (which is pretty great by the way), which I'd ideally like to distribute using our company Mailchimp account. I'm by no means married to using MC but our infrastructure uses their forms and for any number of other reasons we'd rather keep MC than switch.
The issue I'm beginning to run into is that the different email platforms seem to be processing the HTML output by the MJML in different ways. Putsmail seems to render closest to my expectations, but Mailchimp and inexplicably Mailjet each have their own separate rendering issues.
With Mailchimp, the main issue I have is that my hero section is rendered incorrectly in Outlook 365, with the image incorrectly placed. I am sure this is a Mailchimp issue as Outlook renders the Putsmail and Mailjet sections correctly. So, what I am wondering is what is making MC choke on my HTML and how can I compensate for this?
EDIT:
Trimmed HTML of the Relevant Section:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
</title>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a { padding:0; }
body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-
size-adjust:100%; }
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
p { display:block;margin:13px 0; }
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">
#import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
#media only screen and (min-width:480px) {
.mj-column-per-66 { width:66.66666666666666% !important; max-width: 66.66666666666666%; }
.mj-column-per-33 { width:33.33333333333333% !important; max-width:
33.33333333333333%; }
.mj-column-per-100 { width:100% !important; max-width: 100%; }
.mj-column-per-25 { width:25% !important; max-width: 25%; }
.mj-column-per-75 { width:75% !important; max-width: 75%; }
}
</style>
<style type="text/css">
#media only screen and (max-width:480px) {
table.full-width-mobile { width: 100% !important; }
td.full-width-mobile { width: auto !important; }
}
</style>
</head>
<body style="background-color:#d7dde5;">
<div
style="background-color:#d7dde5;"
>
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:399.99999999999994px;"
>
<![endif]-->
<div
class="mj-column-per-66 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tr>
<td
align="left" style="font-size:0px;padding:10px 25px;padding-top:0;padding-bottom:0px;word-break:break-word;"
>
<div
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:11px;line-height:1;text-align:left;color:#000000;"
><span style="font-size: 11px">[[HEADLINE]]</span></div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td
class="" style="vertical-align:top;width:199.99999999999997px;"
>
<![endif]-->
<div
class="mj-column-per-33 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tr>
<td
align="right" style="font-size:0px;padding:10px 25px;padding-top:0;padding-bottom:0px;word-break:break-word;"
>
<div
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:11px;line-height:1;text-align:right;color:#000000;"
><span style="font-size: 11px">[[PERMALINK_LABEL]]</span></div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
>
<tbody>
<tr>
<td>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:199.99999999999997px;"
>
<![endif]-->
<div
class="mj-column-per-33 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:0px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
>
<tbody>
<tr>
<td style="width:125px;">
<img
alt="GreenTec Capital Logo" height="auto" src="https://drive.google.com/uc?id=1oACJyNhnHMAqDTNlQCne1-Y4feLhCwZi" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="125"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td
class="" style="vertical-align:top;width:399.99999999999994px;"
>
<![endif]-->
<div
class="mj-column-per-66 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:0px;word-break:break-word;"
>
<div
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;"
>Portfolio UpdatesInvestment Opportunities</div></td></tr></table></div><!--[if mso | IE]></td></tr></table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0;font-size:0;mso-line-height-rule:exactly;">
<v:image
style="border:0;height:300px;mso-position-horizontal:center;position:absolute;top:0;width:600px;z-index:-3;" src="https://drive.google.com/uc?id=1aQ2X43Qm0RqYJMGQfpOgUKXYGcIEe8pu" xmlns:v="urn:schemas-microsoft-com:vml"
/>
<![endif]-->
<div
style="margin:0 auto;max-width:600px;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tr
style="vertical-align:top;"
>
<td
background="https://drive.google.com/uc?id=1aQ2X43Qm0RqYJMGQfpOgUKXYGcIEe8pu" style="background:#ffffff url(https://drive.google.com/uc?id=1aQ2X43Qm0RqYJMGQfpOgUKXYGcIEe8pu) no-repeat center center / cover;background-position:center center;background-repeat:no-repeat;padding:0px;vertical-align:top;" height="300"
>
<!--[if mso | IE]>
<table
border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
>
<tr>
<td style="">
<![endif]-->
<div
class="mj-hero-content" style="margin:0px auto;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"
>
<tr>
<td style="" >
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"
>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;padding-top:125px;padding-bottom:10px;word-break:break-word;"
>
<div
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:14px;line-height:1;text-align:center;color:#ffffff;"
><span style="font-size: 30px; line-height: 30px;">GreenTec Capital Partners</span><br/><br/>Investor Newsletter</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
<![endif]-->
Garbled Mailchimp HTML for the Same Section:
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head><title></title><!--[if !mso]><meta http-equiv="x-ua-compatible" content="IE=edge">
<!--
<![endif]--><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--><!--[if lte mso 11]><style>.outlook-group-fix {
width:100% !important;
}
</style>
<![endif]-->
<!--[if !mso]>
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<!--
<style>
</style>
<![endif]-->
<style type="text/css">
#outlook a{
padding:0;}
body{margin:0;
padding:0;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}table,td{
border-collapse:collapse;
mso-table-lspace:0;
mso-table-rspace:0;
}img{border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
-ms-interpolation-mode:bicubic;
}p{display:block;
margin:13px 0;
}#outlook a{padding:0;
}body{
margin:0;
padding:0;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}table,td{
border-collapse:collapse;
mso-table-lspace:0;
mso-table-rspace:0;
}img{
border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
-ms-interpolation-mode:bicubic;
}p{display:block;margin:13px 0;
}#media only screen and (min-width:480px){
.mj-column-per-66{width:66.666666666667% !important;
max-width:66.666666666667%;
}} #media only screen and (min-width:480px){
.mj-column-per-33{
width:33.333333333333% !important;
max-width:33.333333333333%;
}} #media only screen and (min-width:480px){
.mj-column-per-100{
width:100% !important;
max-width:100%;
}} #media only screen and (min-width:480px){
.mj-column-per-25{
width:25% !important;
max-width:25%;}
} #media only screen and (min-width:480px){
.mj-column-per-75{
width:75% !important;
max-width:75%;
}} #outlook a{
padding:0;
}
body{
margin:0;
padding:0;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}table,td{
border-collapse:collapse;
mso-table-lspace:0;
mso-table-rspace:0;
}img{
border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
-ms-interpolation-mode:bicubic;}
p{display:block;
margin:13px 0;}
#media only screen and (min-width:480px){
.mj-column-per-66{
width:66.666666666667% !important;
max-width:66.666666666667%;
}} #media only screen and (min-width:480px){
.mj-column-per-33{
width:33.333333333333% !important;
max-width:33.333333333333%;
}} #media only screen and (min-width:480px){
.mj-column-per-100{
width:100% !important;
max-width:100%;
}} #media only screen and (min-width:480px){
.mj-column-per-25{
width:25% !important;
max-width:25%;
}} #media only screen and (min-width:480px){
.mj-column-per-75{
width:75% !important;
max-width:75%;
}} #media only screen and (max-width:480px){
table.full-width-mobile{
width:100% !important;
}} #media only screen and (max-width:480px){
td.full-width-mobile{
width:auto !important;
}}</style></head>
<body style="background-color: #d7dde5;margin: 0;padding: 0;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;"><div style="background-color:#d7dde5;"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><tbody><tr><td style="border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;">
<tbody>
<tr>
<td style="direction: ltr;font-size: 0px;padding: 20px 0;text-align: center;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:399.99999999999994px;"><![endif]--><div class="mj-column-per-66 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align: top;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;" width="100%"><tr><td align="left" style="font-size: 0px;padding: 10px 25px;padding-top: 0;padding-bottom: 0px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:11px;line-height:1;text-align:left;color:#000000;"><span style="font-size: 11px">[[HEADLINE]]</span>
</div></td></tr></table></div><!--[if mso | IE]></td><td style="vertical-align:top;width:199.99999999999997px;"><![endif]--><div class="mj-column-per-33 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align: top;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;" width="100%">
<tr>
<td align="right" style="font-size: 0px;padding: 10px 25px;padding-top: 0;padding-bottom: 0px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"> <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:11px;line-height:1;text-align:right;color:#000000;"><span style="font-size: 11px">[[PERMALINK_LABEL]]</span>
</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background: #ffffff;background-color: #ffffff;width: 100%;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;">
<tbody>
<tr>
<td style="border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;">
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> <div style="margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><tbody><tr><td style="direction: ltr;font-size: 0px;padding: 20px 0;text-align: center;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:199.99999999999997px;"><![endif]--><div class="mj-column-per-33 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align: top;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;" width="100%"><tr><td align="center" style="font-size: 0px;padding: 10px 25px;padding-top: 10px;padding-bottom: 0px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse;border-spacing: 0px;mso-table-lspace: 0;mso-table-rspace: 0;"><tbody><tr><td style="width: 125px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><img alt="GreenTec Capital Logo" src="https://drive.google.com/uc?id=1oACJyNhnHMAqDTNlQCne1-Y4feLhCwZi" style="border: 0;display: block;outline: none;text-decoration: none;height: auto;width: 100%;font-size: 13px;line-height: 100%;-ms-interpolation-mode: bicubic;" width="125"></td></tr></tbody></table></td>
</tr></table></div><!--[if mso | IE]></td><td style="vertical-align:top;width:399.99999999999994px;"><![endif]--><div class="mj-column-per-66 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align: top;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;" width="100%"><tr><td align="center" style="font-size: 0px;padding: 10px 25px;padding-top: 10px;padding-bottom: 0px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">Portfolio UpdatesInvestment Opportunities</div></td></tr></table></div><!--[if mso | IE]></td></tr></table>
<![endif]--></td></tr></tbody></table></div>
<!--[if mso | IE]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600">
<tr>
<td style="line-height:0;font-size:0;mso-line-height-rule:exactly;">
<v:image style="border:0;height:300px;mso-position-horizontal:center;position:absolute;top:0;width:600px;z-index:;" src="https://drive.google.com/uc?id=1aQ2X43Qm0RqYJMGQfpOgUKXYGcIEe8pu" xmlns:v="urn:schemas-microsoft-com:vml" />
<![endif]-->
<div style="margin:0 auto;max-width:600px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;">
<tr style="vertical-align:top;">
<td background="https://drive.google.com/uc?id=1aQ2X43Qm0RqYJMGQfpOgUKXYGcIEe8pu" style="background: #ffffff url('https://drive.google.com/uc?id=1aQ2X43Qm0RqYJMGQfpOgUKXYGcIEe8pu') no-repeat center;background-position: center;background-repeat: no-repeat;padding: 0px;vertical-align: top;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;" height="300">
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td><![endif]--><div class="mj-hero-content" style="margin:0px auto;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;margin: 0px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><tr><td style="border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;margin: 0px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><tr><td align="center" style="font-size: 0px;padding: 10px 25px;padding-top: 125px;padding-bottom: 10px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:14px;line-height:1;text-align:center;color:#ffffff;"><span style="font-size: 30px; line-height: 30px;">GreenTec Capital Partners</span><br><br>Investor Newsletter</div></td></tr></table></td></tr></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></table></div><!--[if mso | IE]></td></tr> </table><![endif]-->

How to Send A Complicated Email with Flutter Mailer Package

I am able to send simple HTML emails with the Mailer package (https://pub.dartlang.org/packages/mailer). As in their example, "<h1>Test</h1>\n<p>Hey! Here's some HTML content</p>"works as a simple HTML text:
final message = new Message()
..from = new Address(username, 'Your name')
..recipients.add('destination#example.com')
..ccRecipients.addAll(['destCc1#example.com', 'destCc2#example.com'])
..bccRecipients.add(new Address('bccAddress#example.com'))
..subject = 'Test Dart Mailer library :: 😀 :: ${new DateTime.now()}'
..text = 'This is the plain text.\nThis is line 2 of the text part.'
..html = "<h1>Test</h1>\n<p>Hey! Here's some HTML content</p>";
But what if I wanna create a complex HTML email? For example stripo.email provides templates with HTML code. How can I pass this HTML code as a string for the ..html parameter for the new Message() method?
Here is the HTML code stripo.email website creates for their template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="width:100%;font-family:arial, 'helvetica neue', helvetica, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title>New email</title>
<!--[if (mso 16)]>
<style type="text/css">
a {text-decoration: none;}
</style>
<![endif]-->
<!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]-->
<style type="text/css">
#media only screen and (max-width:600px) {
p,
ul li,
ol li,
a {
font-size: 16px!important
}
h1 {
font-size: 30px!important;
text-align: center
}
h2 {
font-size: 26px!important;
text-align: center
}
h3 {
font-size: 20px!important;
text-align: center
}
h1 a {
font-size: 30px!important
}
h2 a {
font-size: 26px!important
}
h3 a {
font-size: 20px!important
}
.es-menu td a {
font-size: 16px!important
}
.es-header-body p,
.es-header-body ul li,
.es-header-body ol li,
.es-header-body a {
font-size: 16px!important
}
.es-footer-body p,
.es-footer-body ul li,
.es-footer-body ol li,
.es-footer-body a {
font-size: 16px!important
}
.es-infoblock p,
.es-infoblock ul li,
.es-infoblock ol li,
.es-infoblock a {
font-size: 12px!important
}
*[class="gmail-fix"] {
display: none!important
}
.es-m-txt-c,
.es-m-txt-c h1,
.es-m-txt-c h2,
.es-m-txt-c h3 {
text-align: center!important
}
.es-m-txt-r,
.es-m-txt-r h1,
.es-m-txt-r h2,
.es-m-txt-r h3 {
text-align: right!important
}
.es-m-txt-l,
.es-m-txt-l h1,
.es-m-txt-l h2,
.es-m-txt-l h3 {
text-align: left!important
}
.es-m-txt-r img,
.es-m-txt-c img,
.es-m-txt-l img {
display: inline!important
}
.es-button-border {
display: block!important
}
.es-button {
font-size: 20px!important;
display: block!important;
border-width: 10px 0px 10px 0px!important
}
.es-btn-fw {
border-width: 10px 0px!important;
text-align: center!important
}
.es-adaptive table,
.es-btn-fw,
.es-btn-fw-brdr,
.es-left,
.es-right {
width: 100%!important
}
.es-content table,
.es-header table,
.es-footer table,
.es-content,
.es-footer,
.es-header {
width: 100%!important;
max-width: 600px!important
}
.es-adapt-td {
display: block!important;
width: 100%!important
}
.adapt-img {
width: 100%!important;
height: auto!important
}
.es-m-p0 {
padding: 0px!important
}
.es-m-p0r {
padding-right: 0px!important
}
.es-m-p0l {
padding-left: 0px!important
}
.es-m-p0t {
padding-top: 0px!important
}
.es-m-p0b {
padding-bottom: 0!important
}
.es-m-p20b {
padding-bottom: 20px!important
}
.es-mobile-hidden,
.es-hidden {
display: none!important
}
.es-desk-hidden {
display: table-row!important;
width: auto!important;
overflow: visible!important;
float: none!important;
max-height: inherit!important;
line-height: inherit!important
}
.es-desk-menu-hidden {
display: table-cell!important
}
table.es-table-not-adapt,
.esd-block-html table {
width: auto!important
}
table.es-social {
display: inline-block!important
}
table.es-social td {
display: inline-block!important
}
}
#outlook a {
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.es-button {
mso-style-priority: 100!important;
text-decoration: none!important;
}
a[x-apple-data-detectors] {
color: inherit!important;
text-decoration: none!important;
font-size: inherit!important;
font-family: inherit!important;
font-weight: inherit!important;
line-height: inherit!important;
}
.es-desk-hidden {
display: none;
float: left;
overflow: hidden;
width: 0;
max-height: 0;
line-height: 0;
mso-hide: all;
}
</style>
</head>
<body style="width:100%;font-family:arial, 'helvetica neue', helvetica, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
<div class="es-wrapper-color" style="background-color:#F6F6F6;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" color="#f6f6f6"></v:fill>
</v:background>
<![endif]-->
<table cellpadding="0" cellspacing="0" class="es-wrapper" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;">
<tr style="border-collapse:collapse;">
<td valign="top" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" class="es-content" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;">
<table class="es-content-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:20px;Margin:0;">
<!--[if mso]><table width="560"><tr><td width="356" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" class="es-left" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left;">
<tr style="border-collapse:collapse;">
<td width="356" class="es-m-p0r es-m-p20b" valign="top" align="center" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="left" class="es-infoblock es-m-txt-c" style="padding:0;Margin:0;line-height:120%;font-size:12px;color:#CCCCCC;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:12px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:120%;color:#CCCCCC;">Use this area to offer a short preview of your email's content.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]></td><td width="20"></td><td width="184" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="184" align="left" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="right" class="es-infoblock es-m-txt-c" style="padding:0;Margin:0;line-height:120%;font-size:12px;color:#CCCCCC;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:12px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:120%;color:#CCCCCC;"><a target="_blank" href="http://stripo.email" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:12px;text-decoration:underline;color:#2CB543;">View email in your browser</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="es-content" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;">
<table class="es-content-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:20px;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="560" align="center" valign="top" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-bottom:15px;">
<h2 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:24px;font-style:normal;font-weight:normal;color:#333333;">Welcome to the Stripo 2 Columns Template!</h2>
</td>
</tr>
<tr style="border-collapse:collapse;">
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-top:20px;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">Now it’s the time to insert your own content into it by dragging blocks and structures from the side panel to this template area.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="Margin:0;padding-top:20px;padding-bottom:20px;padding-left:20px;padding-right:20px;">
<!--[if mso]><table width="560"><tr><td width="270" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" class="es-left" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left;">
<tr style="border-collapse:collapse;">
<td width="270" class="es-m-p20b" align="left" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">When your email is ready, you can save it or export using one of available methods: to your MailChimp account or as a pure HTML.</p>
</td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-top:20px;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">Currently, our team is working to create customized blocks for you so you could create your emails faster.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]></td><td width="20"></td><td width="270" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" class="es-right" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right;">
<tr style="border-collapse:collapse;">
<td width="270" align="left" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
</tr>
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;padding-top:10px;">
<h3 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:20px;font-style:normal;font-weight:normal;color:#333333;">Image Title Goes Here</h3>
</td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-top:5px;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">You can change the size, layout or link of the downloaded image in the left-hand side menu.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="es-footer" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;background-color:transparent;background-repeat:repeat;background-position:center top;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;">
<table class="es-footer-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-top:20px;padding-left:20px;padding-right:20px;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="560" align="center" valign="top" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:20px;Margin:0;">
<table border="0" width="75%" height="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td style="padding:0;Margin:0px 0px 0px 0px;border-bottom:1px solid #CCCCCC;background:none;height:1px;width:100%;margin:0px;"> </td>
</tr>
</table>
</td>
</tr>
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;padding-top:10px;padding-bottom:10px;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:11px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">Your footer info might be placed here</p>
</td>
</tr>
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;padding-top:10px;padding-bottom:10px;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:11px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">© 2018 Your Company name</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="es-content" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;">
<table class="es-content-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-left:20px;padding-right:20px;padding-bottom:30px;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="560" align="center" valign="top" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td class="es-infoblock" align="center" style="padding:0;Margin:0;line-height:120%;font-size:12px;color:#CCCCCC;">
<a target="_blank" href="http://stripo.email/?utm_source=templates&utm_medium=email&utm_campaign=basic&utm_content=two_columns" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:12px;text-decoration:underline;color:#2CB543;">
<img src="https://ibwhc.stripocdn.email/content/guids/CABINET_9df86e5b6c53dd0319931e2447ed854b/images/64951510234941531.png" alt="" width="125" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;"> </a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
Which results into:

There are 2 aspects to this question.
How to set the stripo html.
How to adapt an html template. (Modify the content to change parts of the template)
To set the template simply do:
message.html =
'''<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[... copy the complete template here ...]
</html>'''
Three quotes (''') instead of one quote (') allows text to span multiple lines.
To keep your code clean, you might want to create a new dart file: mail-template.dart and assign the html-template to a variable. Then include this file and assign the variable.
To replace parts of the template I would use .replaceAll on the template.
var nameFromSomeInput = 'Jane Doe';
var yourHtmlTemplate = '<html>Dear {{NAME}}</html>';
message.html = yourHtmlTemplate.replaceAll('{{NAME}}', nameFromSomeInput);
Note that replaceAll is easy and doesn't depend on any additional libraries. It is however slow. Especially if you replace multiple values by calling replaceAll multiple times.
Consider a template engine like: jinja in such cases.

HTML email font size decrease on mobile because of header navigation

All:
When I include a header navigation bar which is made up of inline jpegs in my html email, the fonts in the rest of the email render incredibly small regardless of my media queries. When I remove the header bar they render fine.
So there is something about the way that I have built the header that is causing this weird issue and I have tried every possible (in my mind) permutation and can't find a fix. Help would be much appreciated.
Here are screen shots of the mobile email with and without the header.
https://ibb.co/g1i9vH
https://ibb.co/fy8W9c
And here is my code:
<!-- Helm Email Template -->
<!DOCTYPE html>
<html>
<head>
<title>*|MC:SUBJECT|*</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MEDIA QUERIES */
#media screen and (max-width: 480px) {
.mobile-hide {
display: none !important;
}
.mobile-center {
text-align: center !important;
}
.text-resp {
font-size: 14px!important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
</style>
<body style="margin: 0 !important; padding: 0 !important; background-color: #ffffff;" bgcolor="#ffffff">
<!-- HIDDEN PREHEADER TEXT -->
<div style="display: none; font-size: 1px; color: #ffffff; line-height: 1px; font-family: Open Sans, Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus dolor aliquid omnis consequatur est deserunt, odio neque blanditiis aspernatur, mollitia ipsa distinctio, culpa fuga obcaecati!
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<!-- Start Header -->
<tr>
<td align="center" style="width: background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="red" height="30">
<tr>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width:99px;" src="https://image.ibb.co/bODCyS/header_menu_men.png" alt="Men">
</td>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width:122px;" src="https://image.ibb.co/gSEwQ7/header_menu_women.png" alt="Women">
</td>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width: 148px;" src="https://image.ibb.co/gc0357/header_logo.png" alt="Helm">
</td>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width: 123px;" src="https://image.ibb.co/iEU7Xn/header_menu_supply.png" alt="Supply">
</td>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width: 108px;" src="https://image.ibb.co/nMdedS/header_menu_sale.png" alt="Sale">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Header -->
<!-- Start Spacer -->
<tr>
<td height="40" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Section 1: Hero Image -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; text-align: center; display:block; line-height:0px; font-size:0px; border:0px; width: 100%;" src="https://image.ibb.co/iTNSXn/content_image_1.jpg" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 1: Hero Image -->
<!-- Start Section 2: Proof Point #1 Image -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; text-align: center; display:block; line-height:0px; font-size:0px; border:0px; width: 100%;" src="https://image.ibb.co/bRxrqH/helm_email_1_section_2_img_1.png" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #1 Image -->
<!-- Start Section 2: Proof Point #1 Copy -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<p class="text-resp" style="font-family:Georgia, Helvetica, Arial; font-size:16px; color:#3d3d3d; line-height:30px;" mc:edit="Paragraph">
HELM boots don’t complete your look, they make it. Every pair has been designed with simplicity in mind, making them perfect for every style and occasion.
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #1 Copy -->
<!-- Start Section 2: Proof Point #2 Image -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; text-align: center; display:block; line-height:0px; font-size:0px; border:0px; width: 100%;" src="https://image.ibb.co/b1zkjc/helm_email_1_section_2_img_2.png" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #2 Image -->
<!-- Start Section 2: Proof Point #2 Copy -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="90%" style=" width: 90%; max-width:400px;">
<tr>
<p class="text-resp" style="width: 90%; max-width:400px; font-family:Georgia, Helvetica, Arial; font-size:16px; color:#3d3d3d; line-height:30px;" mc:edit="Paragraph">
Reliable boots that look good are hard to come by. We combine a timeless aesthetic with the best materials on earth to create boots that are designed to fit your style for years to come.
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #2 Copy -->
<!-- Start Section 2: Proof Point #3 Image -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; text-align: center; display:block; line-height:0px; font-size:0px; border:0px; width: 100%;" src="https://image.ibb.co/hjN2xx/helm_email_1_section_2_img_3.png" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #3 Image -->
<!-- Start Section 2: Proof Point #3 Copy -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="90%" style=" width: 90%; max-width:400px;">
<tr>
<p class="text-resp" style="width: 90%; max-width:400px; font-family:Georgia, Helvetica, Arial; font-size:16px; color:#3d3d3d; line-height:30px;" mc:edit="Paragraph">
We want you to love your first pair of HELM boots. We offer free shipping and free exchanges until you find that perfect pair. And of course, returns are on us too.
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #3 Copy -->
<!-- Start Spacer -->
<tr>
<td height="80" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Section 3: Video -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img class="g-img" style="margin-left: auto; margin-right: auto; display:block; line-height:0px; font-size:0px; border:0px; width: 100%; max-width: 600px;" src="https://image.ibb.co/huJZCn/content_image_2.jpg" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 3: Video -->
<!-- Start Spacer -->
<tr>
<td height="40" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Section 3: Video Copy -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="90%" style=" width: 90%; max-width:400px;">
<tr>
<p class="text-resp" style="width: 90%; max-width:400px; font-family:Georgia, Helvetica, Arial; font-size:16px; color:#3d3d3d; line-height:30px;" mc:edit="Paragraph">
Some say clothes make the man, we think it’s the boots. Our boots give men confidence from the ground up, confidence to take steps they’ve never taken before.
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 3: Video Copy -->
<!-- Start Spacer -->
<tr>
<td height="80" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Section 4: Shop Muller Teak -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; display:block; line-height:0px; font-size:0px; border:0px; max-width: 450px; width: 100%" src="https://image.ibb.co/m9QZdS/content_image_3.jpg" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 4: Shop Muller Teak -->
<!-- Start Spacer -->
<tr>
<td height="80" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Footer Jargon -->
<tr>
<td align="left" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="90%" style=" width: 90%; max-width:400px;">
<tr>
<p style=" padding: 0 5%; width: 90%; max-width:600px; font-family:Georgia, Helvetica, Arial; font-size:14px; color:#3d3d3d; line-height:22px;" mc:edit="Paragraph">
Copyright © 2018 HELM Boots. All rights reserved.<br>You are receiving this email because you signed up at www.helmboots.com
</p>
<p style=" padding: 0 5%; width: 90%; max-width:600px; font-family:Georgia, Helvetica, Arial; font-size:14px; color:#3d3d3d; line-height:22px;" mc:edit="Paragraph">
HELM Boots<br> 1200 East 11th St. <br>Suite 101 <br>Austin, TX 78701
</p>
<p style=" padding: 0 5%; width: 90%; max-width:600px; font-family:Georgia, Helvetica, Arial; font-size:14px; color:#3d3d3d; line-height:22px;" mc:edit="Paragraph">
<a style="text-decoration: none; color: #3d3d3d;" href="*|UNSUB|*">Unsubscribe from this list</a> <a style="text-decoration: none; color: #3d3d3d;" href="#">Update subscription preferences</a>
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Footer Jargon -->
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>

How do I make title of cell left aligned but center the rest of content?

I have two side by side table cells which stack when triggered by a media query for a HTML newsletter. I want the headlines "Be Ready" and "Stay Organized" to left align when the responsive code fires but the "margin: 0px auto" causes all of the content to center. Is there a way to get these to stay left aligned? If I move them out of the table data cell from the rest of the content, everything messes up.
The "Stay Organized" and "Be Ready" headlines are centered when the code is responsive. I need them left aligned instead.
This is what it's supposed to look like on mobile: http://imgur.com/vT3XhJ6
Any help is appreciated.
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
table td {border-collapse:collapse;}
table[class=tblPreHeaderLinks] {
width: 100% !important;
height: 25px !important;
clear: both !important;
float: none !important;
}
.appleLinks2 a {
color:#333333 !important;
text-decoration: none !important;
}
/* CLIENT-SPECIFIC STYLES */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .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, a{-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{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* RESET STYLES */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body{height:100% !important; margin:0; padding:0; width:100% !important;}
/* iOS BLUE LINKS */
.appleBody a {color:#68440a; text-decoration: none;}
.appleFooter a {color:#999999; text-decoration: none;}
/* MOBILE STYLES */
#media screen and (max-width: 525px) {
body[yahoo] .block_td {display: block;}
.appleLinks2 a {
color:#545861 !important;
text-decoration: none !important;
}
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
div[class="mobilecontent"]{
display: block !important;
max-height: none !important;
}
/* ALLOWS FOR FLUID TABLES */
table[class="wrapper"]{
width:100% !important;
}
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
td[class="mobile-hide"]{
display:none;}
img[class="mobile-hide"]{
display: none !important;
}
img[class="img-max"]{
max-width: 100% !important;
width: 100% !important;
height:auto !important;
}
a.learnMore {
display: block;
text-align: center;
}
/* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */
td[class="section-padding"]{
padding: 10px 15px 5px 15px !important;
}
/* FULL-WIDTH TABLES */
table[class="responsive-table"]{
width:100%!important;
}
td[class="weatherTEXT"]{
font-size: 23px !important;
line-height: 27px !important;
}
td[class="weatherTEXT2"]{
font-size: 17px !important;
line-height: 21px !important;
}
}
</style>
</head>
<body yahoo="fix" style="margin: 0; padding: 0;" bgcolor="#f6f4f5">
<style type="text/css">
body { width: 100% !important; }
</style>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapper" style="border:1px solid #e2e0e0;">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="640" class="wrapper" bgcolor="#f6f4f5">
<tr>
<td align="center">
<!--BODY-->
<table border="0" cellpadding="0" cellspacing="0" width="640" class="wrapper" bgcolor="#f6f4f5" align="center">
<tbody><tr>
<td width="640" align="center" bgcolor="#ffffff" class="section-padding" >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td bgcolor="#ffffff" align="center" style="padding: 5px 0px 5px 0px;" class="section-padding">
<table border="0" cellpadding="0" cellspacing="0" width="640" class="responsive-table" align="center">
<tbody>
<tr><!--MOVABLE INK-->
<td>
<table border="0" cellpadding="0" cellspacing="0" width="640" class="wrapper" bgcolor="#ffffff" align="center">
<tbody><tr>
<td style="padding: 15px 15px 5px 15px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="290" class="block_td" style="margin:0px auto;">
<table cellpadding="0" cellspacing="0" border="0" >
<tr>
<td align="left" style="font-family: Ariel, Arial, Helvetica, sans-serif; font-size: 22px; line-height: 26px; color:#002663;padding:0px 0px 25px 0px;" colspan="2">
<b>Be Ready.</b>
</td>
</tr>
<td rowspan="3" valign="top" width="57" style="padding-right:10px;;">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Phone-35x73.jpg" width="35" height="73" alt="House getting hit by a fallen tree" border="0">
</td>
<td valign="top" align="left">
<table cellpadding="0" cellspacing="0" border="0" style="padding: -5px 0px 0px 0px;">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; line-height:17px; padding-left:0px;">
<b>Download our app:</b>
</td>
</tr>
<tr>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">
<table cellpadding="2" cellspacing="2" border="0">
<tr>
<td style="valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">Take pictures of damage</td>
</tr>
<tr>
<td valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">Submit your claim</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style=" padding-top:2px;padding-bottom:35px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td class="mobile-hide">
<img src="http://www.movable-ink-7850.com/p/rp/aa8600496aa4ae32.png?MM_webID=%%WebID%%" alt="House getting hit by a fallen tree">
</td>
</tr>
<tr>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="padding-right:35px;">
<!--[if !mso 9]><!-->
<div class="mobilecontent" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;" align="center">
<img src="http://www.movable-ink-7850.com/p/rp/aa8600496aa4ae32.png?MM_webID=%%WebID%%" border="0" alt="House getting hit by a fallen tree">
</div>
<!--<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top" width="290" class="block_td" style="margin:auto;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: Ariel, Arial, Helvetica, sans-serif; font-size: 22px; line-height: 26px; color:#002663;padding:0px 0px 25px 0px;" colspan="2">
<b>Stay Organized.</b>
</td>
</tr>
<tr>
<td rowspan="3" valign="top" width="60" style="padding-right:10px;">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Icon-Devices-50x50.jpg" alt="" border="0">
</td>
<td valign="top" align="left">
<table cellpadding="0" cellspacing="0" border="0" style="padding: -5px 0px 0px 0px;">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; line-height:17px; padding-left:0px;">
<b>Visit eService today:</b>
</td>
</tr>
<tr>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">
<table cellpadding="2" cellspacing="2" border="0">
<tr>
<td valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;"><span class="appleLinks2">24/7 access</span></td>
</tr>
<tr>
<td valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">Manage your policy online</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top:2px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td class="mobile-hide">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Button-Sign-In-70x19.jpg">
</td>
</tr>
<tr>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="padding-top: 30px; padding-right:40px;">
<!--[if !mso 9]><!-->
<div class="mobilecontent" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;" align="center">
<a href="https://www.libertymutual.com/home-insurance/home-coverages-and-benefits/home-insurance-benefits/property-replacement-service?MM_webID=%%WebID%%"><img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Button-Sign-In-139x38.jpg" width="139" height="38" border="0" alt="House getting hit by a fallen tree">
</div>
<!--<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="padding: 15px 15px 20px 15px;" class="tdLine">
<table width="100%" align="center" cellpadding="0" cellspacing="0" class="tblLine">
<tr>
<td style="line-height:1px; font-size:1px; background-color:#f6f4f5" class="tdLineActual"> </td>
</tr>
</table> <!-- tblLine -->
</td> <!-- tdLine -->
</tr>
</tbody></table>
</td>
</tr><!--END OF MOVABLE INK-->
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table><!--END OF BODY-->
</td>
</tr>
</table>
</td>
</tr>
</table><!--END OF CONTAINER-->
</body>
</html>

However i dont recommend to use nested tables but for your structure added one more table for desired results: demo
<table width="80%" border="0" align="center" cellspacing="0" cellpadding="0">