iOS Rendering Email half the size - html

Issue
I tested my email in Litmus and it renders at half the size of the email window only in iOS mobile phones as shown here. It sounds like Apple made this update in iOS 10 so users would have the ability to zoom into their email. I need help getting the responsive email rendering to the full width on iOS phones.
Troubleshooting
When I remove all of my css styles, it renders properly (full width) on the phone. But I need the email to be responsive.
Online solutions that are not working for me
I have seen this question online in a couple of places like here and here with the solution being as simple as adding this meta tag inside the <meta name="x-apple-disable-message-reformatting" />.
<meta name="viewport" content="width=device-width, initial-scale=1.0" shrink-to-fit="no">
body { width: 100%; max-width: 600px; }
<body style="width: 100%; max-width: 600px;>
Setting the table widths to 100% with max-width: 600px;
Here is my Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width, initial-scale=1.0" shrink-to-fit="no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta class="mktoColor" id="headlineColor" mktoname="Headline Color" default="#003a70">
<meta class="mktoColor" id="textColor" mktoname="Main Text Color" default="#333333">
<meta class="mktoColor" id="mkto-callout-text-bg-color" mktoname="Callout BG Color" default="#00843d">
<meta class="mktoColor" id="mkto-callout-text-color" mktoname="Callout Text Color" default="#ffffff">
<meta class="mktoColor" id="mkto-cta-text-link" mktoname="CTA Text Link Color" default="#00843d">
<meta class="mktoColor" id="mkto-cta-button-bg-color" mktoname="CTA BTN Bg Color" default="#003a70">
<meta class="mktoColor" id="mkto-footer-link-color" mktoname="Footer Link Color" default="#418fde">
<title>Test</title>
<style type="text/css">
html, body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
min-width: 100% !important;
-webkit-text-size-adjust:none !important;
}
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
.ExternalClass {
width: 100%;
}
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
table, td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
img {
-ms-interpolation-mode: bicubic;
}
.yshortcuts a {
border-bottom: none !important;
}
a[x-apple-data-detectors] {
color: inherit !important;
}
</style>
<style type="text/css">
.button-td, .button-a {
transition: all 100ms ease-in;
}
/* Media Queries */
#media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
}
.fluid, .fluid-centered {
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
.stack-column, .stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
.stack-column-center {
text-align: center !important;
}
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
</head>
<body bgcolor="#f2f2f2" width="100%" style="margin: 0; min-width: 100%; -webkit-text-size-adjust:none;" yahoo="yahoo">
<table bgcolor="#f2f2f2" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse;">
<tbody>
<tr>
<td>
<center style="width: 100%;">
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container mktoContainer" id="mkto-container" style="width: 600px;">
<tr class="mktoModule" id="logo-container" mktoname="Header logo">
<td style="padding: 20px 0; text-align: center">
<div class="mktoImg" id="header-logo-image" mktoname="Header Logo Image" mktolockimgsize="true">
<img src="" width="250" height="50" style="">
</div> </td>
</tr>
<tr class="mktoModule" id="body-copy-section" mktoname="Body copy with headline">
<td style="padding-left: 40px; padding-right: 40px; padding-top: 0px; padding-bottom: 0px;">
<div class="mktoText" id="headlineText" mktoname="Headline">
<p style="text-align: center; font-family: 'Arial', Helvetica, sans-serif; font-size: 24px; mso-height-rule: exactly; line-height: 32px; color: ${headlineColor};"> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
</div>
<div class="mktoText" id="Paragraph1text" mktoname="Paragraph Text">
<p style="text-align: left; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor};"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. <u>This is a link, it is underlined and the hex code is #eb6b19.</u> </p>
</div> </td>
</tr>
<tr class="mktoModule" id="hero-container" mktoname="Hero Image">
<td class="full-width-image">
<div class="mktoImg" id="hero-banner-image" mktoname="Hero Banner Image" mktolockimgsize="true">
<img src="" width="600" alt="alt_text" style="width: 100%; max-width: 600px; height: auto;">
</div> </td>
</tr>
<tr class="mktoModule" id="centered-btn" mktoname="CTA Button">
<td>
<table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">
<tbody>
<tr>
<td style="border-radius: 3px; background: ${mkto-cta-button-bg-color}; text-align: center;" class="button-td">
<a href="" style="background: ${mkto-cta-button-bg-color}; border: 15px solid ${mkto-cta-button-bg-color}; padding: 0 10px;color: #ffffff; font-family: 'Arial', Helvetica, sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a" id="mkto-button" mktoName="Button">
CTA BUTTON 1
</a>
</td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="video-screenshot" mktoname="video screenshot">
<td class="full-width-image">
<div class="mktoImg" id="full-width-image" mktoname="Full Width Image" mktolockimgsize="true">
<img src="" width="600" alt="Image" style="width: 100%; max-width: 600px; height: auto;">
</div> </td>
</tr>
<tr class="mktoModule" id="bullet-group" mktoname="Bulleted List">
<td style="padding-right: 40px; padding-left: 40px; padding-top: 0px; padding-bottom: 0px;">
<div class="mktoText" id="Paragraph2text" mktoname="Paragraph Text">
<p style="text-align: left; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor};">Maecenas sed ante pellentesque:</p>
</div>
<div class="mktoText" id="bulletedList" mktoname="Bulleted List">
<ul>
<li style="margin-bottom: 10px; margin text-overflow: ellipsis; word-wrap: break-word; color: ${textColor}; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
<li style="margin-bottom: 10px; text-overflow: ellipsis; word-wrap: break-word; color: ${textColor}; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li style="margin-bottom: 10px; text-overflow: ellipsis; word-wrap: break-word; color: ${textColor}; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</div> </td>
</tr>
<tr class="mktoModule" id="signature" mktoname="Signature">
<td style="padding-right: 40px; padding-left: 40px; padding-top: 0px; padding-bottom: 0px;">
<div class="mktoText" id="Paragraph3text" mktoname="Paragraph Text">
<p style="text-align: left; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor};"> Regards, <br> <br> <strong><span style="color: #003a70">Our Team</span></strong><br></p>
</div> </td>
</tr>
<tr class="mktoModule" id="three-col-img-text" mktoname="Three columns with image and text">
<td align="center" valign="top" style="padding: 10px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td width="33.33%" class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding: 10px; text-align: center">
<div class="mktoImg" id="lower-left-image" mktoname="Lower Left Image" mktolockimgsize="true">
<img src="" width="170" height="170" alt="alt_text" class="fluid">
</div> </td>
</tr>
<tr>
<td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="lowerLeftImageText" mktoname="Lower Left Image Text">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div> </td>
</tr>
</tbody>
</table> </td>
<td width="33.33%" class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding: 10px; text-align: center">
<div class="mktoImg" id="lower-middle-image" mktoname="Lower Middle Image" mktolockimgsize="true">
<img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-170x170.png" width="170" height="170" alt="alt_text" class="fluid">
</div> </td>
</tr>
<tr>
<td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="lowerMiddleImageText" mktoname="Lower Middle Image Text">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div> </td>
</tr>
</tbody>
</table> </td>
<td width="33.33%" class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding: 10px; text-align: center">
<div class="mktoImg" id="lower-right-image" mktoname="Lower Right Image" mktolockimgsize="true">
<img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-170x170.png" width="170" height="170" alt="alt_text" class="fluid">
</div> </td>
</tr>
<tr>
<td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="lowerRightImageText" mktoname="Lower Right Image Text">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="callout-box" mktoname="Callout Box">
<td bgcolor="${mkto-callout-text-bg-color}" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td valign="middle" style="text-align: center; padding: 40px;">
<div class="mktoText" id="calloutText" mktoname="Callout Box Text">
<p style="text-align: center; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${mkto-callout-text-color};;"> <strong>Call out box:</strong> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. </p>
</div> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="mktoModule" id="two-col-img-text" mktoname="Two columns with image and text">
<td align="center" valign="top" style="padding: 10px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding: 10px; text-align: center">
<div class="mktoImg" id="top-left-image" mktoname="Top Left Image" mktolockimgsize="true">
<img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-270x270.png" width="270" height="270" alt="alt_text" class="fluid">
</div> </td>
</tr>
<tr>
<td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="topLeftImageText" mktoname="Top Left Image Text">
<p>Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div> </td>
</tr>
</tbody>
</table> </td>
<td class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding: 10px; text-align: center">
<div class="mktoImg" id="top-right-image" mktoname="Top Right Image" mktolockimgsize="true">
<img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-270x270.png" width="270" height="270" alt="alt_text" class="fluid">
</div> </td>
</tr>
<tr>
<td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="topRightImageText" mktoname="Top Right Image Text">
<p>Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="left-img-right-copy" mktoname="Left image, right copy">
<td dir="ltr" align="center" valign="top" width="100%" style="padding: 10px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="33.33%" class="stack-column-center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;">
<div class="mktoImg" id="bottom-left-image" mktoname="Bottom Left Image" mktolockimgsize="true">
<img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-170x170.png" width="170" alt="alt_text" class="center-on-narrow">
</div> </td>
</tr>
</tbody>
</table> </td>
<td width="66.66%" class="stack-column-center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td dir="ltr" valign="top" style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="bottomImageText1" mktoname="Bottom Image Text 1">
<strong style="color:${textColor};">Class aptent taciti sociosqu</strong>
<br>
<br> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<br>
<br>
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tbody>
<tr>
<td style="border-radius: 3px; background: ${mkto-cta-button-bg-color}; text-align: center;" class="button-td"><a href="" style="background: ${mkto-cta-button-bg-color}; border: 15px solid ${mkto-cta-button-bg-color}; padding: 0 10px;color: #ffffff; font-family: 'Arial', Helvetica, sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
CTA BUTTON 2
</a> </td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="right-img-left-copy" mktoname="Right image, left copy">
<td dir="rtl" align="center" valign="top" width="100%" style="padding: 10px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="33.33%" class="stack-column-center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;">
<div class="mktoImg" id="bottom-right-image" mktoname="Bottom Right Image" mktolockimgsize="true">
<img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-170x170.png" width="170" alt="alt_text" class="center-on-narrow">
</div> </td>
</tr>
</tbody>
</table> </td>
<td width="66.66%" class="stack-column-center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td dir="ltr" valign="top" style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="bottomImageText2" mktoname="Bottom Image Text 2">
<strong style="color:${textColor};">Class aptent taciti sociosqu</strong>
<br>
<br> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<br>
<br>
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tbody>
<tr>
<td style="border-radius: 3px; background: ${mkto-cta-button-bg-color}; text-align: center;" class="button-td"> CTA BUTTON 3 </td>
</tr>
</tbody>
</table>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="thick-divider" mktoname="CC, Phone and Web link">
<td class="full-width-image">
<div class="mktoImg" id="footer-image" mktoname="Footer Image" mktolockimgsize="true">
<img src="" width="600" alt="" style="width: 100%; max-width: 600px; height: auto;">
</div> </td>
</tr>
</table>
</center> </td>
</tr>
</tbody>
</table>
</body>
</html>


Just as I found out on chat, the issue was table fixed CSS that was causing the issue. Once you removed it, the tables start going full width.
Before:
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
After:
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
margin: 0 auto !important;
}
Cheers

