Email Width not being respected in Outlook for Windows (only) - html

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.

Related

Can't resize the width of a button inside a <td>

Hi I'm trying to resize the blue button in the header image, but I can't change its width. It's in a table format inside a <td> i tried using td width also it didn't work. It looks like its fixed to 640px. I tried with style width also but it still didn't work. How else can I edit the width of the blue button? See attached image
As you can see the header image is what im trying to achieve                                                                                                                                                                                                                               
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>You're Invited to the SAP SuccessFactors SuccessConnect in Las Vegas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="ProgId" content="Word.Document">
</head>
<body style="margin:0; padding:0;" bgcolor="#ffffff" link="#008cd2">
<style type="text/css">
* {
-webkit-text-size-adjust: none;
-webkit-text-resize: 100%;
text-resize: 100%;
}
</style>
<!-- main wrapper -->
<table data-section="body" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<!-- header -->
<tr>
<td>
<table data-section="header" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td style="font-size:1px;color:#FFFFFF;">
<font color="#FFFFFF" style="font-size:1px;color:#FFFFFF;line-height:0;">
<!-- inbox preview optimized text -->
<span class="appleLinksWhite">Join SAP in Las Vegas for SuccessConnect at the Aria Resort! Hear from HR industry thought leaders, experts, and special guests.</span>
</font>
</td>
</tr>
<tr>
<td>
<table class="container header-container" title="header-container" width="640" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" title="brand">
<tr>
<td valign="middle" width="414" style="line-height:1px; font-size:1px;"><img src="https://portal.thinkwgroup.com/html-email/sap/email/images/logo-carlyle-group.png" alt="" border="0"style="vertical-align:top; width: 201px; height: 36px;"></a></td>
<td valign="middle" align="right" width="104" style="line-height:1px; font-size:1px;"><a title="THE BEST RUN" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/TheBestRunLogo-64px-White-DG.png" alt="THE BEST RUN" border="0" hspace="0" vspace="0" width="104" height="32" title="tagline" style="vertical-align:top; width: 104px; height: 32px;"></a></td>
<td width="10" class="hide" style="line-height:1px; font-size:1px;"> </td>
<td valign="middle" align="right" width="72" style="line-height:1px; font-size:1px;"><a title="SAP" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/logo.png" alt="SAP" border="0" hspace="0" vspace="0" width="72" height="36" title="logo" style="vertical-align:top; width: 72px; height: 36px;"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- main -->
<tr>
<td>
<table data-section="main" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr data-section="hero">
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr class="motion-row">
<td width="100%" valign="top" bgcolor="#000000">
<table background="https://portal.thinkwgroup.com/html-email/sap/email/images/banner-lasvegas.jpg" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="line-height:1px; font-size:1px;" height="60"> </td>
</tr>
<tr>
<td style="font:36px/44px Arial, Helvetica, sans-serif; color:#ffffff;">
<span class="font22">Join SAP in Las Vegas for Success<span style='color:#f0ab00;'>Connect</span> at the Aria Resort!</span><br>
</td>
</tr>
<tr>
<td align="center" bgcolor="#008fd3" width="50" height="40"><a class="font14" style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a></td>
</tr>
<!-- main
<tr>
<td class="widthAuto mceEditable" style= align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
-->
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr data-section="subhead">
<td>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td align="left" style="font:22px/30px Arial, Helvetica, sans-serif; color:#444444;">
<span class="font19">Hear from HR industry thought leaders, experts, and special guests.</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<!-- email body -->
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr data-section="content">
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="font:14px/21px Arial, Helvetica, sans-serif; color:#444444;">
<p>You are cordially invited to attend our annual SuccessConnec<u>t</u> event, held by SAP SuccessFactors this September 16–18 in Las Vegas. Regarded as one of the top HR events of the year, SuccessConnect brings industry <strong>thought leaders</strong>, current and prospective <strong>customers</strong>, <strong>technology partners</strong>, and <strong>solutions experts</strong> together to share their <strong>experiences</strong>, <strong>best practices</strong>, and <strong>innovations</strong>. The event offers more than 100 breakout sessions alongside many <strong>high-level networking opportunities</strong>.</p>
<p class="xmsonormal">The future workplace looks very different from what we see today. From technological advancements to the ever-changing nature of jobs, skills, and careers, businesses need to find ways to succeed in a world that’s being reshaped by continuous innovation and disruption. Learn how SAP SuccessFactors solutions can help your company right now and help <strong>plan for future initiatives</strong>.</p>
<hr>
<p></p>
<table class="template-2col image-l split50 mceNonEditable" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="hide-email mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" valign="top" width="50%">
<p><img class="photo" src="https://portal.thinkwgroup.com/html-email/sap/email/images/image-lasvegas.jpg" width="280" height="158" /></p>
</td>
<td class="mobile-block2 mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" width="50%">
<p>This event provides a fantastic forum to meet other HR professionals and find out how they’re using SAP SuccessFactors to help <strong>drive a digital HR strategy</strong>, transform talent, recruitment, and learning programs, as well as <strong>improve HR process efficiency</strong>.</p>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" height="10"> </td>
</tr>
</tbody>
</table>
<p class="xmsonormal">Enjoy a celebratory evening at KAOS nightclub in the iconic Palms Resort Casino, where you’ll get to network with your peers while enjoying great entertainment.</p>
<p><strong>Please register here.</strong></p>
<p>We look forward to seeing you in Las Vegas!</p>
<table class="mceNonEditable" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr data-section="callout">
<td>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f5f5f5">
<tbody>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width20 " width="42"> </td>
<td class="mceEditable" style="font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;">
<p><strong>SAP SuccessFactors SuccessConnect</strong></p>
<p><strong>Date:</strong><br />September 16–18, 2019</p>
<p><strong>Location:</strong><br />Aria Resort and Casino</p>
<p><strong>Address:</strong><br />3730 S Las Vegas Blvd<br />Las Vegas, NV 89158</p>
<table class="cta-button mceNonEditable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="widthAuto mceEditable" style="border-radius: 5px;" align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="15"> </td>
</tr>
</tbody>
</table>
</td>
<td class="width20 " width="42"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35" class="height28" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="display:none; white-space:nowrap; font:15px/2px courier; color:#ffffff;">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

