HTML Email background image not displaying full width - html

I'm building a HTML email with two background images. The email has a width of 600px.
Both images have dimensions of 600 x 786px and I've managed to get the first background image to fill the width of the parent table.
However the second image, that has the exact same dimensions as the first isn't displaying well, you can see it's half cut off.
Any guidance would be greatly appreciated.
Code below.
<!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></head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" rightmargin="0" style="margin:0; padding:0">
<!-- /// MSO code to set the DPI at 96 to help resolve DPI scaling issues /// -->
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<style type="text/css">
span.MsoHyperlink, span.MsoHyperlinkFollowed {mso-style-priority:99;color:inherit;}
a {color:inherit; text-decoration:none;}
.ReadMsgBody, .ExternalClass {width:100%;}
.ExternalClass * {line-height:110%;}
body {width:100%!important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
table {border-collapse:collapse!important; mso-table-lspace:0pt; mso-table-rspace:0pt;}
.gmailfix {display:none; display:none!important;}
span > a, sup > a, span > a > sup {color:inherit!important; text-decoration:none;}
.footer span > a {color:#333333!important;}
[office365] button { display: block !important; margin:0 !important; padding:0 !important; }
[office365] div { display: block !important }
[owa] .m-show img { display:none!important; }
/*Responsive Styling*/
#media only screen and (max-width: 480px) {
.MainTable {width:100%!important;min-width:320px!important;}
.main-padding {padding:0px!important;}
html, body {width:100%!important; min-width:100%!important;}
[owa] .m-show img { display:block!important; }
.m-hide, .m-hide * {display:none!important; height:0!important; width:0px!important; visibility:hidden!important; line-height:0px!important; font-size:0px!important;}
.m-show {display:block!important; max-height:none!important;}
.float-left {float:left!important; clear:none!important;}
.float-right {float:right!important; clear:none!important;}
.half-width {width:48%!important; display:inline-block!important;}
.block, .drop, .drop tbody, .drop table, .drop tr {float:none!important; width:100%!important; padding:0!important; display:block!important;}
.center {text-align:center!important;} .align-left {text-align:left!important;} .align-right {text-align:right!important;} .absolute {position:absolute!important;}
table.block, table.drop, .drop table, .drop tbody {display:table!important;}
tr.block, tr.drop, .drop tr {display:table-row!important;}
td.block, td.drop, .drop td {display:table-cell!important;}
.center > img, img.center, .align-left > img, img.align-left, .align-right > img, img.align-right {display:inline-block!important;}
.center table.center, .align-right > table, .align-left > table {display:inline-table!important;}
.background-none {background:transparent!important;}
.background-image-none {background-image:none!important;}
.text-size {line-height:120%!important;} .text-size-10px {font-size:10px!important;}
.text-size-11px {font-size:11px!important;} .text-size-12px {font-size:12px!important;}
.text-size-13px {font-size:13px!important;} .text-size-14px {font-size:14px!important;}
.text-size-15px {font-size:15px!important;} .text-size-16px {font-size:16px!important;}
.text-size-17px {font-size:17px!important;} .text-size-18px {font-size:18px!important;}
.text-size-19px {font-size:19px!important;} .text-size-20px {font-size:20px!important;}
.text-size-21px {font-size:21px!important;} .text-size-22px {font-size:22px!important;}
.text-size-23px {font-size:23px!important;} .text-size-24px {font-size:24px!important;}
.text-size-25px {font-size:25px!important;} .text-size-26px {font-size:26px!important;}
.text-size-27px {font-size:27px!important;} .text-size-28px {font-size:28px!important;}
.text-size-29px {font-size:29px!important;} .text-size-30px {font-size:30px!important;}
.width-100 {width:100%!important; height:auto!important;}
.width-90 {width:90%!important; height:auto!important;}
.width-80 {width:80%!important; height:auto!important;}
.width-70 {width:70%!important; height:auto!important;}
.width-60 {width:60%!important; height:auto!important;}
.width-50 {width:50%!important; height:auto!important;}
.width-40 {width:40%!important; height:auto!important;}
.width-30 {width:30%!important; height:auto!important;}
.width-20 {width:20%!important; height:auto!important;}
.width-0 {width:0px!important; height:auto!important;}
.width-auto {width:auto!important;}
.height-auto {height:auto!important;}
.padding-0 {padding:0!important;} .padding-5 {padding:5px!important;}
.padding-10 {padding:10px!important;} .padding-15 {padding:15px!important;}
.padding-20 {padding:20px!important;} .padding-25 {padding:25px!important;} .padding-30 {padding:30px!important;}
.padding-horz-0 {padding-left:0px !important; padding-right:0px !important;}
.padding-horz-5 {padding-left:5px!important; padding-right:5px!important;}
.padding-horz-10 {padding-left:10px!important; padding-right:10px!important;}
.padding-horz-15 {padding-left:15px!important; padding-right:15px!important;}
.padding-horz-20 {padding-left:20px!important; padding-right:20px!important;}
.padding-horz-25 {padding-left:25px!important; padding-right:25px!important;}
.padding-horz-30 {padding-left:30px!important; padding-right:30px!important;}
.padding-vert-0 {padding-top:0px!important; padding-bottom:0px!important;}
.padding-vert-5 {padding-top:5px!important; padding-bottom:5px!important;}
.padding-vert-10 {padding-top:10px!important; padding-bottom:10px!important;}
.padding-vert-15 {padding-top:15px!important; padding-bottom:15px!important;}
.padding-vert-20 {padding-top:20px!important; padding-bottom:20px!important;}
.padding-vert-25 {padding-top:25px!important; padding-bottom:25px!important;}
.padding-vert-30 {padding-top:30px!important; padding-bottom:30px!important;}
.padding-right-0 {padding-right:0px!important;}
.padding-right-5 {padding-right:5px!important;} .padding-right-10 {padding-right:10px!important;}
.padding-right-15 {padding-right:15px!important;} .padding-right-20 {padding-right:20px!important;}
.padding-right-25 {padding-right:25px!important;} .padding-right-30 {padding-right:30px!important;}
.padding-left-0 {padding-left:0px !important;}
.padding-left-5 {padding-left:5px !important;} .padding-left-10 {padding-left:10px !important;}
.padding-left-15 {padding-left:15px !important;} .padding-left-20 {padding-left:20px !important;}
.padding-left-25 {padding-left:25px !important;} .padding-left-30 {padding-left:30px !important;}
.padding-top-0 {padding-top:0px!important;} .padding-top-5 {padding-top:5px!important;}
.padding-top-10 {padding-top:10px!important;} .padding-top-15 {padding-top:15px!important;}
.padding-top-20 {padding-top:20px!important;} .padding-top-25 {padding-top:25px!important;} .padding-top-30 {padding-top:30px!important;}
.padding-left-25 {padding-left:25px!important;}
.padding-right-25 {padding-right:25px!important;}
.padding-bottom-0 {padding-bottom:0px!important;}
.padding-bottom-5 {padding-bottom:5px!important;} .padding-bottom-10 {padding-bottom:10px !important;}
.padding-bottom-15 {padding-bottom:15px !important;} .padding-bottom-20 {padding-bottom:20px !important;}
.padding-bottom-25 {padding-bottom:25px !important;} .padding-bottom-30 {padding-bottom:30px !important;}
/*Styles Specific to this Email*/
.bg_mob { width:100%!important; height:auto!important; background:url(images/bg_mobile.jpg) no-repeat center #FFFFFF!important; background-size:contain!important; background-position:right top !important;}
</style>
<!--Superscript Styling to apply specific CSS for outlook-->
<!--[if gte mso 9]>
<style type="text/css">
sup {vertical-align: baseline; position: relative; top: -0.4em; font-size:85%;}
</style>
<![endif]-->
<!--[if !mso]><!-->
<style type="text/css">
sup {vertical-align: top; font-size:50%; }
</style>
<!--<![endif]-->
<!--END SUPERSCRIPT STYLING-->
<!--TELEPHONE NUMBER-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" class="main-padding" bgcolor="#ffffff">
<table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px;">
<tbody>
<tr>
<td align="center" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" class="padding-horz-20 padding-top-10" style="padding:0px 43px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="right" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:18px; color:#999999; mso-line-height-rule:exactly;">
888-336-4764
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--NAV BAR-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" class="padding-0" style="padding:0 10px;">
<table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px; margin:0 auto;">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" class="padding-vert-0" style="padding:15px 0;" valign="top">
<!--Logo-->
<table align="left" border="0" cellspacing="0" cellpadding="0" class="align-left">
<tbody>
<tr>
<td style="font-size:17px; line-height:22px; color:#ffffff; padding:0 20px 0px;">
<a href="">
<img src="https://image.ibb.co/kgxmEe/logo.png" alt="tempur" width="140" height="70" style="display:block;" border="0">
</a>
</td>
</tr>
</tbody>
</table>
<!--Menu Start-->
<table align="left" border="0" cellspacing="0" cellpadding="0" class="align-left m-hide">
<tbody>
<tr>
<td class="text-size-13px" style="font-size:17px; line-height:80px; color:#000000; padding:0 42px 0px;">
MATRESSES
</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellspacing="0" cellpadding="0" class="align-left m-hide">
<tbody>
<tr>
<td class="text-size-13px" style="font-size:17px; line-height:80px; color:#000000 padding:0 42px 0px;;">
MATRESSES
</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellspacing="0" cellpadding="0" class="align-left m-hide">
<tbody>
<tr>
<td class="text-size-13px" style="font-size:17px; line-height:80px; color:#000000; padding:0 42px 0px;">
MATRESSES
</td>
</tr>
</tbody>
</table>
<!--Menu End-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--HERO-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" style="padding:0px 0px 20px 0px;">
<table width="640" class="MainTable" border="0" cellspacing="0" cellpadding="0" style="width:640px; margin:0 auto;">
<td height="100" align="left" valign="top" bgcolor="#ffffff" background="https://image.ibb.co/kAmc4e/herobg.png">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:100%;">
<v:fill type="tile" src="https://image.ibb.co/kAmc4e/herobg.png" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px; margin:0 auto;" align="center">
<tbody>
<tr>
<td style="padding:0px 0px 0px 0px;" class="padding-top-10" align="center">
<img src="https://image.ibb.co/dvzyue/herocta.png" alt="hero offer" width="600" class="width-100" style="width:600px;" border="0">
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</table>
</td>
</tr>
</tbody>
</table>
<!--LEGACY-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" style="padding:0px 0px 20px 0px;">
<table width="640" class="MainTable" border="0" cellspacing="0" cellpadding="0" style="width:640px; margin:0 auto;">
<td width="640" height="100" align="left" valign="top" bgcolor="#ffffff" background="https://image.ibb.co/fGSBn9/legacytest.png" style="width:640px;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:100%;">
<v:fill type="tile" src="class="bg_mob" width="640" height="100" align="left" valign="top" bgcolor="#ffffff" background="https://image.ibb.co/f4Cxup/legacytest1.png" style="width:640px;"" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px; margin:0 auto;" align="center">
<tbody>
<tr>
<td style="padding:0px 0px 0px 0px;" class="padding-top-10" align="center">
Legaxy
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</table>
</td>
</tr>
</tbody>
</table>
<!--FIX FOR GMAIL iOS app issues -->
<div class="gmailfix" style="white-space:nowrap; font:15px courier; line-height:0; color:#ffffff; background-color:#ffffff;">
</div>
</body>
</html>


You need to use background-size: 100% 100%; and height:786px and your second image have white background already
So use image without white background and add content or height to second td where you applied background image.


The image is not cut, it has some whitespace in it, and its dimension is 1000x768px https://image.ibb.co/fGSBn9/legacytest.png.
instead use css background-position: top center that will fix the issue. please have a look at the below-working snippet, hope it helps :)
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" style="padding:0px 0px 20px 0px;">
<table width="640" class="MainTable" border="0" cellspacing="0" cellpadding="0" style="width:640px; margin:0 auto;">
<tr>
<td width="640" height="768" align="left" valign="top" style="background: #ffffff url('https://image.ibb.co/fGSBn9/legacytest.png') top center">Legacy</td>
</tr>
</table>
</td>
</tr>
</table>


You need to use background-size: cover; property to fix it. According to the docs
The background-size property specifies the size of the background
images.
There are four different syntaxes you can use with this property:
the keyword syntax ("auto", "cover" and "contain"),
the one-value syntax (sets the width of the image (height becomes "auto"),
the two-value syntax (first value: width of the image, second value: height), - the multiple background syntax (separated with comma).

Related

Responsive html newsletter - mobile issues when sending to different email clients

The following code has several issues when sending all Html5 newsletters I coded.
I received footer code from the client, but it seems that it doesn't work more.
Remaining parts of the newsletters works well.
I copied an empty template mail I usually use to code my htmls.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>xxxxxx/title>
<style>
ul {
list-style-position: inside;
padding-left: 0;
}
a {
color: inherit !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;
}
.content {
width: 100%;
max-width: 600px; !important
}
/* GENERAL STYLE RESETS */
body, #bodyTable { height:100% !important; width:100% !important; margin:0 !important; padding:0 !important; }
table, td { border-collapse:collapse; }
.hyphenate {
/* Careful, this breaks the word wherever it is without a hyphen */
overflow-wrap: break-word;
word-wrap: break-word;
/* Adds a hyphen where the word breaks */
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
/*remove blue links for iOS*/
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 only screen and (max-width: 480px) {
/* MUESTRA ENLACE EN MOVIL */
.bloque{width: 100%; display: block!important; height: 40px!important; vertical-align: middle!important}
.bloque2{width: 100%; display: block!important; vertical-align: middle!important}
.bloque2 table{width: 100% !important;}
table.body {float:left;width:100% !important;padding:0;font-size:13px !important}
.ancho{width:100% !important}
.ancho2{width:100% !important;text-align:center !important}
.ancho3{width:33% !important;margin-bottom:12px !important}
.ancho3_2{width:25% !important;margin-bottom:12px !important}
.anchotlfn{width:26% !important;margin-bottom:12px !important}
.ancho4{width:98% !important}
.anchon{width:50% !important}
.separa{ padding:8px 0 !important}
.iber{margin:20px 0 0 25% !important}
.logo{width:40% !important}
.logo2{width:76% !important}
td.izqui{text-align:left !important}
.verde{width:100% !important;font-size:14px !important}
.gg{width:100% !important;font-size:18px !important}
.verde2{width:100% !important;font-size:13px !important}
.oculto{display:none !important}
.pie{line-height:auto !important;font-size:11px !important}
.pdtop{padding-top:10px!important}
.pdbot{padding-bottom:10px!important}
.pe{width:80% !important;padding-top:3px !important}
.alto{ height:10px !important;}
.centrado{text-align:center !important; padding:5px 0 20px 0 !important;}
.nopad{padding-left: 0px !important}
.izq{text-align:left !important; float:left !important}
}
</style>
</head>
<body bgcolor="#FFFFFF" style="font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#000511">
<!--[if mso]>
<table width="600" border="0" align="center" margin bgcolor="#ffffff" cellpadding="0" cellspacing="0">
<tr>
<td>
<![endif]-->
<table class="content" width="100%" border="0" align="center" bgcolor="#5c881a" cellpadding="0" cellspacing="0" style="margin: 0 auto">
<tr>
<td bgcolor="#FFFFFF"><table width="550" border="0" cellspacing="0" cellpadding="0" class="ancho">
<tr>
<td width="24"> </td>
<td width="502"><table width="75%" border="0" cellspacing="0" cellpadding="0" class="ancho" align="left">
<tr>
<td> </td>
</tr>
<tr>
<td style="color:#262626;font-size:12px;font-family:Arial,Helvetica,sans-serif">Se non riesci a visualizzare correttamente il messaggio, clicca qui</td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="15" class="ancho">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/xxx.jpg" width="100%" border="0" alt="a"></td>
</tr>
<tr>
<td><img src="img/bordo-top.gif" width="100%" border="0" style="display: block;"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="45">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="justify" style="color:#5c881a;font-size:16px;font-family:Arial,Helvetica,sans-serif; line-height: 23px; text-align: justify;">test
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="img/bordo.gif" width="100%" border="0" style="display: block;"></td>
</tr>
<tr>
<td>
<br>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr bgcolor="#5d881a">
<td width="160" height="60" valign="middle" bgcolor="#5d881a" class="bloque pdtop"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="43"><img src="img/tel.gif"></td>
<td valign="middle"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
xxx xxx xxx</td>
</tr>
</tbody>
</table>
</td>
<td width="140" height="60" valign="middle" bgcolor="#5d881a" class="bloque"
style="text-align: left; width:140px; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="43"><img src="img/sito.gif"></td>
<td valign="middle"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
<a href="" target="_blank"
style="color: #ffffff; text-decoration: none">xxxxxxxxx.it</a>
</td>
</tr>
</tbody>
</table>
</td>
<td width="255" height="60" valign="middle" bgcolor="#5d881a" class="bloque"
style="text-align: left; width:255px; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif" >
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="43"><img src="img/mail.gif"></td>
<td valign="middle"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
<a style="color: #ffffff; text-decoration: none"
href="mailto:servizioclienti#iberdrola.it">servizioclienti#xxxxxxxxx.it</a>
</td>
</tr>
</tbody>
</table>
</td>
<td height="60" width="110" valign="middle" bgcolor="#5d881a" class="bloque pdbot"
style="text-align: left; width:110px; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="46"><a href="https://www.facebook.com/xxxxxxxxx/"
target="_blank"><img src="img/fb.gif" border="0"></a></td>
<td width="46"><a href="https://twitter.com/xxxxxxxxx" target="_blank"><img
src="img/tw.gif" border="0"></a></td>
<td><a href="https://www.instagram.com/xxxxxxxxx/" target="_blank"><img
src="img/ig.gif" border="0"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr><td><img src="img/line.gif" width="100%"></td></tr>
<tr><td style="text-align: left; color:#ffffff;font-size:14px;font-family:Arial,Helvetica,sans-serif"><br><br>XXXXX</td></tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<tr>
</table>
<![endif]-->
</body>
</html>
expected mobile visualization screenshot
actual visualization when the mail is sent
Desktop visualization

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]-->

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>

HTML Email Footer Not Rendering Correctly on Desktop (Gmail)

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!!

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">