Related

Responsive four column table not rendering in Outlook (2010,2016)

built the following HTML for an email I am deploying. When I test in Litmus, the email looks great on all platforms except for Outlook. It appears one of the columns (the row with four imgs) breaks in Outlook desktop). The second image ends up moving to a new row.
FYI yes I know the image html may be wonky, I removed the original images that I was using in order to post in this group.
This is what the email block should look like:
code:
<!-- == Title Text And Three Column Section == --><table class="em_full_wrap" style="table-layout:fixed;" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#F8F8FB"> <tr>
<td valign="top" align="center">
<table class="em_wrapper" style="width:640px;" width="640" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
<tr>
<td class="em_side15" style="width:0px;" width="40">
</td><td valign="top" align="center">
<table class="em_wrapper" style="width:560px;" width="560" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td class="em_ptop" style="padding-top:40px; padding-left:40px;padding-right:40px;" valign="top" align="center">
<table class="em_wrapper" style="width:560px;" width="560" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<th class="em_defaultlink" style="color: rgb(37, 13, 83); font-family: "Arial", Arial, sans-serif; font-size: 22px; line-height: 27px; font-weight: bold; vertical-align: middle; height: 20px;" align="center">
Header Text</th></tr><tr>
<td class="em_defaultlink" style="color: rgb(37, 13, 83); font-family: "Arial", Arial, sans-serif; font-size: 22px; line-height: 27px; font-weight: bold; height: 20px;" align="center">
</td></tr><tr>
<td class="em_defaultlink" colspan="3" style="font-family:Arial, sans-serif; font-size:16px; line-height:22px; color:#666666;" valign="top" align="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</td></tr><tr>
<td class="em_h30" style="height: 20px;">
</td></tr><tr>
<td valign="top" align="center">
<table class="em_wrapper" style="width:520px;" width="520" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td valign="top" align="center">
<table class="em_wrapper" style="width:520px;" width="520" cellspacing="0" cellpadding="0" border="0" align="left">
<tr>
<td style="width: 130px; height: 20px;" valign="top" align="center">
<table class="em_wrapper" style="width:130px;" width="130" cellspacing="0" cellpadding="0" border="0" align="left">
<tr>
<td class="em_ptop" style="vertical-align: top; width: 130px; height: 30px;" align="center">
<a alias="" conversion="false" data-linkto="https://" href="" title=""><img alt="Resources to support your mental well-being." data-assetid="144028" src="http://image.em.com/lib/fe8e13727c640d7e76/m/5/image+holder.png" style="display: block; max-width: 127px; color: #000000; font-family: Arial, sans-serif; font-size: 15px; line-height: 20px; font-weight: bold; padding: 0px; height: 65px; width: 95px; text-align: center;" width="95" height="65"></a></td></tr></table><!--[if gte mso 9]>
</td>
<td valign="top">
<![endif]--><table class="em_wrapper" style="width:127px;" width="127" cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td class="em_ptop" style="width: 130px; height: 30px;" valign="top" align="center">
<a alias="" conversion="false" data-linkto="https://" href="" title=""><img alt="Resources to support your mental well-being." data-assetid="144028" src="http://image.em.com/lib/fe8e13727c640d7e76/m/5/image+holder.png" style="display: block; max-width: 127px; color: #000000; font-family: Arial, sans-serif; font-size: 15px; line-height: 20px; font-weight: bold; padding: 0px; height: 65px; width: 95px; text-align: center;" width="95" height="65"></a></td></tr></table><!--[if gte mso 9]>
</td>
<td valign="top">
<![endif]--><table class="em_wrapper" style="width:130px;" width="127" cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td class="em_ptop" style="width: 127px; height: 30px;" valign="top" align="center">
<a alias="" conversion="false" data-linkto="https://" href="" title=""><img alt="Resources to support your mental well-being." data-assetid="144028" src="http://image.em.com/lib/fe8e13727c640d7e76/m/5/image+holder.png" style="display: block; max-width: 127px; color: #000000; font-family: Arial, sans-serif; font-size: 15px; line-height: 20px; font-weight: bold; padding: 0px; height: 65px; width: 95px; text-align: center;" width="95" height="65"></a></td></tr></table><table class="em_wrapper" style="width:130px;" width="130" cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td class="em_ptop" style="width: 127px; height: 30px;" valign="middle" align="center">
<a alias="" conversion="false" data-linkto="" title=""><img alt="Resources to support your mental well-being." data-assetid="144028" src="http://image.em.com/lib/fe8e13727c640d7e76/m/5/image+holder.png" style="display: block; max-width: 127px; color: #000000; font-family: Arial, sans-serif; font-size: 15px; line-height: 20px; font-weight: bold; padding: 0px; height: 65px; width: 95px; text-align: center;" width="95" height="65"></a></td></tr></table></td></tr></table></td></tr></table></td></tr><tr>
<td class="em_h20" style="height: 15px;">
</td></tr><tr>
<td class="em_h20" colspan="3" align="center">
<span style="font-family: Arial, sans-serif; font-size: 16px; line-height: 24px; color:#501CD2; padding: 0px; vertical-align: middle; height: 20px;"><span style="font-size:16px;"><a alias="CTA" conversion="false" data-linkto="https://" href="" style="color:#501cd2;text-decoration:underline;" title="CTA">CTA</a></span></span></td></tr><tr>
<td class="em_h20" style="height: 40px;">
</td></tr><tr>
<td class="em_defaultlink" style="color:#501CD2;font-family:'Montserrat', Arial, sans-serif;font-size:14px;line-height:18px;font-weight:bold;" align="center">
</td></tr><tr>
</tr></table></td></tr></table></td><td class="em_side15" style="width:40px;" width="40">
</td></tr></table></td></tr></table><!-- == // END Title Text And Three Column Section == -->
`

I have found in Outlook desktop that if the sum of the table column widths is exactly the width of the parent table Outlook will push one of the tables to another row. I would suggest reducing the column table widths to 128px.
You can also keep the column table width as is and try to use Outlook specific CSS to eliminate the horizontal margin | padding | border | spacing that Outlook is applying to the column tables.
https://stigmortenmyre.no/mso/html/concepts/ofconstyletable.htm?filter=mso-

One TD disappearing on mobile?

I've got an email layout that functions as one wide column with two smaller columns at the bottom to keep a pair of linked images horizontal. Currently I'm struggling to get the layout to play nicely on mobile—if I can get the table to fill the screen, the leftmost image vanishes entirely, and if I can get both buttons to appear horizontally on mobile, the container breaks. My understanding of responsive layouts is spotty but I'm trying to figure out how to make this work nicely—complicated not least of all because my customer base tilts heavily Outlook.
CSS and HTML below. Appreciate any help!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body class="em_body" style="margin:0px auto; padding:0px;" bgcolor="#f7f6f2"> <u></u>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title>Lorem </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
<meta name="format-detection" content="telephone=no">
<!--[if !mso]><!-->
<style>
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#300;400;700;900&display=swap');
</style>
<!--<![endif]-->
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Trebuchet MS, sans-serif !important;}
</style>
<![endif]-->
<style type="text/css">
body { margin: 0 auto; padding: 0; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; -webkit-font-smoothing: antialiased !important; }
img { border: 0 !important; outline: none !important; }
p { Margin: 0px auto !important; Padding: 0px !important; }
table { border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; }
td, a, span { border-collapse: collapse; mso-line-height-rule: exactly; }
.ExternalClass * { line-height: 100%; }
.em_defaultlink a { color: inherit !important; text-decoration: none !important; }
.em_defaultlinku a { color: inherit !important; text-decoration: underline !important; }
.em_g_img + div { display: none; }
a[x-apple-data-detectors], u + .em_body a, #MessageViewBody a { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
.em_white a { color: #ffffff; text-decoration: none; }
.em_black a { color: #000000; text-decoration: none; }
.em_grey a{text-decoration:underline; color: #5e687b;}
.cta_insta a:hover{opacity:0.8 !important;}
#media only screen and (max-width:599px) {
.em_main_table { width: 100% !important; }
.em_wrapper { width: 100% !important; }
.em_hide { display: none !important; }
.em_full_img img { width: 100% !important; height: auto !important; }
.em_center { text-align: center !important; }
.em_side10 { width: 10px !important; }
.em_aside10 { padding: 0px 10px !important; }
.em_side15 { width: 15px !important; }
.em_aside15 { padding: 0px 15px !important; }
.em_ptop { padding-top: 20px !important; }
.em_pbottom { padding-bottom: 20px !important; }
.em_h20 { height: 20px !important; font-size: 1px!important; line-height: 1px!important; }
.em_h30 { height: 30px !important; }
.em_mob_block { display: block !important; }
.em_hauto { height: auto !important; }
.em_clear { clear: both !important; width: 100% !important; display: block !important; }
.em_pad { padding: 15px 0px!important; }
.em_p0 { padding: 0px !important; }
u + .em_body .em_full_wrap { width: 100% !important; width: 100vw !important; }
}
#media screen and (max-width: 479px) {
.em_w250 img{width: 250px !important; height: auto !important;}
}
</style>
<!-- == Header Section == -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="em_full_wrap" bgcolor="#f7f6f2" style="table-layout:fixed;">
<tbody><tr>
<td align="center" valign="top"><table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:600px; table-layout:fixed;">
<tbody><tr>
<td width="20" style="width: 20px;" class="em_side15"> </td>
<td align="center" valign="top" style="padding: 10px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="em_defaultlinku" align="left" valign="top" style="font-size: 11px;line-height: 19px; font-family: 'Segoe', 'Lato', Trebuchet MS, sans-serif; color: #5e687b;">
A project of the <a style="text-decoration: underline; color: #5e687b;" target="_blank" href="" sib_link_id="-2"><span style="text-decoration: underline; color: #5e687b;">me</span></a>
</td>
<td class="em_defaultlinku" align="right" valign="top" style="font-size: 11px;line-height: 19px; font-family: 'Segoe', 'Lato', Trebuchet MS, sans-serif; color: #5e687b;"><a style="text-decoration: underline; color: #5e687b;" target="_blank" href="https://4gyqr.r.bh.d.sendibt3.com/mk/cl/f/XUnKP49MNRJGqrTlNljomt86K0iNsgdAd6geoccV9wjEoMk4WDUFVtfu35Pch2qMizkrVxMHdgNeKkma-D8pvKI4brXSZeUJcwGASatkf8QC7fvoy2lzRiF_nJ3iplyaHM_VMwh7WfRCLNOA_b_UZgVhaDjK93nLSRu-xdfS9NFxUKEeDSfMmwENzXkMGHNu_L__CmSYdD3h4oaUPw_Ec4Bqf9Oe07sJYlx-plI36Pr30fP3MilbymBwzRvgWQ" sib_link_id="-2"><span style="text-decoration: underline; color: #5e687b;">View in browser</span></a>
</td>
</tr>
</tbody>
</table>
</td>
<td width="20" style="width: 20px;" class="em_side15"> </td>
</tr>
</tbody></table></td>
</tr>
</tbody></table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="em_full_wrap" bgcolor="#3c81b7" style="table-layout:fixed;">
<tbody><tr>
<td align="center" valign="top" class="em_aside10"><table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:600px; table-layout:fixed;">
<tbody><tr>
<td align="center" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td width="15" style="width: 15px;"> </td>
<td align="center" valign="top" style="padding: 33px 0px 34px;" class="em_pad">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td align="center" valign="top" class="em_w250">
<a href="" target="_blank" style="text-decoration: none;" sib_link_id="-2">
<img src="" width="600px" alt="" border="0" style="display: block; max-width: 600px; font-size: 14px; font-family: Trebuchet MS, sans-sarif; line-height: 16px; color: #ffffff; font-weight: bold;" sib_img_id="0" sib_img_id="6"> </a>
</td>
</tr>
</tbody>
</table>
</td>
<td width="15" style="width: 15px;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" class="em_full_img">
<img style="display: block; max-height: 600px;" border="0" alt="" width="600" src="https://img.mailinblue.com/2622083/images/rnb/original/5e5ea936a209c5f1bb63e3a4.png?t=1603303476946" sib_img_id="1" sib_img_id="7">
</td>
</tr>
</tbody></table></td>
</tr>
</tbody>
</table>
<!-- == //Header Section == -->
<!-- == Body Section == -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="em_full_wrap" bgcolor="#f7f6f2" style="table-layout:fixed;">
<tbody>
<tr>
<td align="center" valign="top" class="em_aside10">
<table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:600px; table-layout:fixed;">
<!-- Banner section -->
<tbody>
<tr>
<td align="center" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tbody>
<tr>
<td width="20" style="width: 20px;" class="em_side15"> </td>
<td align="center" valign="top" style="padding: 10px 0px 10px;" class="em_pad">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="em_defaultlink" align="left" valign="top" style="font-size: 18px; font-family: 'Segoe', 'Lato', Trebuchet MS, sans-serif; line-height: 26px; color: #5e687b;">
<br>
<p><span style="font-size:22px; color:#ed7d31;"><strong>Title</strong></span></p>
<br>
<p><span style="font-size:18px; color:#ed7d31;">Subtitle</span></p>
<br>
<p><span style="font-size:18px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></p><br>
<p>Download the app today at: </p>
</td>
</tr>
</tbody>
<table dir="ltr" width="100%" border="0" cellspacing="0" cellpadding="10" align="center" class="tablescale">
<tbody>
<tr>
<td>
<img src="https://img.mailinblue.com/2622083/images/rnb/original/5f8f1501bf3088251f084b30.png?t=1603303691818" width="230" style="margin:6%;width:88%">
</td>
<td>
<img src="https://img.mailinblue.com/2622083/images/rnb/original/5f8f1535c87258058403a4b3.png?t=1603303702894" width="280">
</td>
</table>
</td>
<td width="20" style="width: 20px;" class="em_side15"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<tr>
<td align="center" valign="top" class="em_full_img">
<img style="display: block; max-height: 600px;" border="0" alt="" width="600" src="https://img.mailinblue.com/2622083/images/rnb/original/5e5ea90ba8a748ea77252c11.png?t=1603303468240" sib_img_id="4" sib_img_id="10">
</td>
</tr>
</td>
</tr>
</tbody></table>
<!-- == //Body Section == -->
<!-- == Footer Section == -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="em_full_wrap" bgcolor="#f7f6f2" style="table-layout:fixed;">
<tbody><tr>
<td align="center" valign="top"><table align="center" width="500" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:500px; table-layout:fixed;" bgcolor="#f7f6f2">
<tbody><tr>
<td align="center" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="em_grey em_ptop" align="left" valign="top" style="font-size: 12px; font-family: 'Segoe', 'Lato', Trebuchet MS, sans-serif; line-height: 19px; color: #9a9ca0; padding-top: 30px;">
We sent this email to <a style="text-decoration:underline;color: #5e687b;" href="mailto:{{contact_email}}">{{contact_email}}</a> because you signed up.
<br><br>

i make this solution that solve your problem but i think the main problem is the picture frame of g play it has more "white space". i hope i was helpful, have a good day.
<tbody>
<tr>
<td>
<a href="" sib_link_id="-2">
<img src="https://img.mailinblue.com/2622083/images/rnb/original/5f8f1501bf3088251f084b30.png?t=1603303691818" style="max-width:200px;width:100%">
</a>
</td>
<td>
<a href="" sib_link_id="-2">
<img src="https://img.mailinblue.com/2622083/images/rnb/original/5f8f1535c87258058403a4b3.png?t=1603303702894" style="max-width:255px;width:100%">
</a>
</td>
</tr>
</tbody>

Top align <td> in EDM template

Hoping someone can help me with a small problem I'm having modifying the code for an email template.
The template contains <td>'s that when additional copy is added, they center align, but I can't work out how to get them to top align. Like I've shown in the screenshot below:
Hoping someone can help explain the tweak I need to make. Thank you so much!
Code below:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Use the latest (edge) version of IE rendering engine -->
<title>EmailTemplate-Responsive</title>
<!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Please use an inliner tool to convert all CSS to inline as inpage or external CSS is removed by email clients -->
<!-- important in CSS is used to prevent the styles of currently inline CSS from overriding the ones mentioned in media queries when corresponding screen sizes are encountered -->
<!-- CSS Reset -->
<style type="text/css">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html, body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
width: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table, td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode: bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
border-bottom: none !important;
}
/* What it does: Another work-around for iOS meddling in triggered links. */
a[x-apple-data-detectors] {
color: inherit !important;
}
</style>
<!-- Progressive Enhancements -->
<style type="text/css">
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #3eaeef !important;
border-color: #3eaeef !important;
}
/* Media Queries */
#media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
}
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid,
.fluid-centered {
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* And center justify these ones. */
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
</head>
<body bgcolor="#e0e0e0" width="100%" style="margin: 0;" yahoo="yahoo">
<table bgcolor="#e0e0e0" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse;">
<tr>
<td><center style="width: 100%;">
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> (Optional) This text will appear in the inbox preview, but not the email body. </div>
<!-- Visually Hidden Preheader Text : END -->
<!-- Email Header : BEGIN -->
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 20px 0; text-align: center"><img src="https://www.nineforbrands.com.au/wp-content/uploads/2019/12/NineLogo_2D.png" width="200" height="50" alt="Nine-Logo" border="0"></td>
</tr>
</table>
<!-- Email Header : END -->
<!-- Email Body : BEGIN -->
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container">
<!-- Hero Image, Flush : BEGIN -->
<tr>
<td class="full-width-image"><img src="https://www.nineforbrands.com.au/wp-content/uploads/2019/12/9Galaxy_New-TemplateHeader.jpg" width="600" alt="Jordan-Hooper" border="0" align="center" style="width: 100%; max-width: 600px; height: auto;"></td>
</tr>
<!-- Hero Image, Flush : END -->
<!-- 1 Column Text : BEGIN -->
<tr>
<td style="padding: 40px; text-align: center; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555;">
<span style="color: #3697e9; font-size: 25px;"><strong>Nine Galaxy 101<br /></strong></span>
<br>
At Nine we have made TV buying easier with the most advanced buying platform, 9Galaxy. 2019 saw the launch of dynamic audience delivery across all screens, allowing media buyers to buy Nine’s linear TV and broadcast video on demand inventory in one simple transaction.
Wavemaker’s Senior Client Manager, Jordan Hooper, speaks about the benefits of 9Galaxy, saying that it provides speed, accuracy and consistency for their clients, and delivers on audience and reach goals.
To learn more, click below.
<br>
<br>
<!-- Button : Begin -->
<table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">
<tr>
<td style="border-radius: 40px; background: #008fe1; text-align: center;" class="button-td"><a href="http://www.google.com" style="background: #008fe1; border: 15px solid #008fe1; padding: 0 10px;color: #ffffff; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 30px; font-weight: bold;" class="button-a">
<!--[if mso]> <![endif]-->View Video<!--[if mso]> <![endif]-->
</a></td>
</tr>
</table>
<!-- Button : END --></td>
</tr>
<!-- Two Even Columns : BEGIN -->
<tr>
<td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_270x270.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
2020 promises to be a revolutionary year for television with the launch of VOZ or Virtual Australia, the new measurement platform coming in February next year. <br><br> Agencies and TV executives both see this new system giving clients a better understanding of how audiences are shifting and, while they may not be watching the traditional TV screen as much, they are still engaging with the content across multiple devices.<br><br> AdNews asked some of TV's senior executives for their predictions on what 2020 will look like. <br><br>Nine’s Richard Hunwick suggest “My call is that 2020 will be the year ‘Total Television’ comes into its own, as Brand returns to fashion and VOZ allows real and robust cross platform measurement between Linear TV and BVOD.<br><br>
Read more here.<br>
sdfasdfasdf asdfa sd asd fasdf
asd fasdf asdf asd fasd f
as dfasdf asdfasdfa</td>
</tr>
</table></td>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0" >
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_270x270.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
Australia’s favourite social experiment is returning to our screens in 2020 and the search for love will again captivate hearts and minds across the country. As we meet a new group of singles this ratings juggernaut promises to reach new heights, all in the name of love.<br><br> For the second year in a row Married at First Sight was Australia’s No. 1 non-sports program of 2019. MAFS securing a national linear broadcast average audience of 1.948 million viewers per episode (Metro: 1.457 million / Regional: 491,000). The finale attracted a national linear broadcast average audience of 2.798 million viewers (Metro: 2.110 million / Regional: 688,000).<br><br> For a sneak peek at our new MAFS couples, click here. <br><br>Married at First Sight returning to Channel 9 and 9Now in 2020.
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Two Even Columns : END -->
<!-- Three Even Columns : BEGIN -->
<tr>
<td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_270x270.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td>
</tr>
</table></td>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td>
</tr>
</table></td>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. per conubia nostra, per inceptos himenaeos. </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Three Even Columns : END -->
<!-- Thumbnail Left, Text Right : BEGIN -->
<tr>
<td dir="ltr" align="center" valign="top" width="100%" style="padding: 10px;"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" alt="alt_text" border="0" class="center-on-narrow"></td>
</tr>
</table></td>
<td width="66.66%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow"><strong style="color:#111111;">Class aptent taciti sociosqu</strong> <br>
<br>
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <br>
<br>
<!-- Button : Begin -->
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td"><a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; padding: 0 10px;color: #ffffff; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<!--[if mso]> <![endif]-->A Button<!--[if mso]> <![endif]-->
</a></td>
</tr>
</table>
<!-- Button : END --></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Thumbnail Left, Text Right : END -->
<!-- Thumbnail Right, Text Left : BEGIN -->
<tr>
<td dir="rtl" align="center" valign="top" width="100%" style="padding: 10px;"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" alt="alt_text" border="0" class="center-on-narrow"></td>
</tr>
</table></td>
<td width="66.66%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow"><strong style="color:#111111;">Class aptent taciti sociosqu</strong> <br>
<br>
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <br>
<br>
<!-- Button : Begin -->
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td"><a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; padding: 0 10px;color: #ffffff; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<!--[if mso]> <![endif]-->A Button<!--[if mso]> <![endif]-->
</a></td>
</tr>
</table>
<!-- Button : END --></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Thumbnail Right, Text Left : END -->
</table>
<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 40px 10px;width: 100%;font-size: 12px; font-family: sans-serif; mso-height-rule: exactly; line-height:18px; text-align: center; color: #888888;">
<span class="mobile-link--footer"> Source: Text Here.</span> <br>
<br>
<a style="text-decoration: underline; color: #34a2fb;" href="https://www.nineforbrands.com.au/" target="_blank">nineforbrands.com.au</a> <br/> <br/> This email was sent to: <%= recipient.email %> <br/> <br/> <%# include view='UnsubscriptionLink' %>
</td>
</tr>
</table>
<!-- Email Footer : END -->
</center></td>
</tr>
</table>
</body>
</html>

td.stack-column-center{
vertical-align: top;
display: table-cell;
}
add this css to HTML (given)

G'day. You should use display: inherit;
Code below will help your problem;
Also I didin't understand why you using HTML table codes instead of bootstrap or div with class!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Use the latest (edge) version of IE rendering engine -->
<title>EmailTemplate-Responsive</title>
<!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Please use an inliner tool to convert all CSS to inline as inpage or external CSS is removed by email clients -->
<!-- important in CSS is used to prevent the styles of currently inline CSS from overriding the ones mentioned in media queries when corresponding screen sizes are encountered -->
<!-- CSS Reset -->
<style type="text/css">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html, body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
width: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table, td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode: bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
border-bottom: none !important;
}
/* What it does: Another work-around for iOS meddling in triggered links. */
a[x-apple-data-detectors] {
color: inherit !important;
}
</style>
<!-- Progressive Enhancements -->
<style type="text/css">
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #3eaeef !important;
border-color: #3eaeef !important;
}
/* Media Queries */
#media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
}
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid,
.fluid-centered {
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* And center justify these ones. */
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
</head>
<body bgcolor="#e0e0e0" width="100%" style="margin: 0;" yahoo="yahoo">
<table bgcolor="#e0e0e0" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse;">
<tr>
<td><center style="width: 100%;">
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> (Optional) This text will appear in the inbox preview, but not the email body. </div>
<!-- Visually Hidden Preheader Text : END -->
<!-- Email Header : BEGIN -->
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 20px 0; text-align: center"><img src="https://www.nineforbrands.com.au/wp-content/uploads/2019/12/NineLogo_2D.png" width="200" height="50" alt="Nine-Logo" border="0"></td>
</tr>
</table>
<!-- Email Header : END -->
<!-- Email Body : BEGIN -->
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container">
<!-- Hero Image, Flush : BEGIN -->
<tr>
<td class="full-width-image"><img src="https://www.nineforbrands.com.au/wp-content/uploads/2019/12/9Galaxy_New-TemplateHeader.jpg" width="600" alt="Jordan-Hooper" border="0" align="center" style="width: 100%; max-width: 600px; height: auto;"></td>
</tr>
<!-- Hero Image, Flush : END -->
<!-- 1 Column Text : BEGIN -->
<tr>
<td style="padding: 40px; text-align: center; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555;">
<span style="color: #3697e9; font-size: 25px;"><strong>Nine Galaxy 101<br /></strong></span>
<br>
At Nine we have made TV buying easier with the most advanced buying platform, 9Galaxy. 2019 saw the launch of dynamic audience delivery across all screens, allowing media buyers to buy Nine’s linear TV and broadcast video on demand inventory in one simple transaction.
Wavemaker’s Senior Client Manager, Jordan Hooper, speaks about the benefits of 9Galaxy, saying that it provides speed, accuracy and consistency for their clients, and delivers on audience and reach goals.
To learn more, click below.
<br>
<br>
<!-- Button : Begin -->
<table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">
<tr>
<td style="border-radius: 40px; background: #008fe1; text-align: center;" class="button-td"><a href="http://www.google.com" style="background: #008fe1; border: 15px solid #008fe1; padding: 0 10px;color: #ffffff; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 30px; font-weight: bold;" class="button-a">
<!--[if mso]> <![endif]-->View Video<!--[if mso]> <![endif]-->
</a></td>
</tr>
</table>
<!-- Button : END --></td>
</tr>
<!-- Two Even Columns : BEGIN -->
<tr>
<td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_270x270.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
2020 promises to be a revolutionary year for television with the launch of VOZ or Virtual Australia, the new measurement platform coming in February next year. <br><br> Agencies and TV executives both see this new system giving clients a better understanding of how audiences are shifting and, while they may not be watching the traditional TV screen as much, they are still engaging with the content across multiple devices.<br><br> AdNews asked some of TV's senior executives for their predictions on what 2020 will look like. <br><br>Nine’s Richard Hunwick suggest “My call is that 2020 will be the year ‘Total Television’ comes into its own, as Brand returns to fashion and VOZ allows real and robust cross platform measurement between Linear TV and BVOD.<br><br>
Read more here.<br>
sdfasdfasdf asdfa sd asd fasdf
asd fasdf asdf asd fasd f
as dfasdf asdfasdfa</td>
</tr>
</table></td>
<td class="stack-column-center" style="display:inherit;"><table cellspacing="0" cellpadding="0" border="0" >
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_270x270.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
Australia’s favourite social experiment is returning to our screens in 2020 and the search for love will again captivate hearts and minds across the country. As we meet a new group of singles this ratings juggernaut promises to reach new heights, all in the name of love.<br><br> For the second year in a row Married at First Sight was Australia’s No. 1 non-sports program of 2019. MAFS securing a national linear broadcast average audience of 1.948 million viewers per episode (Metro: 1.457 million / Regional: 491,000). The finale attracted a national linear broadcast average audience of 2.798 million viewers (Metro: 2.110 million / Regional: 688,000).<br><br> For a sneak peek at our new MAFS couples, click here. <br><br>Married at First Sight returning to Channel 9 and 9Now in 2020.
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Two Even Columns : END -->
<!-- Three Even Columns : BEGIN -->
<tr>
<td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_270x270.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td>
</tr>
</table></td>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td>
</tr>
</table></td>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. per conubia nostra, per inceptos himenaeos. </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Three Even Columns : END -->
<!-- Thumbnail Left, Text Right : BEGIN -->
<tr>
<td dir="ltr" align="center" valign="top" width="100%" style="padding: 10px;"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" alt="alt_text" border="0" class="center-on-narrow"></td>
</tr>
</table></td>
<td width="66.66%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow"><strong style="color:#111111;">Class aptent taciti sociosqu</strong> <br>
<br>
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <br>
<br>
<!-- Button : Begin -->
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td"><a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; padding: 0 10px;color: #ffffff; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<!--[if mso]> <![endif]-->A Button<!--[if mso]> <![endif]-->
</a></td>
</tr>
</table>
<!-- Button : END --></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Thumbnail Left, Text Right : END -->
<!-- Thumbnail Right, Text Left : BEGIN -->
<tr>
<td dir="rtl" align="center" valign="top" width="100%" style="padding: 10px;"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" alt="alt_text" border="0" class="center-on-narrow"></td>
</tr>
</table></td>
<td width="66.66%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow"><strong style="color:#111111;">Class aptent taciti sociosqu</strong> <br>
<br>
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <br>
<br>
<!-- Button : Begin -->
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td"><a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; padding: 0 10px;color: #ffffff; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<!--[if mso]> <![endif]-->A Button<!--[if mso]> <![endif]-->
</a></td>
</tr>
</table>
<!-- Button : END --></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Thumbnail Right, Text Left : END -->
</table>
<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 40px 10px;width: 100%;font-size: 12px; font-family: sans-serif; mso-height-rule: exactly; line-height:18px; text-align: center; color: #888888;">
<span class="mobile-link--footer"> Source: Text Here.</span> <br>
<br>
<a style="text-decoration: underline; color: #34a2fb;" href="https://www.nineforbrands.com.au/" target="_blank">nineforbrands.com.au</a> <br/> <br/> This email was sent to: <%= recipient.email %> <br/> <br/> <%# include view='UnsubscriptionLink' %>
</td>
</tr>
</table>
<!-- Email Footer : END -->
</center></td>
</tr>
</table>
</body>
</html>
html css email inline
shareeditflag

Can't center text in Outlook 2013

This is a silly problem, but have tried everything I can think of and still can't figure out how to center these two cells of text in Outlook 2003.
Here's a link to the full html file: https://github.com/justintemps/flash-updates/blob/master/dest/index-prod.html?ts=4
The offending (part that won't center) is below.
<table class="body" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0 auto 0 auto; text-align: center;">
<tbody>
<tr>
<td align="center" style="text-align: center;">
<center>
<table class="bodyContainer" align="center" width="600" style="margin: 0 auto; max-width: 600px; padding-top: 5px; table-layout: fixed; text-align: center; width: 100%;">
<tbody>
<tr align="center">
<td class="mainImageContainer" align="center" style="margin: 0 auto; text-align: center;">
<!-- INSERT LINK HERE -->
<a href="" target="_blank">
<!-- INSERT IMAGE URL HERE -->
<img class="mainImage" width="600" alt="" src="http://www.ilo.org/wcmsp5/groups/public/---dgreports/---dcomm/documents/image/wcms_484941.jpg" style="margin: 0 auto; max-width: 600px; padding-top: 5px; table-layout: fixed; text-align: center; width: 100%;">
</a>
</td>
</tr>
<tr align="center">
<td class="mainTitleContainer" align="center" width="600" style="margin: 0 auto; text-align: center;">
<!-- INSERT LINK HERE -->
<a class="noDecorate" href="" target="_blank" style="text-decoration: none;">
<h2 class="mainTitle" style="font-family: Helvetica, Arial, sans-serif; color: #2f2f2f; margin: 0; padding-top: 5px; padding-bottom: 5px; text-align: left;">The International Labour Conference 2016 starts</h2>
</a>
</td>
</tr>
<tr align="center">
<!-- INSERT SUMMARY HERE -->
<td class="bodyText" align="center" width="600" style="font-family: georgia, Palatino, 'Times New Roman', serif; font-size: 14px; line-height: 20px; text-align: left;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<span>
<!-- INSERT LINK HERE -->
<a class="decorate" href="" target="_blank" style="text-decoration: none; color: #37468E; font-weight: bold;">Read More»</a>
</span>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>

You have a few text-align:left;'s in there that are overriding the centering you're doing in parent tags.
...padding-bottom: 5px; text-align: left;">The International...
and
...line-height: 20px; text-align: left;">Lorem ipsum dolor sit...
If you remove the text-align:left; from the examples above, these areas should center justify.

it's work.please copy in all HTML body tag like here

HTML email for – why do some elements not display when mail is opened with Outlook 2010?

EDIT: added images.
I am developing a html email template. After considerable amounts of blood, sweat and tears, it now looks more or less the same in the mail clients we design for:
http://i.imgur.com/aAPcvVv.png
But for some reason, Outlook 2010 won't display the subheading and main image.
http://i.imgur.com/OvcDOYX.png
All images are stored on the same server, but only the logo and the M icon display.
Here's the code:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Newsletter</title>
</head>
<body style="background-color:#f5f5f5; color:#695e4a; font-family: Arial, Helvetica, sans-serif; font-size:12px; margin-top:0px; padding:auto;">
<style type="text/css">
a, h1, h2, span, p {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
table, caption, tbody, tfoot, thead, tr, th, td{
margin: 0;
padding: 0;
/* border: 0;
*/ font-size: 100%;
font: inherit;
}
.readmore{
color:#246877;
text-transform: uppercase;
font-weight: bold;
font-size: 10px;
letter-spacing: 1px;
text-decoration: none;
}
</style>
<table style="padding:none; border:none; border-spacing:0; width:608px" align="center" cellspacing="0">
<tr>
<td rowspan="2" style="border-right: 1px solid #e9e9e9; width:3px; "></td>
<td colspan="2" align="right" style="background-color:#ffffff; font-family: Arial, " HelveticaNeue?,Helvetica,sans-serif;?="">
<br><a style="margin:50px 25px; font-size:9px; color:#b9b9b9; text-decoration:none" href="">View in browser</a>
<div style="border-bottom: 1px solid #f6f6f6; margin:5px 25px;"></div>
</td>
<td rowspan="2" style="border-left: 1px solid #e9e9e9; width:3px; "></td>
</tr>
<!-- Header with LOGO, date, category, BEFORE content -->
<tr>
<td style="width:275px; height: 89px; background-color:#ffffff; padding:10px 0px 10px 25px"><img src="[removed due to non disclosure contract]"></td>
<td style="text-align:right; width:275px; height: 89px; background-color:#ffffff; color:#6a604c; font-size:9px; text-transform:uppercase; line-height:13px; padding-right:25px;">
<span style="font-family: Arial, Helvetica, sans-serif;">Monday, July 1st, 2013<br>optional communication category</span>
</td>
</tr>
<!-- Heading Ribbon -->
<tr>
<td colspan="4" style="background-color:#dbd1cd; height:50px; padding-left:29px">
<table cellspacing="0">
<tr>
<td style="width:522px">
<h1 style="text-transform:uppercase; font-size:22px; font-weight: normal; color:#6a604c; font-family: Arial, Helvetica, sans-serif; padding-top: 17px;
line-height: 0px;">Minor change in membership Rules</h1>
</td>
<!-- Optional icon (mandatory, urgent etc) goes in this td -->
<td style="padding-right:25px; padding-left:25px; width:28px"><img src="[removed due to non disclosure contract]" align="right"></td>
</tr>
</table>
</td>
</tr>
<!-- shadow below ribbon -->
<tr>
<td colspan="4" style="height:4px;">
<img src="[removed due to non disclosure contract]">
</td>
</tr>
<!-- Features, contained in a nested table -->
<tr>
<td style="border-right: 1px solid #e9e9e9; width:3px; "></td>
<td colspan="2" style="background-color:#fff; border-bottom: 1px solid #e9e9e9;">
<table style="padding:none; border:none; border-spacing:0;">
<tr>
<td colspan="2" style="padding: 10px 25px; font-family: Arial, Helvetica, sans-serif;">
<h2>Font-family is specified in global styles for each element</h2>
<img src="[removed due to non disclosure contract]">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie augue ut rutrum interdum. Curabitur varius nisl nec velit dictum feugiat. Nam et augue posuere elit sodales mattis ut nec justo. Etiam auctor rutrum leo in vulputate. Ut eget sem malesuada, consequat ligula id, rutrum lacus. Aenean tempor, magna tincidunt lobortis rutrum, urna arcu mollis diam, nec fermentum arcu mi sed lectus.
</p>
<a class="readmore" href="">Read more</a>
</td>
</tr>
<tr>
<td style="padding: 10px 25px">
subtitle, image, excerpt, <a>read more</a>
</td>
<td style="padding: 10px 25px">
subtitle, image, excerpt, <a>read more</a>
</td>
</tr>
</table>
</td>
<td style="border-left: 1px solid #e9e9e9; width:3px;"></td>
</tr>
<!-- optional features -->
</table>
</body>
</html>

I had a similar problem.
My img tag was like this
<img src="http://mydomain/images/myimage.jpg" width="600" height="300" alt="my image" />
It worked fine in all other email clients but for Outlook I needed to include the www to make it show up:
<img src="http://www.mydomain/images/myimage.jpg" width="600" height="300" alt="my image" />

hmmmm i think that will display the images as well :) just put the <img src=""> its complete path ....

They are so many rules for an html email.
for an image you should always put width, height and alt element
for exemple:
<img src="http://mydomaine/images/myimage.jpg" width="600" height="300" alt="my image" border="0" style="display:block" />
"display:block" is a hack for hotmail to display the good size of the image.
(btw are you sure that it's the good html code you gave? cause I can't see the line 83 in your screenshot: "Font-family is specified in global styles for each element" )