You should change you code
From
<td align="center" bgcolor="#008fd3" width="50" height="40"><a class="font14" style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a></td>
to
<td width="50" height="40" bgcolor="#202020" align="center">
<a class="font14" style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;background: #008fd3;width: 20%;position: absolute;padding: 8px;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" rel="noopener" data-sap-hpa-ceimo-ioi-link="73554900100700000840" data-mce-href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" data-mce-style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" data-mce-selected="1">Register today</a>
</td>
Hope can help you

You need to remove display:block
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>You're Invited to the SAP SuccessFactors SuccessConnect in Las Vegas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="ProgId" content="Word.Document">
</head>
<body style="margin:0; padding:0;" bgcolor="#ffffff" link="#008cd2">
<style type="text/css">
* {
-webkit-text-size-adjust: none;
-webkit-text-resize: 100%;
text-resize: 100%;
}
</style>
<!-- main wrapper -->
<table data-section="body" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<!-- header -->
<tr>
<td>
<table data-section="header" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td style="font-size:1px;color:#FFFFFF;">
<font color="#FFFFFF" style="font-size:1px;color:#FFFFFF;line-height:0;">
<!-- inbox preview optimized text -->
<span class="appleLinksWhite">Join SAP in Las Vegas for SuccessConnect at the Aria Resort! Hear from HR industry thought leaders, experts, and special guests.</span>
</font>
</td>
</tr>
<tr>
<td>
<table class="container header-container" title="header-container" width="640" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" title="brand">
<tr>
<td valign="middle" width="414" style="line-height:1px; font-size:1px;"><img src="https://portal.thinkwgroup.com/html-email/sap/email/images/logo-carlyle-group.png" alt="" border="0" style="vertical-align:top; width: 201px; height: 36px;"></a>
</td>
<td valign="middle" align="right" width="104" style="line-height:1px; font-size:1px;">
<a title="THE BEST RUN" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/TheBestRunLogo-64px-White-DG.png" alt="THE BEST RUN" border="0" hspace="0" vspace="0" width="104" height="32" title="tagline" style="vertical-align:top; width: 104px; height: 32px;"></a>
</td>
<td width="10" class="hide" style="line-height:1px; font-size:1px;"> </td>
<td valign="middle" align="right" width="72" style="line-height:1px; font-size:1px;">
<a title="SAP" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/logo.png" alt="SAP" border="0" hspace="0" vspace="0" width="72" height="36" title="logo" style="vertical-align:top; width: 72px; height: 36px;"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- main -->
<tr>
<td>
<table data-section="main" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr data-section="hero">
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr class="motion-row">
<td width="100%" valign="top" bgcolor="#000000">
<table background="https://portal.thinkwgroup.com/html-email/sap/email/images/banner-lasvegas.jpg" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="line-height:1px; font-size:1px;" height="60"> </td>
</tr>
<tr>
<td style="font:36px/44px Arial, Helvetica, sans-serif; color:#ffffff;">
<span class="font22">Join SAP in Las Vegas for Success<span style='color:#f0ab00;'>Connect</span> at the Aria Resort!</span><br>
</td>
</tr>
<tr>
<td align="left" width="50" height="40">
<a class="font14" style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; background:#008fd3; display: inline-block;
line-height: 40px;
padding: 0 1em;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off"
target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a>
</td>
</tr>
<!-- main
<tr>
<td class="widthAuto mceEditable" style= align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
-->
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr data-section="subhead">
<td>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td align="left" style="font:22px/30px Arial, Helvetica, sans-serif; color:#444444;">
<span class="font19">Hear from HR industry thought leaders, experts, and special guests.</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<!-- email body -->
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr data-section="content">
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="font:14px/21px Arial, Helvetica, sans-serif; color:#444444;">
<p>You are cordially invited to attend our annual SuccessConnec<u>t</u> event, held by SAP SuccessFactors this September 16–18 in Las Vegas. Regarded as one of the top HR events of the year, SuccessConnect
brings industry <strong>thought leaders</strong>, current and prospective <strong>customers</strong>, <strong>technology partners</strong>, and <strong>solutions experts</strong> together to share their <strong>experiences</strong>,
<strong>best practices</strong>, and <strong>innovations</strong>. The event offers more than 100 breakout sessions alongside many <strong>high-level networking opportunities</strong>.</p>
<p class="xmsonormal">The future workplace looks very different from what we see today. From technological advancements to the ever-changing nature of jobs, skills, and careers, businesses need to find ways to succeed in a world that’s
being reshaped by continuous innovation and disruption. Learn how SAP SuccessFactors solutions can help your company right now and help <strong>plan for future initiatives</strong>.</p>
<hr>
<p></p>
<table class="template-2col image-l split50 mceNonEditable" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="hide-email mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" valign="top" width="50%">
<p><img class="photo" src="https://portal.thinkwgroup.com/html-email/sap/email/images/image-lasvegas.jpg" width="280" height="158" /></p>
</td>
<td class="mobile-block2 mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" width="50%">
<p>This event provides a fantastic forum to meet other HR professionals and find out how they’re using SAP SuccessFactors to help <strong>drive a digital HR strategy</strong>, transform talent, recruitment, and
learning programs, as well as <strong>improve HR process efficiency</strong>.</p>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" height="10"> </td>
</tr>
</tbody>
</table>
<p class="xmsonormal">Enjoy a celebratory evening at KAOS nightclub in the iconic Palms Resort Casino, where you’ll get to network with your peers while enjoying great entertainment.</p>
<p><strong>Please register here.</strong></p>
<p>We look forward to seeing you in Las Vegas!</p>
<table class="mceNonEditable" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr data-section="callout">
<td>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f5f5f5">
<tbody>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width20 " width="42"> </td>
<td class="mceEditable" style="font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;">
<p><strong>SAP SuccessFactors SuccessConnect</strong></p>
<p><strong>Date:</strong><br />September 16–18, 2019</p>
<p><strong>Location:</strong><br />Aria Resort and Casino</p>
<p><strong>Address:</strong><br />3730 S Las Vegas Blvd<br />Las Vegas, NV 89158</p>
<table class="cta-button mceNonEditable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="widthAuto mceEditable" style="border-radius: 5px;" align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019"
target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="15"> </td>
</tr>
</tbody>
</table>
</td>
<td class="width20 " width="42"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35" class="height28" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="display:none; white-space:nowrap; font:15px/2px courier; color:#ffffff;">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>You're Invited to the SAP SuccessFactors SuccessConnect in Las Vegas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="ProgId" content="Word.Document">
</head>
<body style="margin:0; padding:0;" bgcolor="#ffffff" link="#008cd2">
<style type="text/css">
* {
-webkit-text-size-adjust: none;
-webkit-text-resize: 100%;
text-resize: 100%;
}
</style>
<!-- main wrapper -->
<table data-section="body" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<!-- header -->
<tr>
<td>
<table data-section="header" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td style="font-size:1px;color:#FFFFFF;">
<font color="#FFFFFF" style="font-size:1px;color:#FFFFFF;line-height:0;">
<!-- inbox preview optimized text -->
<span class="appleLinksWhite">Join SAP in Las Vegas for SuccessConnect at the Aria Resort! Hear from HR industry thought leaders, experts, and special guests.</span>
</font>
</td>
</tr>
<tr>
<td>
<table class="container header-container" title="header-container" width="640" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" title="brand">
<tr>
<td valign="middle" width="414" style="line-height:1px; font-size:1px;"><img src="https://portal.thinkwgroup.com/html-email/sap/email/images/logo-carlyle-group.png" alt="" border="0"style="vertical-align:top; width: 201px; height: 36px;"></a></td>
<td valign="middle" align="right" width="104" style="line-height:1px; font-size:1px;"><a title="THE BEST RUN" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/TheBestRunLogo-64px-White-DG.png" alt="THE BEST RUN" border="0" hspace="0" vspace="0" width="104" height="32" title="tagline" style="vertical-align:top; width: 104px; height: 32px;"></a></td>
<td width="10" class="hide" style="line-height:1px; font-size:1px;"> </td>
<td valign="middle" align="right" width="72" style="line-height:1px; font-size:1px;"><a title="SAP" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/logo.png" alt="SAP" border="0" hspace="0" vspace="0" width="72" height="36" title="logo" style="vertical-align:top; width: 72px; height: 36px;"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- main -->
<tr>
<td>
<table data-section="main" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr data-section="hero">
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr class="motion-row">
<td width="100%" valign="top" bgcolor="#000000">
<table background="https://portal.thinkwgroup.com/html-email/sap/email/images/banner-lasvegas.jpg" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="line-height:1px; font-size:1px;" height="60"> </td>
</tr>
<tr>
<td style="font:36px/44px Arial, Helvetica, sans-serif; color:#ffffff;">
<span class="font22">Join SAP in Las Vegas for Success<span style='color:#f0ab00;'>Connect</span> at the Aria Resort!</span><br>
</td>
</tr>
<tr>
<td align="center" bgcolor="#008fd3" width="50" height="40" style="width: 20%;display: block;"><a class="font14" style="font: 18px Arial, Helvetica, sans-serif;color: #ffffff;text-align: center;text-decoration: none;display: block;width: 100%;padding: 10px 0px;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a></td>
</tr>
<!-- main
<tr>
<td class="widthAuto mceEditable" style= align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
-->
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr data-section="subhead">
<td>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td align="left" style="font:22px/30px Arial, Helvetica, sans-serif; color:#444444;">
<span class="font19">Hear from HR industry thought leaders, experts, and special guests.</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<!-- email body -->
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr data-section="content">
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="font:14px/21px Arial, Helvetica, sans-serif; color:#444444;">
<p>You are cordially invited to attend our annual SuccessConnec<u>t</u> event, held by SAP SuccessFactors this September 16–18 in Las Vegas. Regarded as one of the top HR events of the year, SuccessConnect brings industry <strong>thought leaders</strong>, current and prospective <strong>customers</strong>, <strong>technology partners</strong>, and <strong>solutions experts</strong> together to share their <strong>experiences</strong>, <strong>best practices</strong>, and <strong>innovations</strong>. The event offers more than 100 breakout sessions alongside many <strong>high-level networking opportunities</strong>.</p>
<p class="xmsonormal">The future workplace looks very different from what we see today. From technological advancements to the ever-changing nature of jobs, skills, and careers, businesses need to find ways to succeed in a world that’s being reshaped by continuous innovation and disruption. Learn how SAP SuccessFactors solutions can help your company right now and help <strong>plan for future initiatives</strong>.</p>
<hr>
<p></p>
<table class="template-2col image-l split50 mceNonEditable" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="hide-email mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" valign="top" width="50%">
<p><img class="photo" src="https://portal.thinkwgroup.com/html-email/sap/email/images/image-lasvegas.jpg" width="280" height="158" /></p>
</td>
<td class="mobile-block2 mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" width="50%">
<p>This event provides a fantastic forum to meet other HR professionals and find out how they’re using SAP SuccessFactors to help <strong>drive a digital HR strategy</strong>, transform talent, recruitment, and learning programs, as well as <strong>improve HR process efficiency</strong>.</p>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" height="10"> </td>
</tr>
</tbody>
</table>
<p class="xmsonormal">Enjoy a celebratory evening at KAOS nightclub in the iconic Palms Resort Casino, where you’ll get to network with your peers while enjoying great entertainment.</p>
<p><strong>Please register here.</strong></p>
<p>We look forward to seeing you in Las Vegas!</p>
<table class="mceNonEditable" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr data-section="callout">
<td>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f5f5f5">
<tbody>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width20 " width="42"> </td>
<td class="mceEditable" style="font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;">
<p><strong>SAP SuccessFactors SuccessConnect</strong></p>
<p><strong>Date:</strong><br />September 16–18, 2019</p>
<p><strong>Location:</strong><br />Aria Resort and Casino</p>
<p><strong>Address:</strong><br />3730 S Las Vegas Blvd<br />Las Vegas, NV 89158</p>
<table class="cta-button mceNonEditable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="widthAuto mceEditable" style="border-radius: 5px;" align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="15"> </td>
</tr>
</tbody>
</table>
</td>
<td class="width20 " width="42"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35" class="height28" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="display:none; white-space:nowrap; font:15px/2px courier; color:#ffffff;">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<td align="center" bgcolor="#008fd3" width="50" height="40" style="width: 20%;display: block;">
<a class="font14" style="font: 18px Arial, Helvetica, sans-serif;color: #ffffff;text-align: center;text-decoration: none;display: block;width: 100%;padding: 10px 0px;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a>
</td>
simple My code Replease To Your Code

