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-
Related
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>
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
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
I have a content block for an email that is not functioning as I want it to in Outlook. The block also needs to work in mobile and should look like this in browser/desktop:
.
In all browsers this looks perfect, except Outlook. In Outlook, it removes the entire white background colour from the button (it actually reduces it down to the text content) and it looks god awful:
Here is my code for the box:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table bgcolor="#f5f5f5" border="0" cellpadding="0" cellspacing="0" class="w-full" width="640">
<tr>
<td width="20"> </td>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" dir="ltr" width="100%">
<tr>
<td class="full" dir="ltr" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<!--TABLE WITH IMAGE PART-->
<tr>
<td height="15" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td align="center"> <img src="http://placehold.it/170x170" style="display: block; border: 0;" width="170"></td>
</tr>
<tr>
<td height="15" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</table>
</td>
<td class="full" dir="ltr" valign="top" width="50%">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<!--TABLE WITH TEXT AND TITLE PART-->
<tr>
<td style="font-size: 1px; line-height: 1px;" width="20"> </td>
<td height="15" style="font-size: 1px; line-height: 1px;"> </td>
<td style="font-size: 1px; line-height: 1px;" width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td align="left" class="font-22c" style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #7e828c; font-size: 20px; text-transform: uppercase;"> Lorem ipsum dolor</td>
<td width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td height="20"> </td>
<td width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td align="left" class="font-16c" style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #7e828c; font-size: 16px; line-height: 20px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td height="20"> </td>
<td width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td class="cta" bgcolor="" width="" style="-webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border: 0px;font-family: Century Gothic; padding-top: 0px; padding-bottom:0px; font-weight:;"> <a class="cta" href="http://www.example.com" style="padding: 10px; width:150px; display: block;text-decoration: none; border:0 ; text-align: center;font-weight: bold; font-size: 14px; font-family: Century Gothic, Helvetica, Arial, sans-serif; color: #8b8b93; background: #ffffff; border: 1px solid #8b8b93; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; line-height:30px;">LORUM IPSUM</a> </td>
<td width="20"> </td>
</tr>
<tr>
<td style="font-size: 1px; line-height: 1px;" width="20"> </td>
<td height="15" style="font-size: 1px; line-height: 1px;"> </td>
<td style="font-size: 1px; line-height: 1px;" width="20"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="20"> </td>
</tr>
</table>
</td>
</tr>
And the class CTA is as follows:
cta {
margin: auto;
display: inline-block;
background:#ffffff !important;
}
/* BUTTON STYLES */
cta {
padding: 15px 15px;
width: 150px;
font-family: 'AvantGarde-demibold', 'Century Gothic', 'Arial Bold', Arial, sans-serif !important;
font-size: 14px;
font-weight: bold;
color: #8b8b93;
background: #ffffff !important;
border: 1px solid #8b8b93;
font-weight: bold;
align-content: center;
}
Unfortunately it requires a lot more code than it should to get a button displaying well and being clickable in Outlook. Something like this should do the trick (no CSS in the <style> necessary unless you want to do :hover effects):
<!-- Button : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="border-radius: 3px; background: #FFFFFF; text-align: center;">
<a href="http://www.google.com" style="background: #FFFFFF; padding: 15px; border: 1px solid #8b8b93; font-family: 'AvantGarde-demibold', 'Century Gothic', 'Arial Bold', Arial, font-size: 14px; line-height: 1.1; text-align: center; text-decoration: none; display: block; font-weight: bold;">
<span style="color:#8b8b93;">A Button</span>
</a>
</td>
</tr>
</table>
<!-- Button : END -->
Honestly, the only way I've been able to get outlook HTML to look the way I want is to hand generate the HTML using roughly HTML2 standard tags and properties and not using CSS at all. Some CSS renders, but it's really hit or miss.
So I think is better to directly set the background-color to your Html tag than in your css file
I'm trying to place a table within a cell in an email, and cannot figure out how to limit the width of the inside table in Outlook. I've tried to use "The Hybrid Coding Approach" (http://labs.actionrocket.co/the-hybrid-coding-approach) and THINK I tried Outlook conditional statements correctly (http://labs.actionrocket.co/microsoft-outlook-conditional-statements). There's a lot of places where I'm seeing the conditional commenting for mso, but whenever I test the email in Litmus, Outlook still displays this giant set of images in the middle. What am I doing wrong? Any help would be greatly appreciated.
<table style="border-collapse: collapse; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: #777777;" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td colspan="2" style="padding-top: 20px; padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" width="600">
<h2 style="font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; line-height: 27pt; color: #555555; font-weight: 300; margin-top: 0; margin-bottom: 15px !important; padding: 0;">April is always <span class="highlighted" style="color: #518fce;">#BetterWithStraw</span>!</h2>
</td>
</tr>
<tr>
<td colspan="2" style="padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" valign="top" width="255">Introductory text.
<table style="border-collapse: collapse; border-spacing: 0;" cellpadding="0" cellspacing="0" width="126">
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 5px; font-size: 2px; line-height: 0px;" height="31" width="600"><img alt="" src="https://s3.amazonaws.com/AgileEmailTemplates/newsletter/rocketmail/Blue/Light-Background/images/divider.png" style="display: block;" align="left" height="31" hspace="0" border="0" vspace="0" width="600" /></td>
</tr>
</tbody>
</table>
<!-- End of content 1--> <!-- Start of content 2-->
<table style="border-collapse: collapse; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: #777777;" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td colspan="2" style="padding-top: 20px; padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" width="600">
<h2 style="font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; line-height: 27pt; color: #555555; font-weight: 300; margin-top: 0; margin-bottom: 15px !important; padding: 0;">Vote <span class="highlighted" style="color: #518fce;">here</span>!</h2>
</td>
</tr>
<tr>
<td colspan="2" style="padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" valign="top" width="255">
<!--[if mso>
<table width="540" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<![endif]-->
<table style="width: 100%;" align="center" cellpadding="0">
<tbody>
<tr><th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514273836?id=tinymce_image_upload" width="100%" /></th></tr>
<tr>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514291930?id=tinymce_image_upload" width="100%" /></td>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514301534?id=tinymce_image_upload" width="100%" /></td>
</tr>
<tr>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514313875?id=tinymce_image_upload" width="100%" /></td>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514322076?id=tinymce_image_upload" width="100%" /></td>
</tr>
<tr><th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514330960?id=tinymce_image_upload" width="100%" /></th></tr>
</tbody>
</table>
<!--[if mso>
</td>
</tr>
</table>
<![endif]-->
<div style="display: none;"> </div>
<table style="border-collapse: collapse; border-spacing: 0;" cellpadding="0" cellspacing="0" width="126">
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 5px; font-size: 2px; line-height: 0px;" height="31" width="600"><img alt="" src="https://s3.amazonaws.com/AgileEmailTemplates/newsletter/rocketmail/Blue/Light-Background/images/divider.png" style="display: block;" align="left" height="31" hspace="0" border="0" vspace="0" width="600" /></td>
</tr>
</tbody>
</table>
Thank you!
The issue is that Lotus Notes, Outlook 2003, 2010 and 2016, needs to have a fixed width on any image. If you insert a 1280px wide retina image, and set it to 100% in width, then it will ignore the outside box, and just become 100% of its original width.
So what you need to do is make a width on each image like this:
<table style="width: 100%;" align="center" cellpadding="0">
<tbody>
<tr>
<th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514273836?id=tinymce_image_upload" width="536" /></th>
</tr>
<tr>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514291930?id=tinymce_image_upload" width="267" />
</td>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514301534?id=tinymce_image_upload" width="267" />
</td>
</tr>
<tr>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514313875?id=tinymce_image_upload" width="267" />
</td>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514322076?id=tinymce_image_upload" width="267" />
</td>
</tr>
<tr>
<th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514330960?id=tinymce_image_upload" width="536" /></th>
</tr>
</tbody>
</table>
And then with Media queries make it optimal for mobile
#media screen and (max-width: 480px) {
a img{
max-width:100% !important;
width:100% !important;
}
}