I am designing the email newsletter template .
I created two buttons left and right side equally but it is not fit equal horizontal .
Here is html my code.
the output shows correctly in gmail but the out look not supported.
<tr>
<td width="540" valign="top">
<table class="full" valign="left" width="255" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style="margin: 0;">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
<a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;">
<font color="white"><span style="display:block;"><b>START YOUR FREE TRAIL</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="full" valign="right" align="right" width="255" cellspacing="0" cellpadding="0" border="0" style=" display:inline-block;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style=" ">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px; font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;"><a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;"><font color="white"><span style="display:block;"><b>GET A QUICK QUOTE</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I want align equally in both side and need to support the outlook mail
Wrap your code in a table and put the two tables containing the buttons in two separate td.
Here is the code sample and fiddle
<table>
<tr>
<td width="540" valign="top">
<table class="full" valign="left" width="255" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style="margin: 0;">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
<a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;">
<font color="white"><span style="display:block;"><b>START YOUR FREE TRAIL</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="full" valign="right" align="right" width="255" cellspacing="0" cellpadding="0" border="0" style=" display:inline-block;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style=" ">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px; font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
<a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank">
<font size="1" face="Arial">
<span style="font-size:12px;">
<font color="white">
<span style="display:block;">
<b>GET A QUICK QUOTE</b>
</span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
Add float:left in both your <table> tags and it will do the trick.
replace your code with mine
<tr>
<td width="540" valign="top">
<table class="full" valign="left" width="255" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;float:left; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style="margin: 0;">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
<a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;">
<font color="white"><span style="display:block;"><b>START YOUR FREE TRAIL</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="full" valign="right" align="right" width="255" cellspacing="0" cellpadding="0" border="0" style=" display:inline-block;border-collapse:collapse;float:left; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style=" ">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px; font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;"><a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;"><font color="white"><span style="display:block;"><b>GET A QUICK QUOTE</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Related
Running into my regular struggles with email template designs, in particular that Gmail removes classes and thus I can't center a td via any means. Is there any way at all to change the "align" from left to center on the td with the image? Maybe I can comment in additional TDs on sides to center it, if Gmail permits it. I'm at a loss.
Template is mildly frankensteined from a template block editor.
<table class="row" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="280" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:auto !important;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td class="img-responsive" width="280" align="left">
<img alt="280x200x1" src="#" style="width:100%; height:auto;" width="280" height="200">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center">
<table data-primary-order="1" data-primary-type="bgcolor" data-bgcolor="Columns" width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f6f6" align="center">
<tbody><tr>
<td align="center">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; max-width:90%; width:90%;" width="90%" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
<tr>
<td>
<table style="width:auto !important;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td data-color="Titles" data-size="Titles" data-min="14" data-max="46" style="color: #333333; font-family: 'roboto', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 13px; line-height: 22.1px;" align="left">text text<br>text text</td></tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
I believe the following code should resolve your issue. When viewing the code you will see there is an element with an id of "I CHANGED FROM LEFT TO CENTER". This seemed to cause the issue, hopefully it works for you too!
<!DOCTYPE html>
<html>
<body>
<table class="row" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="280" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:auto !important;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td class="img-responsive" width="280" align="left">
<img alt="280x200x1" src="#" style="width:100%; height:auto;" width="280" height="200">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center">
<table data-primary-order="1" data-primary-type="bgcolor" data-bgcolor="Columns" width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f6f6" align="center">
<tbody><tr>
<td align="center">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; max-width:90%; width:90%;" width="90%" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
<tr>
<td>
<table style="width:auto !important;" cellspacing="0" cellpadding="0" align="center" id="I CHANGED FROM LEFT TO CENTER">
<tbody><tr>
<td data-color="Titles" data-size="Titles" data-min="14" data-max="46" style="color: #333333; font-family: 'roboto', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 13px; line-height: 22.1px;" style="text-align: right;">text text<br>text text</td></tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</body>
</html>
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
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 :)
The below images (Scenario A, Scenario B) are taken from GMAIL app for same newsletter. The only difference is the highlighted portion in Scenario B is an image. Ideally I want scenario B (its properly aligned and takes 600 px width), but how can I achieve it with text itself (as shown in Scenario A)?
The problem I am facing is its getting wrapped like a mobile layout and because of that the whole template width is getting reduced.
Scenario A Scenario B
The difference in code for Scenario A & Scenario B
Scenario A:
<div style="background-color:#f6f4f5;padding:0;margin:0 auto;width:100%!important">
<div style="overflow:hidden;color:transparent;width:0;font-size:0;min-height:0">
</div>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f4f5" border="0" align="center" style="table-layout:fixed;font-family:Helvetica,Arial,sans-serif">
<tbody>
<tr>
<td align="center">
<center style="width:100%">
<table width="580" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF" style="margin:0 auto; max-width:580px; width:inherit; font-family:Helvetica,Arial,sans-serif">
<tbody>
<tr>
<td width="100%" bgcolor="#F3F3F3" style="background-color:#f6f4f5;padding:12px;border-bottom:1px solid #ececec">
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="font-weight:200;width:100%!important;font-family:Helvetica,Arial,sans-serif;min-width:100%!important">
<tbody>
<tr>
<td width="47%" valign="middle">
<div>
<a target="_blank" title="MyTechLogy" href="http://www.mytechlogy.com/"><img src="http://www.mytechlogy.com/view/images/MyTechLogy-Logo-TagLine-200.png" border="0" style="display:block;border:none;outline:none;text-decoration:none" title="MyTechLogy" alt="MyTechLogy"></a>
</div>
</td>
<td align="left" width="47%" valign="middle" style="padding:10px 0 10px 20px">
<div>
<img src="http://www.mytechlogy.com/upload/by_users/Bharath/241605103728ITcareerdevelopment.png" border="0" style="display:block; border:none; outline:none; text-decoration:none; height:60px;" title="Your Online Professional IT Career Development Platform." alt="Your Online Professional IT Career Development Platform.">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#29acc8" align="center" width="580">
<tbody>
<tr valign="middle" style="vertical-align:middle">
<td width="100%" height="30" style="padding-left: 20px; font-family:Helvetica,Arial,sans-serif; font-size:16px; color:#ffffff;line-height:20px;vertical-align:middle;text-align:left;"><strong><span style="text-align:left;">Weekly Highlights from the Analytics Corner</span></strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:20px; color:#29acc8; line-height:28px; vertical-align:middle; padding-top:20px; padding-bottom:5px;padding-left:20px; padding-right:10px">
<strong><span style="color:#29acc8;">Tips to ace your Data Analytics Interview</span></strong>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#000000; line-height:20px; vertical-align:middle; padding-top:5px; padding-bottom:0px; padding-left:20px; padding-right:10px">
I test drove the new Career Initiative feature at MyTechlogy and was pretty impressed by the kind of insights it threw up overnight. I think young professionals in data analytics or data science will find it helpful if they're looking for data that will help them make a decision about their own careers.. <span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#29acc8;">Read more >></span>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#29acc8; line-height:28px; vertical-align:middle; padding-top:10px; padding-bottom:5px; padding-left:20px; padding-right:10px">
<strong><span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#333333;line-height:28px;">Career Switch to Analytics?</span> <span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#333333;line-height:28px;"><span style="color:#29acc8;">See which IT skills can help you get there >></span></span></strong>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" width="560">
<tbody>
<tr valign="middle" style="vertical-align:middle; ">
<td width="100%" height="10" ></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding-top:20px;">
<div align="center">
<table align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" width="560">
<tbody>
<tr>
<td width="560px" align="left" valign="middle" height="60" style=" text-align:left; background-color:#29acc8; font-size:21px; font-family:Helvetica, arial, sans-serif; color:#ffffff; font-weight: 300; padding-left:10px;">
<span style="color: #ffffff; font-weight: 400;text-align:left">
<strong>IT Career Progression made easier with MyTechLogy</strong>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" width="560">
<tbody>
<tr valign="middle" style="vertical-align:middle;">
<td width="100%" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#000000; line-height:20px; vertical-align:middle; padding-top:5px; padding-bottom:10px; padding-left:20px; padding-right:10px">
MyTechlogy provides personalized insights from industry data to help you stay relevant and to progress your IT career.
</td>
</tr>
<tr valign="middle" style="vertical-align:middle; ">
<td align="center" valign="middle" style="vertical-align:middle; ">
<a target="_blank" href="http://www.mytechlogy.com/my-page/?create_initiative=yes"><img width="540" border="0" height="163" alt="IT career progression has been made easier with MyTechLogy" style="display:block; border:none; outline:none; text-decoration:none;" src="http://www.mytechlogy.com/upload/by_users/Bharath/181605050426CareerProgression.png" class="bigimage"></a>
</td>
</tr>
<tr>
<td width="100%" height="10"></td>
</tr>
<tr>
<td>
<div align="center">
<a style="color: #ffffff; text-align:center;text-decoration: none;" href="http://www.mytechlogy.com/my-page/?create_initiative=yes">
<table height="60" align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" class="tablet-button" st-button="edit">
<tbody>
<tr align="center">
<td width="auto" align="center" valign="middle" height="60" style=" background-color:#FF6600; border-top-left-radius:2px; border-bottom-left-radius:2px;border-top-right-radius:2px; border-bottom-right-radius:2px; background-clip: padding-box;font-size:22px; font-family:Helvetica, arial, sans-serif; text-align:center; color:#ffffff; font-weight: 300; padding-left:18px; padding-right:18px; box-shadow: 1px 5px 5px #888888;">
<span style="color: #ffffff; font-weight: 400;">
<a style="color: #ffffff; text-align:center;text-decoration: none;" href="http://www.mytechlogy.com/my-page/?create_initiative=yes"><strong>Create your Career Initiative Now!</strong></a>
</span>
</td>
</tr>
</tbody>
</table>
</a>
</div>
</td>
</tr>
<tr>
<td width="100%" height="30"></td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#29acc8" align="center" width="580">
<tbody>
<tr valign="middle" style="vertical-align:middle">
<td width="100%" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#f6f4f5" align="center" width="580">
<tbody>
<tr>
<td align="left" valign="middle" style="font-family:Calibri,sans-serif;font-size:11px;color:#666666;line-height:15px; padding-left:10px;padding-right:10px;">
<div style="background-color:#f6f4f5;padding-top:20px;margin:0 auto;width:100%!important">
To unsubscribe from receiving this email into future, click <a target="_blank" style="text-decoration:none;color:#0db9ea" href="[UNSUBSCRIBEURL]">unsubscribe</a> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
Scenario B:
<div style="background-color:#f6f4f5;padding:0;margin:0 auto;width:100%!important">
<div style="overflow:hidden;color:transparent;width:0;font-size:0;min-height:0">
</div>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f4f5" border="0" align="center" style="table-layout:fixed;font-family:Helvetica,Arial,sans-serif">
<tbody>
<tr>
<td align="center">
<center style="width:100%">
<table width="580" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF" style="margin:0 auto; max-width:580px; width:inherit; font-family:Helvetica,Arial,sans-serif">
<tbody>
<tr>
<td width="100%" bgcolor="#F3F3F3" style="background-color:#f6f4f5;padding:12px;border-bottom:1px solid #ececec">
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="font-weight:200;width:100%!important;font-family:Helvetica,Arial,sans-serif;min-width:100%!important">
<tbody>
<tr>
<td width="47%" valign="middle">
<div>
<a target="_blank" title="MyTechLogy" href="http://www.mytechlogy.com/"><img src="http://www.mytechlogy.com/view/images/MyTechLogy-Logo-TagLine-200.png" border="0" style="display:block;border:none;outline:none;text-decoration:none" title="MyTechLogy" alt="MyTechLogy"></a>
</div>
</td>
<td align="left" width="340" valign="middle" style="padding:10px 0 10px 10px">
<div> <span style="font-family:Helvetica,Arial,sans-serif; font-size:20px; color:#333333; line-height:28px; vertical-align:middle;">Your Online Professional<br />IT Career Development Platform.</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#29acc8" align="center" width="580">
<tbody>
<tr valign="middle" style="vertical-align:middle">
<td width="100%" height="30" style="padding-left: 20px; font-family:Helvetica,Arial,sans-serif; font-size:16px; color:#ffffff;line-height:20px;vertical-align:middle;text-align:left;"><strong><span style="text-align:left;">Weekly Highlights from the Analytics Corner</span></strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:20px; color:#29acc8; line-height:28px; vertical-align:middle; padding-top:20px; padding-bottom:5px;padding-left:20px; padding-right:10px">
<strong><span style="color:#29acc8;">Tips to ace your Data Analytics Interview</span></strong>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#000000; line-height:20px; vertical-align:middle; padding-top:5px; padding-bottom:0px; padding-left:20px; padding-right:10px">
I test drove the new Career Initiative feature at MyTechlogy and was pretty impressed by the kind of insights it threw up overnight. I think young professionals in data analytics or data science will find it helpful if they're looking for data that will help them make a decision about their own careers.. <span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#29acc8;">Read more >></span>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#29acc8; line-height:28px; vertical-align:middle; padding-top:10px; padding-bottom:5px; padding-left:20px; padding-right:10px">
<strong><span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#333333;line-height:28px;">Career Switch to Analytics?</span> <span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#333333;line-height:28px;"><span style="color:#29acc8;">See which IT skills can help you get there >></span></span></strong>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" width="560">
<tbody>
<tr valign="middle" style="vertical-align:middle; ">
<td width="100%" height="10" ></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding-top:20px;">
<div align="center">
<table align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" width="560">
<tbody>
<tr>
<td width="560px" align="left" valign="middle" height="60" style=" text-align:left; background-color:#29acc8; font-size:21px; font-family:Helvetica, arial, sans-serif; color:#ffffff; font-weight: 300; padding-left:10px;">
<span style="color: #ffffff; font-weight: 400;text-align:left">
<strong>IT Career Progression made easier with MyTechLogy</strong>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" width="560">
<tbody>
<tr valign="middle" style="vertical-align:middle;">
<td width="100%" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#000000; line-height:20px; vertical-align:middle; padding-top:5px; padding-bottom:10px; padding-left:20px; padding-right:10px">
MyTechlogy provides personalized insights from industry data to help you stay relevant and to progress your IT career.
</td>
</tr>
<tr valign="middle" style="vertical-align:middle; ">
<td align="center" valign="middle" style="vertical-align:middle; ">
<a target="_blank" href="http://www.mytechlogy.com/my-page/?create_initiative=yes"><img width="540" border="0" height="163" alt="IT career progression has been made easier with MyTechLogy" style="display:block; border:none; outline:none; text-decoration:none;" src="http://www.mytechlogy.com/upload/by_users/Bharath/181605050426CareerProgression.png" class="bigimage"></a>
</td>
</tr>
<tr>
<td width="100%" height="10"></td>
</tr>
<tr>
<td>
<div align="center">
<a style="color: #ffffff; text-align:center;text-decoration: none;" href="http://www.mytechlogy.com/my-page/?create_initiative=yes">
<table height="60" align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" class="tablet-button" st-button="edit">
<tbody>
<tr align="center">
<td width="auto" align="center" valign="middle" height="60" style=" background-color:#FF6600; border-top-left-radius:2px; border-bottom-left-radius:2px;border-top-right-radius:2px; border-bottom-right-radius:2px; background-clip: padding-box;font-size:22px; font-family:Helvetica, arial, sans-serif; text-align:center; color:#ffffff; font-weight: 300; padding-left:18px; padding-right:18px; box-shadow: 1px 5px 5px #888888;">
<span style="color: #ffffff; font-weight: 400;">
<a style="color: #ffffff; text-align:center;text-decoration: none;" href="http://www.mytechlogy.com/my-page/?create_initiative=yes"><strong>Create your Career Initiative Now!</strong></a>
</span>
</td>
</tr>
</tbody>
</table>
</a>
</div>
</td>
</tr>
<tr>
<td width="100%" height="30"></td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#29acc8" align="center" width="580">
<tbody>
<tr valign="middle" style="vertical-align:middle">
<td width="100%" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#f6f4f5" align="center" width="580">
<tbody>
<tr>
<td align="left" valign="middle" style="font-family:Calibri,sans-serif;font-size:11px;color:#666666;line-height:15px; padding-left:10px;padding-right:10px;">
<div style="background-color:#f6f4f5;padding-top:20px;margin:0 auto;width:100%!important">
To unsubscribe from receiving this email into future, click <a target="_blank" style="text-decoration:none;color:#0db9ea" href="[UNSUBSCRIBEURL]">unsubscribe</a> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
Please help how can I solve this issue.
These td's should be placed within a table that's 600px wide and thát one should be placed within a table that's 100% wide.
Hope this helps. Otherwise, please post more of your code, so we can adjust it.
please use following code:
<table align=center" width="100%">
<td align="left" width="48%" valign="middle" style="padding:10px 0 10px 10px;font-family:Helvetica,Arial,sans-serif; font-size:20px; color:#333333; line-height:28px; vertical-align:middle;">
Your Online Professional<br />IT Career Development Platform.
</td>
<td align="left" width="48%" valign="middle" style="padding:10px 0 10px 10px"><img src="http://www.mytechlogy.com/upload/by_users/Bharath/241605103728ITcareerdevelopment.png" border="0" style="display:block; border:none; outline:none; text-decoration:none; height:60px;" title="Your Online Professional IT Career Development Platform." alt="Your Online Professional IT Career Development Platform."></td>
</table>
I am working on an e-mail template that includes 2 links to a website and an e-mail address. They are both of varying widths and have it setup so that they're both beside each other and centred down the middle.
Recently ran into a problem when testing with Outlook and saw that the boxes were not centred and rather pushed to the left and right.
Here are some screenshots of what is happening:
Browser / Other E-mail Clients:
Outlook / Word Templating Engine:
The Code:
<td style="padding-bottom:0px; padding-left:10px; padding-right:10px; padding-top:22px; " align="center">
<table class="contact_links_container" border="0" cellspacing="0" cellpadding="0" width="580" align="center" style="margin:auto; ">
<tr>
<td align="center">
<div class="templateEdit" id="contact_links">
<table class="contact_button_container" style="margin: auto;" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td style="width: 10px;" width="10"> </td>
<td>
<a href="http://www.domain.com">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 10px 20px; border: 1px solid #c3c6c6; border-radius: 3px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-right: 10px;" height="20" align="center" valign="middle">
<a href="http://www.domain.com/">
<img src="/images/icn_globe.png" border="0" alt="" width="18" height="18" />
</a>
</td>
<td style="font-family: Verdana, Geneva, sans-serif; font-size: 15px;" align="left" valign="middle"><a style="color: #7f7f7f; text-decoration: none;" href="http://www.domain.com/">www.domain.com</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</a>
</td>
<td style="width: 10px;" width="10"> </td>
</tr>
<tr>
<td style="height: 20px;" colspan="3" height="20"> </td>
</tr>
</tbody>
</table>
<table class="contact_button_container" style="margin: auto;" cellspacing="0" cellpadding="0" align="right">
<tbody>
<tr>
<td style="width: 10px;" width="10"> </td>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 10px 20px; border: 1px solid #c3c6c6; border-radius: 3px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-right: 10px;" align="center" valign="middle">
<a href="mailto:newaccounts#domain.com">
<img src="images/icn_grey_mail.png" border="0" alt="" width="21" height="20" />
</a>
</td>
<td style="font-family: Verdana, Geneva, sans-serif; font-size: 15px;" align="left" valign="middle"><a style="color: #7f7f7f; text-decoration: none;" href="mailto:apisupport#domain.com">Email</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 10px;" width="10"> </td>
</tr>
<tr>
<td style="height: 20px;" colspan="3" height="20"> </td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</td>
Does anyone have any ideas on how I can format it so that it works appears in Outlook as it does in the 1st image?
Specify the width for div and td wherever needed. It should work, outlook mail client will set the element width to 100% with reference to body if not specified.