Responsive email 3 columns layouts not displayed full width

I started making a email from a default Mailchimp layout, the "1:3 Column - Full Width" one.
When testing it on diferent devices, I realized that on mobile email client apps (Gmail, Yahoo, etc.), the area marked below is not displayed full width, when should.
I'm unable to find the mistake, I didn't touch any of the responsive code from the default layout.
-Thanks for your time.
Here is the code:
.templateContainer {
max-width: 600px !important;
}
.mcnImageCalendar {
max-width: 100% !important;
height: auto;
display: block;
}
#media only screen and (min-width:768px) {
.templateContainer {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
.columnWrapper {
max-width: 100% !important;
width: 100% !important;
}
}
<table>
<tbody>
<tr>
<td align="center" valign="top" class="templateColumns">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer">
<tr>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

Try following code, u need to mention min-width and max-width
.templateContainer {
max-width: 600px !important;
}
.mcnImageCalendar {
max-width: 100% !important;
height: auto;
display: block;
}
#media only screen and (max-width: 768px) and (min-width: 481px) {
.templateContainer {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
.columnWrapper {
max-width: 100% !important;
width: 100% !important;
}
}
<table>
<tbody>
<tr>
<td align="center" valign="top" class="templateColumns">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer">
<tr>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

First - not every email clients use media queries. For example gmail don't. So Your email won't be responsive on gmail and many email clients like Outlook etc. I create my last email template for shop about year ago so do not remember every behavior but this is great tool https://litmus.com .
And what I remember - use only inline styles and tables in template. Good luck because creating email template is a terrible work :)

