I am creating an email template and the header section of the email is a code block I took from another site.
The said header code block contains a logo and few text next to it. Here is an image of it.
In the editor of the Email Service Provider I use, the code block is fully visible but when I click on preview, the text dissapears and only the logo is visible like this
Does anyone know why is that.
Here is the code
`
<td class="esd-stripe" align="center">
<table class="es-header-body" align="center" cellpadding="0" cellspacing="0" width="550" style="background-color: #f6f3f0;" bgcolor="#f6f3f0">
<tbody>
<tr>
<td class="esd-structure es-p20" align="left">
<!--[if mso]><table width="560" cellpadding="0"
cellspacing="0"><tr><td width="98" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" class="es-left" align="left">
<tbody>
<tr>
<td width="98" class="es-m-p0r es-m-p20b esd-container-frame" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="esd-block-image es-m-txt-c" style="font-size: 0px;"><a target="_blank" href="https://viewstripo.email"><img src="https://ychxix.stripocdn.email/content/guids/CABINET_d3bb686276c9132ac5465c69a2399624/images/carla_logo.png" alt style="display: block;" width="65"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="20"></td><td width="442" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" align="right">
<tbody>
<tr>
<td width="442" align="left" class="esd-container-frame">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr class="esd-mobile-hidden">
<td align="center" class="esd-block-spacer" height="16"></td>
</tr>
<tr>
<td class="esd-block-menu" esd-tmp-menu-color="#2d0824">
<table cellpadding="0" cellspacing="0" width="100%" class="es-menu">
<tbody>
<tr class="links">
<td align="center" valign="top" width="33%" class="es-p10t es-p10b es-p5r es-p5l"><a target="_blank" href="https://www.carlawainwright.com/" style="color: #169179;"><b>Home<b></a></td>
<td align="center" valign="top" width="33%" class="es-p10t es-p10b es-p5r es-p5l"><a target="_blank" href="https://www.carlawainwright.com/contact" style="color: #169179;"><b>About<b></a></td>
<td align="center" valign="top" width="33%" class="es-p10t es-p10b es-p5r es-p5l"><a target="_blank" href="https://www.carlawainwright.com/about" style="color: #169179;"><b>Contact<b></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
`
I tried to change the font color and backround color to see if that was overlapping the text, but it didnt work.
I have no idea what's going on. The sections show up in preview and test emails, but when I add template to a campaign, suddenly the Contact and Facebook section is gone. WHYYY. It makes no sense why it's just disappearing when I add it to a campaign. This is the section that disappears when I add email template to the campaign. Is something wrong with the tables? I looked at CSS and there's hardly anything.
<!-- Facebook Recommendation -->
<div mc:repeatable="Select" mc:variant="facebook recommendation">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#231C15">
<tr>
<td valign="top" align="center" class="p30-15" style="padding:60px 0px 60px 0px;">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="width:100%;font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="column" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h3 pb20" style="color:#fff;font-family:Roboto, Arial, sans-serif;font-size:40px;line-height:40px;text-align:center;font-weight:bold;padding-bottom:20px;">
<div mc:edit="text_16">Recommend us on Facebook!</div>
</td>
</tr>
<tr>
<td class="text pb20" style="color:#fff;font-family:Roboto, Arial, sans-serif;font-size:15px;line-height:30px;text-align:center;padding-bottom:20px;">
<div mc:edit="text_18">Recommend us on our Facebook page! This ensures we can reach even more people to provide the best possible care during their move! </div>
</td>
</tr>
<!-- Button -->
<tr mc:hideable>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text-button" style="background:#fff;color:#231C15;font-family:Lato, Arial, sans-serif;font-size:14px;line-height:18px;padding:12px 20px;text-align:center;letter-spacing:1px;font-weight:600;text-transform:uppercase;border-radius:22px;">
<div mc:edit="text_19">
<span class="link-white" style="color:#231C15; text-decoration:none;">RECOMMEND US</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- END Button -->
</table>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- Facebook Recommendation -->
<!-- Contact -->
<div mc:repeatable="Select" mc:variant="Contact">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f4f4f4">
<tr>
<td valign="top" align="center" class="p30-15" style="padding:30px 0px 0px 0px;">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="width:100%;font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h3 center pb15" style="color:#000000;font-family:Roboto, Arial, sans-serif;font-size:24px;line-height:32px;font-weight:bold;text-align:center;padding-bottom:10px;">
<div mc:edit="text_37">Contact Us</div>
</td>
</tr>
<tr>
<td class="text-center pb30" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:15px;line-height:30px;text-align:center;padding-bottom:20px;">
<div mc:edit="text_38">Looking to make another move? <br>Give us a call!</div>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom:50px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="column-top" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;">
<table class="center" border="0" cellspacing="0" cellpadding="0" style="text-align:center;">
<tr>
<td class="img" width="50" style="font-size:0pt;line-height:0pt;text-align:left;"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1a994bda-97c5-4ebf-b478-de1e3e2e6d6c.png" width="34" height="34" style="max-width:34px;" border="0" alt="" mc:edit="image_20">
</td>
<td class="text" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:16px;line-height:30px;text-align:left;">
<div mc:edit="text_39">
<strong class="link" style="color:#777777;text-decoration:none;">855-624-4537</strong>
</div>
</td>
</tr>
</table>
</th>
<th class="column-empty2" width="30" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;"></th>
<th class="column-top" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;">
<table class="center" border="0" cellspacing="0" cellpadding="0" style="text-align:center;">
<tr>
<td class="img" width="50" style="font-size:0pt;line-height:0pt;text-align:left;"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/9e146158-5e5d-4d4d-a99e-02f32506799a.png" width="34" height="34" style="max-width:34px;" border="0" alt="" mc:edit="image_21">
</td>
<td class="text" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:16px;line-height:30px;text-align:left;">
<div mc:edit="text_40">
<a target="mailto:service#moveandstore.com" class="link" style="color:#777777;text-decoration:none;"><strong class="link" style="color:#777777;text-decoration:none;">service#moveandstore.com</strong></a>
</div>
</td>
</tr>
</table>
</th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" dir="rtl" style="direction:rtl;">
<tr>
<th class="column" dir="ltr" width="433" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
</th>
<th class="column-empty" dir="ltr" width="40" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;"></th>
<th class="column" dir="ltr" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- END Contact -->
Okay - From my limited knowledge with MailChimp I think I have stumbled across something.
I see in your table you have the mc:repeatable="Select" attribute. From the MailChimp help section - this says that this will be hidden automatically unless a user adds it via the campaign builder.
Add the mc:repeatable attribute to any area that includes an mc:edit attribute to create a content block that can be repeatedly added to a template. Repeatable content areas are hidden by default so they only appear in a template if you add them within the Campaign Builder.
Source: Mailchimp help (create editable content areas with mailchimps template language)
My email is comprised of a set of images - some full-width rows containing a full-width image, while other full-width rows contain two 50%-width images.
The single-asset rows are centering, but the 2-asset rows are not.
Any suggestions as to how to address this?
<table width="100%" bgcolor="#F9F8F8" cellpadding="0" cellspacing="0" border="0" align="center" style="padding:0;margin:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
<!-- SINGLE-WIDE Image, Flush : BEGIN -->
<tr>
<td class="full-width-image" align="center" style="mso-table-lspace:0 !important;mso-table-rspace:0 !important;">
<img src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/0f9cfabb-011b-4af6-9962-0d097a3a884a.jpg" width="800" alt="" border="0" style="width: 100%;max-width: 800px;height: auto;display: block;vertical-align: text-top;" class="img-fullwidth">
</td>
</tr>
<tr>
<td class="full-width-image" align="center" style="mso-table-lspace:0 !important;mso-table-rspace:0 !important;">
<img src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/c3fa45e0-1954-491a-b567-a0f39b19ea15.jpg" width="800" alt="" border="0" style="width: 100%;max-width: 800px;height: auto;display: block;vertical-align: text-top;" class="img-fullwidth">
</td>
</tr>
<!-- SINGLE-WIDE Image: END -->
<!-- DOUBLE-WIDE Image, Flush : BEGIN -->
<tr style="display:block;">
<td class="full-width-image" align="center" style="mso-table-lspace:0 !important;mso-table-rspace:0 !important;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" >
<tr>
<td class="stack-column-center" align="center">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding:0px;text-align:center;">
<img src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/80c28595-a6cc-43e1-9e5c-f581a77064f7.jpg" width="400" alt="" border="0" class="fluid" style="display: block;">
</td>
</tr>
</table>
</td>
<td class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding:0px;text-align:center;">
<img src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/9e708022-b8f2-4528-89b0-95b51dd73caa.jpg" width="400" alt="" border="0" class="fluid" style="display: block;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
My email HTML sets widths for Tables / inside content, and it works well on Mac & Mobile; Windows Outlook, on the other hand, has the Header/Footer content at one width, and the Body Content at another (wider) width.
I've been banging my head trying to figure this out - and am at a loss.
I've searched through S.O. to see if others figured this out, but haven't had any luck there, either.
Any help would be appreciated.
Code below:
<body style="padding:0; margin:0;" bgcolor="#dadada">
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"> Focus on what really matters at work and don't give your feet a second thought when wearing our most popular professional styles: flats, heels and more. </div>
<!-- END PREVIEW TEXT -->
<!-- header wrapper -->
<table width="100%" bgcolor="#F9F8F8" cellpadding="0" cellspacing="0" border="0" style="padding:0;margin:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;table-layout:fixed;">
<tr>
<td align="center">
<table width="600" bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0" border="0" class="width320" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#ffffff;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:14px;min-width:300px !important;">
<tr>
<td>
<table width="2" align="left" cellpadding="0" cellspacing="0" border="0" class="hide" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#ffffff;font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', 'Trebuchet MS', sans-serif;font-size:14px;">
<tr>
<td height="5" valign="middle" style="color:#808080;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:10px;line-height:15px;" mc:edit="preheader"></td>
</tr>
</table>
<table width="100%" align="right" cellpadding="0" cellspacing="0" border="0" class="preheader" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#ffffff;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:14px;text-align:left;">
<!-- preheader -->
<tr>
<td height="30" valign="middle" style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;color:#808080;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:10px;line-height:15px;"> <b>Look forward to Spring with these hot new styles!</b>
<br> Can't see images? <span style="color:#808080; text-decoration:none;">View this in your browser</span>.</td>
</tr>
<!-- end preheader -->
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" bgcolor="#F9F8F8" cellpadding="0" cellspacing="0" border="0" style="padding:0;margin:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
<tr>
<td align="center">
<table bgcolor="#ffffff" width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;" class="width320">
<tr>
<td height="20" width="100%" colspan="3"></td>
</tr>
<!-- spacing -->
<tr>
<td width="2" style="color:#ffffff;font-family:'Gotham A', 'Gotham B', Helvetica, Arial, sans-serif;font-size:14px;" valign="middle" align="center">
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;" class="width280">
<!-- logo -->
<tr>
<td align="center" mc:edit="logo"> <img src="https://gallery.mailchimp.com/f65fdf760c91701e37252f426/images/eee1454a-c0ce-4029-8047-8a13eb4811c3.gif" width="240" border="0" style="max-width:600px;" class="width280" alt="Vionic®">
</td>
</tr>
<!-- end logo -->
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- header nav -->
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#000000" style="height:50px;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;color:#ffffff;">
<tr>
<td width="37" class="hide"></td>
<td align="center" width="525" class="nav-block">
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="height:25px;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-color:#ffffff;" bgcolor="#000000" class="width320nav">
<tr>
<td align="center" style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;font-family:'MrsEavesOT-Roman', 'times new roman', serif;color:#ffffff !important;padding:10px 0;" class="nav-block"><span style="color:#ffffff; text-decoration:none;">SHOP WOMEN</span>
</td>
<td class="hide"> </td>
<td class="nav-block show" width="1" bgcolor="#FFFFFF" style="font-size:0px;line-height:0px;display:none;height:0px;width:0px;max-height:0px;max-width:0px;"></td>
<td align="center" style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;font-family:'MrsEavesOT-Roman', 'times new roman', serif;color:#ffffff !important;padding:10px 0;" class="nav-block"><span style="color:#ffffff; text-decoration:none;">SHOP MEN</span>
</td>
<td class="hide"> </td>
<td class="hide" width="1" bgcolor="#FFFFFF" style="font-size:0px;line-height:0px;display:none;height:0px;width:0px;max-height:0px;max-width:0px;"></td>
<td align="center" style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;font-family:'MrsEavesOT-Roman', 'times new roman', serif;color:#ffffff !important;" class="hide"><span style="color:#ffffff; text-decoration:none;">SUPPORTIVE TECHNOLOGY</span>
</td>
</tr>
</table>
</td>
<td width="37" class="hide"></td>
</tr>
</table>
<!-- end header nav -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- /header wrapper -->
<!-- body wrapper -->
<table width="100%" bgcolor="#F9F8F8" cellpadding="0" cellspacing="0" border="0" style="padding:0;margin:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;"><!-- table-layout:fixed;
--> <tr>
<td align="center">
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;min-width:300px !important;" bgcolor="#ffffff" class="width320">
<!-- full-width copy -->
<tr>
<td colspan="2" style="min-width:300px !important;">
<p style="margin:25px auto 0px;padding:0;font-family:'SackersGothicStd-Medium', sans-serif;font-size:22px;line-height:140%;letter-spacing:1px;color:#000000;text-align:center;text-transform:uppercase;font-weight:500;width:95%;">Step out in subtle chic</p>
<p style="margin:0px auto 15px;padding:0;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:14px;font-style:normal !important;line-height:150%;letter-spacing:1px;color:#000000;text-align:center;width:76%;">Available in bright colours and warm neutrals, our new sandals go everywhere you do, from sunrise to sunset.</p>
</td>
</tr>
<!-- end full-width copy -->
<!-- full-width cta -->
<tr>
<td colspan="2" style="min-width:300px !important;">
<table class="width320nav" align="center" border="0" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td align="center" style="color:#ffffff;padding:15px 0 0;text-align:center;" mc:edit="herbutton">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width:200px;min-width:200px;" width="200">
<tbody>
<tr>
<td align="center" style="max-width:300px;display:block !important;background-color:#ffffff;border:1px solid #000000;padding:10px;font-family:'SackersGothicStd-Medium', sans-serif;font-size:12px;font-weight:500;line-height:105%;letter-spacing:1px;text-align:center;">SHOP SANDALS
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!-- end button -->
</td>
</tr>
<!-- three-column content -->
<tr>
<td colspan="2" style="min-width:300px !important;">
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center">
<img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/4f936c5d-aec4-407b-bc0e-a6b668abc01f.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Coming Soon: Lorne">
</td>
</tr>
</table>
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center">
<img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/95cd618b-6e44-4879-9f3b-fad394664080.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Kirra">
<!-- <p style="margin:10px auto;padding:0;font-family:'MrsEavesOT-Italic', 'times new roman', serif;font-size:12px;line-height:120%;letter-spacing:1px;color:#000000;text-align:center;"><a href="https://vionicshoes.ca/products/kirrasandal" style="font-size:12px;color:#ff4621;text-decoration:none;"><span style="font-size: 12px; color: #ff4621; text-decoration:none">
<i>NEW! <span style="color: #000">Kirra</span>
</i></span></a>
</p>-->
</td>
</tr>
</table>
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center">
<img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/ecc64309-c40e-407d-af58-62b95e975d2b.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Catalina">
</td>
</tr>
</table>
</td>
</tr>
<!-- end three-column content -->
<!--
<tr>
<td height="10" colspan="2">
</td>
</tr>
-->
<!-- end spacer -->
<!-- Full width image-->
<tr>
<td colspan="2" style="min-width:300px !important;">
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="96%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/0f605e1b-bdfc-43fb-9736-c9774b41cc78.jpg" style="max-width: 96%; width: 588px; margin: auto; padding: 0" alt="Bella">
</td>
</tr>
</table>
</td>
</tr>
<!-- three-column content -->
<tr>
<td colspan="2" style="min-width:300px !important;">
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/218d016f-850b-4484-be39-812c898b9de2.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Bella">
</td>
</tr>
</table>
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/a9f43d2c-aaeb-4128-906c-22c2ec0e7f13.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Bella">
</td>
</tr>
</table>
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/4cf6b46c-208b-4497-bca1-44c3c6418808.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Bella">
</td>
</tr>
</table>
</td>
</tr>
<!-- end three-column content -->
<!-- three-column content -->
<tr>
<td colspan="2" style="min-width:300px !important;">
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/2d57acb7-f623-4f49-90ab-0250e704a248.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Midi Perf">
</td>
</tr>
</table>
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/b885ec53-341d-4018-8e73-f097c3ec682a.jpg" style="max-width: 196px; margin: auto; padding: 0" width="195" alt="Joey">
</td>
</tr>
</table>
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/7bc1b19f-f704-458a-8869-9c20b5b2f4dd.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Edie">
</td>
</tr>
</table>
</td>
</tr>
<!-- end three-column content -->
<!-- Full width image-->
<tr>
<td colspan="2" style="min-width:300px !important;">
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="96%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/9a07d8b5-7e12-4540-b882-007774b799bd.jpg" style="max-width: 96%; width: 588px; margin: auto; padding: 0" alt="Bella">
</td>
</tr>
</table>
</td>
</tr>
<!-- <td height="30" colspan="2">
</td>-->
<!-- end spacer -->
</table>
</td>
</tr>
</table>
<!-- /body wrapper -->
<!-- footer wrapper -->
<table width="100%" bgcolor="#F9F8F8" cellpadding="0" cellspacing="0" border="0" style="padding:0;margin:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;table-layout:fixed;">
<tr>
<td align="center">
<table width="600" bgcolor="#373131" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;text-align:center;" class="width320">
<tr>
<td colspan="2" class="width320">
<table width="600" bgcolor="#000000" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#444444;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:10px;text-align:center;" class="width320">
<tr>
<td height="20" width="100%"></td>
</tr>
<!-- spacing -->
<!-- footer nav 1 -->
<tr align="center">
<td>
<table align="center" width="320" border="0" cellpadding="0" cellspacing="0" style="color:#ffffff;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:12px;">
<tr>
<td align="center"><span class="block"><span style="color:#ffffff; text-decoration:none;">30-DAY WEAR TEST</span> | <span style="color:#ffffff; text-decoration:none;">FIND A STORE</span></span>
</td>
</tr>
</table>
</td>
</tr>
<!-- end footer nav 1 -->
<tr>
<td height="5" width="100%"></td>
</tr>
<!-- spacing -->
<!-- footer nav 2 -->
<tr>
<td width="100%">
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;" class="width320nav">
<tr>
<td align="center" style="color:#ffffff;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:10px;text-align:center;"><span class="block"><span style="color:#ffffff; text-decoration:none;">FAQ</span> | <span style="color:#ffffff; text-decoration:none;">CONTACT US</span> | <span style="color:#ffffff; text-decoration:none;">UNSUBSCRIBE</span></span>
</td>
</tr>
</table>
</td>
</tr>
<!-- end footer nav 2 -->
<!-- social -->
<tr>
<td width="100%" class="width320">
<div align="center" mc:edit="socialicons" style="margin:10px auto;padding:0;">
<img src="https://gallery.mailchimp.com/f65fdf760c91701e37252f426/images/4f0797d7-defb-47de-a41d-7f5da63c3274.png" width="20" border="0" title="Facebook" alt="4f0797d7-defb-47de-a41d-7f5da63c3274.png"> <img src="https://gallery.mailchimp.com/f65fdf760c91701e37252f426/images/b94436f2-347d-4781-bcfa-7f51c0e7460f.png" width="20" border="0" title="Instagram" alt="b94436f2-347d-4781-bcfa-7f51c0e7460f.png"> <img src="https://gallery.mailchimp.com/f65fdf760c91701e37252f426/images/4d973ac0-a4a5-42a4-963d-7deddc0b127f.png" width="20" border="0" title="Twitter" alt="4d973ac0-a4a5-42a4-963d-7deddc0b127f.png"> <img src="https://gallery.mailchimp.com/f65fdf760c91701e37252f426/images/1b8863d9-8cce-46f3-8fce-aeb3281581b6.png" width="20" border="0" title="Youtube" alt="1b8863d9-8cce-46f3-8fce-aeb3281581b6.png">
</div>
</td>
</tr>
<!-- end social -->
<tr>
<td height="10" width="100%"></td>
</tr>
<!-- spacing -->
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="600" bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#444444;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:10px;text-align:center;" class="width320">
<!-- company info -->
<tr align="center">
<td width="600" align="center">
<br><span style="color:#000000">© *|CURRENT_YEAR|* *|LIST:COMPANY|*. All rights reserved.</span>
<br><span style="color:#000000; text-decoration:none;">*|HTML:LIST_ADDRESS_HTML|*</span>
</td>
</tr>
<!-- end company info -->
<tr>
<td height="20" bgcolor="#ffffff"></td>
</tr>
<!--spacer -->
</table>
</td>
</tr>
</table>
<!-- /footer wrapper -->
<!-- gmail ios fix -->
<div style="display:none !important;white-space:nowrap;font:15px courier;color:#ffffff;"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - </div>
</body>
I managed to fix a few things but you will have to work on it more. The easy fixes are:
The image with lady and 30 day wear test didnt have a width on the img tag. Outlook doesnt like retina images so always use image widths for those that will extend beyond your template width.
Lady image fix:
<table class="width320" align="center" border="0" cellpadding="0" cellspacing="0" width="96%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/0f605e1b-bdfc-43fb-9736-c9774b41cc78.jpg" style="max-width: 96%; width: 588px; margin: auto; padding: 0; display:block;" alt="Bella" width="588">
</td>
</tr>
</table>
Bottom image fixed:
<table class="width320" align="center" border="0" cellpadding="0" cellspacing="0" width="96%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/9a07d8b5-7e12-4540-b882-007774b799bd.jpg" style="max-width: 96%; width: 588px; margin: auto; padding: 0; display:block;" alt="Bella" width="588">
</td>
</tr>
</table>
Things to note:
You are missing display blocks on images
Once all above fixes are placed in there are white lines between images, you will need to see the images are right sizes and resized the right way to eliminate the annoying lines.
Full fixed code of email can be found here.
Hope this is the answer you were after.
I am editing a MailChimp newsletter template and am having an issue removing some padding (see image).
I have removed some padding from this line of code:
<td valign="top" class="headerContainer" style="padding-top:0px; padding-bottom:10px;">
but this does not affect the content as the padding seems to be generated by element.style when the page loads.
Full code for the header section is below.
How can I remove the padding?
<!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600" class="templateContainer">
<tr>
<td valign="top" class="headerContainer" style="padding-top:0px; padding-bottom:10px;"><table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageBlock">
<tbody class="mcnImageBlockOuter">
<tr>
<td valign="top" style="padding:0px" class="mcnImageBlockInner">
<table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer">
<tbody><tr>
<td class="mcnImageContent" valign="top" style="padding-right: 0px; padding-left: 0px; padding-top: 0; padding-bottom: 0; text-align:center;">
<img align="left" alt="" src="https://gallery.mailchimp.com/4ca693f814be731ac4d5dc5f0/images/490a75b1-274d-421a-bd88-ef1c23165352.png" width="140" style="max-width:140px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" class="mcnImage">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // END HEADER -->