Responsive email breaks on smartphone email client apps

I'm editing a bought responsive email template. Below you can see the structure used.
The email is responsive on the web version and on desktop browser email clients. But when testing it on mobile email apps like Gmail, the structure breaks, and on Yahoo it displays the desktop version.
After cleaning up the code, and testing diferent versions... I think the problem is in the section where there is a background full width and then a normal width table with 2 images.
I tried putting the background on the top <table> and then on the <td> but it still don't work on mobile email apps like Gmail or Yahoo.
I don't know if I'm missing up something, or I'm doing something wrong. It only breaks on mobile email apps.
Thanks in advance.
Here is the code of the top section.
<table class="main-header" data-module="Header" data-bgcolor="Header" data-bg="Header" style="position: relative; opacity: 1; z-index: 0; background-image: url(https://i.ytimg.com/vi/vUQUDS-TL6Q/hqdefault.jpg); background-size: cover; background-position: 50% 40%;" background="https://i.ytimg.com/vi/vUQUDS-TL6Q/hqdefault.jpg" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="zay600" border="0" align="center" cellpadding="0" cellspacing="0">
<table cellspacing="0" cellpadding="0" align="center" border="0" width="90%" class="zay600">
<!-- img -->
<tbody><tr>
<td align="center">
<table align="center" class="zay600" width="600" border="0" cellspacing="0" cellpadding="0">
<!-- logo -->
<tbody><tr>
<td>
<table align="left" class="zay3-3" width="120" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td height="40">
</td>
</tr>
<!-- logo -->
<tr>
<td align="center" valign="middle" style="line-height:0px;">
<img style="display:block; font-size:0px; line-height:0px; border:0px;" src="http://www.dickson-constant.com/medias/images/catalogue/api/m654-grey-680.jpg" width="249" height="70" alt="img">
</td>
</tr>
<!-- end logo -->
</tbody></table>
<!--Space-->
<table width="1" height="30" border="0" cellpadding="0" cellspacing="0" align="left">
<tbody><tr>
<td height="30" style="font-size: 0;line-height: 0;border-collapse: collapse;">
<p style="padding-left: 24px;">
</p>
</td>
</tr>
</tbody></table>
<table align="right" class="zay3-3" width="280" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td height="50">
</td>
</tr>
<!-- logo -->
<tr>
<td align="center">
<table class="zay-inner" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td align="center" valign="middle" style="line-height:0px;"><img style="display:block; font-size:0px; line-height:0px; border:0px;" src="http://www.dickson-constant.com/medias/images/catalogue/api/m654-grey-680.jpg" width="280" height="36" alt="img">
</td></tr>
</tbody></table>
</td>
</tr>
<!-- end logo -->
</tbody></table>
<!--End Space-->
</td>
</tr>
<!-- menu -->
<!-- end menu -->
</tbody></table>
</td>
</tr>
<!-- end logo -->
<tr>
<td height="100" class="header-td">
</td>
</tr>
<!-- subtitle -->
<tr>
<td>
<!-- content -->
<table class="zay600" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td align="center">
<table border="0" width="184" align="center" cellpadding="0" cellspacing="0" class="container580">
<tbody><tr>
<td align="center" valign="middle" style="line-height:0px;">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center">
<!-- img -->
<table align="center" class="zay3-3" width="275" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="center" style="line-height:0px;">
</td>
</tr>
</tbody></table>
<!-- end img -->
</td>
</tr>
<tr>
<td align="center">
<!-- img -->
<table align="center" class="zay3-3" width="275" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="center" style="line-height:0px;">
</td>
</tr>
</tbody></table>
<!-- end img -->
</td>
</tr>
</tbody></table>
<!-- end content -->
</td>
</tr>
<!-- end subtitle -->
<tr>
<td height="100" class="header-td">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>

responsive email stacking tables

I am working with the new responsive templates in dotmailer and all elements are now block tables, there are no multi-column tables. I want to stack a right table element over a left table element in a responsive environment while keeping the left/right arrangement on the desktop.
Here is the code for the full element I am working in
I have tried creating the element as a table with columns but cannot save the file when I do that, I have tried css with floats on table ids, the tables, td, and inline css, some of this configurations would flip the order on desktop not a phone. (I am looking specificaly at iphone6)
Is it possible to flip the stacking on block elements?
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="row two-cols ee_columns ee_element" ee-type="container" data-title="2 columns" style="position: relative; background-color: rgb(174, 184, 194);">
<tbody>
<tr>
<td align="center" valign="top" class="row-inner f-size-0 element-pad" dir="ltr" style="padding: 0px 10px 0px 0px;"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:650px;" width="650" class="mso-table-width"><tr><td align="left" valign="top" style="width:331px;" width="320" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="stack-column stack-column-width" ee-percent-width="51" style="max-width: 50.92%; min-width: 331px; width: 650px;" id="right-stack">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="stack_bottom">
<tbody>
<tr>
<td dir="rlt" class="col-inner ee_dropzone" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="col-font-reset ee_element" ee-type="element">
<tbody>
<tr>
<td align="left" class="element-pad element-bord" style="padding: 0px;"><img src="img" alt="" style="width: 100%; display: block; height: auto;" class="ee_editable vedpw331" ee-width="331" border="0" width="331" /></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td><td align="left" valign="top" style="width:325px;" width="325" class="column"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="stack-column stack-column-width" ee-percent-width="49" style="max-width: 49.07%; min-width: 319px; width: 650px;" id="left-stack">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="stack_top">
<tbody>
<tr>
<td dir="ltr" class="col-inner ee_dropzone" align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="ee_element ee_spacer col-font-reset" ee-type="element">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;"><img src="https://i.emlfiles.com/cmpimg/t/s.gif" style="display: block; width: 1px; height: 10px;" alt="" class="" border="0" width="1" height="10" /></td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" class="col-font-reset ee_element" width="100%" ee-type="element">
<tbody>
<tr>
<td valign="top" align="left" class="element-pad element-bord"><div class="ee_editable">
<p class="h3" style="text-align: left; font-size: 17px; color: rgb(255, 255, 255); line-height: 120%;"><b>Headline</b></p>
</div></td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" class="col-font-reset ee_element" width="100%" ee-type="element">
<tbody>
<tr>
<td valign="top" align="left" class="element-pad element-bord"><div class="ee_editable">
<p style="font-size: 14px; color: rgb(255, 255, 255); line-height: 120%;" class="col-text">Text elements here</p>
</div></td>
</tr>
</tbody>
</table>
<table style="max-width: 100%; position: relative; table-layout: auto;" class="row one-cols ee_columns ee_element" ee-type="container" data-title="Columns" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td class="row-inner f-size-0 element-pad col-inner" valign="top" align="center"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:319px;" width="319" class="mso-table-width"><tr><td align="left" valign="top" style="width:319px;" width="330" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="no-stack-column no-stack-column-width" ee-percent-width="100">
<table style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td dir="ltr" class="col-inner ee_dropzone" align="left"><table style="max-width: 100%; position: relative; table-layout: auto;" class="row one-cols ee_columns ee_element" ee-type="container" data-title="Columns" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="padding-top: 0px;padding-right: 20px;padding-bottom: 0px;padding-left: 20px;" class="row-inner f-size-0 element-pad col-inner" valign="top" align="center"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:279px;" width="279" class="mso-table-width"><tr><td align="left" valign="top" style="width:279px;" width="290" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="no-stack-column no-stack-column-width" ee-percent-width="100">
<table style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td dir="ltr" class="col-inner ee_dropzone" align="left"><table class="ee_element ee_spacer col-font-reset" ee-type="element" style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;"><img src="https://i.emlfiles.com/cmpimg/t/s.gif" style="display: block; width: 1px; height: 20px;" alt="" class="" width="1" border="0" height="20" /></td>
</tr>
</tbody>
</table>
<table style="max-width: 100%; position: relative; table-layout: auto;" class="row one-cols ee_columns ee_element" ee-type="container" data-title="Columns" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;" class="row-inner f-size-0 element-pad col-inner" valign="top" align="center"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:279px;" width="279" class="mso-table-width"><tr><td align="left" valign="top" style="width:279px;" width="290" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="no-stack-column no-stack-column-width" ee-percent-width="100">
<table style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="background-color: rgb(218, 222, 227);" dir="ltr" class="col-inner ee_dropzone" align="left"><table class="col-font-reset ee_element" ee-type="element" style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="element-pad element-bord" valign="top" align="left"><div class="ee_editable">
<p style="margin: 0px; text-align: center; font-size: 17px; color: rgb(83, 169, 172);"><b>Text Button</b></p>
</div></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table>
<table class="ee_element ee_spacer col-font-reset" ee-type="element" style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;"><img src="https://i.emlfiles.com/cmpimg/t/s.gif" style="display: block; width: 1px; height: 10px;" alt="" class="" width="1" border="0" height="10" /></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table>

There are a couple of ways of achieving this:
Method 1: I've found that the simplest way to achieve a reverse stack in email is to code your two columns into <th> tags, then with a class style the header cells to display as table-footer and table-header respectively.
<style>
#media only screen and (max-width: 580px) {
.w320{ width:320px; }
.thg{ display: table-header-group !important; width:100% !important; font-weight:normal;}
.tfg{ display: table-footer-group !important; width:100% !important; font-weight:normal;}
}
</style>
</head>
<body>
<div align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0" class="w320" bgcolor="#333333">
<tr>
<th class="tfg" bgcolor="#CCCCCC">
<table width="100%" class="w320" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>left</td>
</tr>
</table>
</th>
<th class="thg" bgcolor="#999999">
<table width="100%" class="w320" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>right</td>
</tr>
</table>
</th>
</tr>
</table>
</div>
Method 2: If keeping your content in block tables is important to you then you could use the below method. The tables are declared with the right table before the left and reordered using the direction style. This method will require VML to keep then inline on Outlook 2007, 10 and 13.
<style>
#media only screen and (max-width: 580px) {
.w320{ width:320px; }
}
</style>
</head>
<body>
<div align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0" class="w320">
<tr>
<td style="direction:rtl">
<!--[if gte mso 9]>
<table border="0" cellpadding="0" cellspacing="0" style="direction:rtl">
<tr>
<td valign="top">
<![endif]-->
<table width="280" class="w320" border="0" cellspacing="0" cellpadding="0" style="display:inline" bgcolor="#CCCCCC">
<tr>
<td>right</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top">
<![endif]-->
<table width="280" class="w320" border="0" cellspacing="0" cellpadding="0" style="display:inline" bgcolor="#999999">
<tr>
<td>left</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
</body>

How to override element.style?

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