I have been unable to hide content in Office 365 that is for a mobile-only portion of an email. I have hid the content in other email clients, including Gmail and Outlook 2007 and 2013. Is there a workaround for Office 365?
Here's a sample of a template I've been working with:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
width:100% !important;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
margin:0;
padding:0;
}
img {
outline:none;
text-decoration:none;
-ms-interpolation-mode:bicubic;
}
table {
border-collapse:collapse;
}
table td {
border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
padding:0;
}
.yshortcuts, .yshortcuts a, .yshortcuts a:link, .yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
color:#000;
text-decoration:none !important;
border-bottom:none !important;
background:none !important;
}
.ReadMsgBody {
width:100%;
}
.ExternalClass {
width:100%;
}
/* END OF GLOBAL RESETS */
#media only screen and (max-device-width: 500px), screen and (max-width: 500px) {
/* START OF MOBILE GRID */
*[class=hide] {
display:none !important;
}
*[class].block {
width:400px!important;
display:block!important;
clear:both!important;
}
*[class=showmobile] {
display:block !important;
margin:auto !important;
width:400px!important;
height:auto !important;
max-height:inherit !important;
overflow:visible !important;
}
}
span.yshortcuts {
color:#000;
background-color:none;
border:none;
}
span.yshortcuts:hover, span.yshortcuts:active, span.yshortcuts:focus {
color:#000;
background-color:none;
border:none;
}
[class].contenteditable {
-webkit-user-select: text !important;
-khtml-user-select: auto !important;
-moz-user-select: auto !important;
-ms-user-select: auto !important;
-o-user-select: auto !important;
user-select: auto !important;
}
</style>
</head>
<body bgcolor="#ffffff" margin="0" style="-webkit-font-smoothing:antialiased; width:100% !important; background:#ffffff; -webkit-text-size-adjust:none;">
<!--Wrapper-->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff"><!--content-->
<table width="750" cellpadding="0" cellspacing="0" class="hide" align="center">
<tbody>
<tr>
<td width="235" class="hide"><img src="http://www.wnyc.org/i/620/372/l/80/1/blackbox.jpeg" width="235" border="0" style="display:block;" alt=""/></td>
<td bgcolor="#ffffff" width="235" class="hide"><img src="http://www.wnyc.org/i/620/372/l/80/1/blackbox.jpeg" width="235" border="0" style="display:block;" alt=""/></td>
<td width="235" class="hide"><img src="http://www.wnyc.org/i/620/372/l/80/1/blackbox.jpeg" alt="" width="235" border="0" style="display:block;"/></td>
</tr>
</tbody>
</table>
<!--content end-->
<!-- mobile only content -->
<div height="0" style="display:none; width:0px; max-height:0px; overflow:hidden;" class="showmobile">
<table height="0" width="235" bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0" class="showmobile" style="margin:0 auto; display:none; border:0;">
<tr>
<td class="showmobile block" align="left"><table width="235" border="0" align="center" cellpadding="0" cellspacing="0" class="showmobile" style="margin:0 auto; display:none;" bgcolor="#ffffff">
<tr>
<td><img src="http://www.wnyc.org/i/620/372/l/80/1/blackbox.jpeg" width="235" border="0" style="display:block;padding-top:10px;padding-bottom:10px;" alt=""/></td>
</tr>
<tr>
<td width="100%" align="center" style="padding: 8px; line-height: 12px;background-color:#ed008c;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #ffffff;"> To unsubscribe, click here</a>. </span></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!-- end mobile only content --></td>
</tr>
</table>
<!--End Wrapper-->
</body>
After spending the last couple days trying to come up with a solution for just this the best I could come up with was adding an inline style to the containing cell of "font-size: 0px;". In a media query I simply set the font-size back to desired.
Related
I am new to email designing. I've an image, some text and a button in a row. When viewed on a mobile device, the image has to be static and the button need to come below the text. So the Image and the text + button has to be side by side. I've used divs and nested divs. Its working as expected on Mobile device. However, the layout is breaking on some web based mail clients such as AOL, Yahoo and Gmail. Working fine on comcast and outlook web. Not sure what I am doing wrong. Please help.
Correctly rendered on comcast web.
Incorrectly rendered on Yahoo web based mail.
Here is the code I've used :
#media screen and (max-width: 480px) {
/* 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;
}
/* What it does: Forces table cells into 1/3-width rows. */
.stack-column-half,
.stack-column-center-half {
display: inline-block !important;
width: 140px !important;
max-width: 140px !important;
direction: ltr !important;
}
/* What it does: Forces table cells into 2/3-width rows. */
.stack-column-2half,
.stack-column-center-2half {
display: inline-block !important;
width: 190px !important;
max-width: 190px !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;
}
/* What it does: Adjust typography on small screens to improve readability */
.email-container p {
font-size: 17px !important;
}
<tr>
<!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. -->
<td dir="ltr" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px 0; background-color: #ffffff;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" style="width: 600px;">
<tr>
<td valign="top" width="200" style="width: 200px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 200px; min-width:80px; vertical-align:top; width:100%;" class="stack-column-half">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 0 10px 10px 10px;">
<img src="https://aishvaryarastogi.worldsecuresystems.com/waze-newsletter-images/Waze_Newsletter_Modules_Desktop_22.png" width="180" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 180px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; border-radius: 10px;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="400" style="width: 400px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px; " class="stack-column-2half mobile-padding1">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 0px 0; text-align: left;" class="center-on-narrow fallback-text mobile-padding1">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="400">
<tr>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding: 0 0px;" class="stack-column" align="left">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 0 20px;" class="mobile-padding1">
<h2 style="margin: 0 0 10px 0; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 18px; color: #333333; font-weight: bold;">John Smith</h2>
<p style="margin: 0 0 10px 0;">Title, title</p>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding-top:0 0px; " class="stack-column mobile-padding1">
<!-- Button : BEGIN -->
<!--[if mso]>
<v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="https://google.com/" style="height:45px;v-text-anchor:middle;width:150px;" arcsize="50%" stroke="false" fillcolor="#32C2EE">
<w:anchorlock/>
<center style="color:#333333;font-family:'Open Sans', Arial,sans-serif;font-size:15px;">Contact</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]> <!-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="float:none;" align="left">
<tr>
<td class="button-td button-td-primary" style="border-radius: 30px; background: #ffffff;">
<a class="button-a button-a-primary fallback-text" href="https://google.com/" style="background: #32C2EE; border: 0px solid #000000; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; font-weight: bold; line-height: 15px; text-decoration: none; padding: 18px 55px; color: #333333; display: block; border-radius: 30px;">Contact</a>
</td>
</tr>
</table>
<!-- <![endif]-->
<!-- Button : END -->
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- Thumbnail Left, Text Right : END -->
I had a play with your code and it seems you are missing width:100%; on the following line:
<div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px;" class="stack-column-2half mobile-padding1">
Once added, the contact link went back into the same line as John Smith and Title, title.
You can try the code below to see if it works for you. I had to add table codes around the table rows to get the rendering to work.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. -->
<td dir="ltr" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px 0; background-color: #ffffff;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" style="width: 600px;">
<tr>
<td valign="top" width="200" style="width: 200px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 200px; min-width:80px; vertical-align:top; width:100%;" class="stack-column-half">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 0 10px 10px 10px;">
<img src="https://aishvaryarastogi.worldsecuresystems.com/waze-newsletter-images/Waze_Newsletter_Modules_Desktop_22.png" width="180" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 180px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; border-radius: 10px;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="400" style="width: 400px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px;width:100%;" class="stack-column-2half mobile-padding1">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 0px 0; text-align: left;" class="center-on-narrow fallback-text mobile-padding1">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="400">
<tr>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding: 0 0px;" class="stack-column" align="left">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 0 20px;" class="mobile-padding1">
<h2 style="margin: 0 0 10px 0; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 18px; color: #333333; font-weight: bold;">John Smith</h2>
<p style="margin: 0 0 10px 0;">Title, title</p>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding-top:0 0px; " class="stack-column mobile-padding1">
<!-- Button : BEGIN -->
<!--[if mso]>
<v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="https://google.com/" style="height:45px;v-text-anchor:middle;width:150px;" arcsize="50%" stroke="false" fillcolor="#32C2EE">
<w:anchorlock/>
<center style="color:#333333;font-family:'Open Sans', Arial,sans-serif;font-size:15px;">Contact</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]> <!-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="float:none;" align="left">
<tr>
<td class="button-td button-td-primary" style="border-radius: 30px; background: #ffffff;">
<a class="button-a button-a-primary fallback-text" href="https://google.com/" style="background: #32C2EE; border: 0px solid #000000; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; font-weight: bold; line-height: 15px; text-decoration: none; padding: 18px 55px; color: #333333; display: block; border-radius: 30px;">Contact</a>
</td>
</tr>
</table>
<!-- <![endif]-->
<!-- Button : END -->
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- Thumbnail Left, Text Right : END -->
</tbody>
</table>
How it shows in Gmail
How it shows in Yahoo
Accurate Design
I've been having a problem with an email not formatting correctly for some platforms. It seems to remove images and background colors in yahoo, and just messes everything up in Gmail. Apple it is perfectly fine.
I'm not super knowledgable in code, I can just make changes but not sure what exactly to add or change to be compatible with all platforms. I think it has to do with the way background colors and pictures are coded.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width">
<!-- 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 -->
<meta name="x-apple-disable-message-reformatting">
<!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title>
<!-- The title tag shows in email notifications, like Android 4.4. -->
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700" rel="stylesheet">
<!-- CSS Reset : BEGIN -->
<!-- CSS Reset : END -->
<!-- Progressive Enhancements : BEGIN -->
<style type="text/css">
html,body{
margin:0 auto !important;
padding:0 !important;
height:100% !important;
width:100% !important;
background:#f1f1f1;
}
*{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
div[style*=margin: 16px 0]{
margin:0 !important;
}
table,td{
mso-table-lspace:0 !important;
mso-table-rspace:0 !important;
}
table{
border-spacing:0 !important;
border-collapse:collapse !important;
table-layout:fixed !important;
margin:0 auto !important;
}
img{
-ms-interpolation-mode:bicubic;
}
a{
text-decoration:none;
}
[x-apple-data-detectors],.unstyle-auto-detected-links *,.aBn{
border-bottom:0 !important;
cursor:default !important;
color:inherit !important;
text-decoration:none !important;
font-size:inherit !important;
font-family:inherit !important;
font-weight:inherit !important;
line-height:inherit !important;
}
.a6S{
display:none !important;
opacity:.01 !important;
}
.im{
color:inherit !important;
}
img.g-img+div{
display:none !important;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 374px){
u ~ div .email-container{
min-width:320px !important;
}
} #media only screen and (min-device-width: 375px) and (max-device-width: 413px){
u ~ div .email-container{
min-width:375px !important;
}
} #media only screen and (min-device-width: 414px){
u ~ div .email-container{
min-width:414px !important;
}
} html,body{
margin:0 auto !important;
padding:0 !important;
height:100% !important;
width:100% !important;
background:#f1f1f1;
}
*{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
div[style*=margin: 16px 0]{
margin:0 !important;
}
table,td{
mso-table-lspace:0 !important;
mso-table-rspace:0 !important;
}
table{
border-spacing:0 !important;
border-collapse:collapse !important;
table-layout:fixed !important;
margin:0 auto !important;
}
img{
-ms-interpolation-mode:bicubic;
}
a{
text-decoration:none;
}
[x-apple-data-detectors],.unstyle-auto-detected-links *,.aBn{
border-bottom:0 !important;
cursor:default !important;
color:inherit !important;
text-decoration:none !important;
font-size:inherit !important;
font-family:inherit !important;
font-weight:inherit !important;
line-height:inherit !important;
}
.a6S{
display:none !important;
opacity:.01 !important;
}
.im{
color:inherit !important;
}
img.g-img+div{
display:none !important;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 374px){
u ~ div .email-container{
min-width:320px !important;
}
} #media only screen and (min-device-width: 375px) and (max-device-width: 413px){
u ~ div .email-container{
min-width:375px !important;
}
} #media only screen and (min-device-width: 414px){
u ~ div .email-container{
min-width:414px !important;
}
} .primary{
background:#f5564e;
}
.bg_white{
background:#ffffff;
}
.bg_light{
background:#fafafa;
}
.bg_black{
background:#000000;
}
.bg_dark{
background:rgba(0,0,0,.8);
}
.email-section{
padding:2.5em;
}
.btn{
padding:12px 20px;
display:inline-block;
text-transform:uppercase;
letter-spacing:2px;
font-weight:600;
}
.btn.btn-primary{
border-radius:30px;
background:#36b1ce;
font-size:13px;
color:#ffffff;
}
.btn.btn-white{
border-radius:5px;
background:#ffffff;
color:#000000;
}
.btn.btn-white-outline{
border-radius:5px;
background:transparent;
border:1px solid #fff;
color:#fff;
}
h1,h2,h3,h4,h5,h6{
font-family:'Raleway',sans-serif;
color:#000000;
margin-top:0;
}
body{
font-family:'Raleway',sans-serif;
font-weight:400;
font-size:15px;
line-height:1.8;
color:rgba(0,0,0,.4);
}
a{
color:#f5564e;
}
.logo h1{
margin:0;
}
.logo h1 a{
color:#000;
font-size:20px;
font-weight:700;
text-transform:uppercase;
font-family:'Raleway',sans-serif;
}
.navigation{
padding:0;
}
.navigation li{
list-style:none;
display:inline-block;
margin-left:5px;
font-size:12px;
font-weight:700;
text-transform:uppercase;
}
.navigation li a{
color:rgba(0,0,0,.6);
}
.hero{
position:relative;
z-index:0;
}
.hero .overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
content:'';
width:100%;
background:#000000;
z-index:-1;
opacity:.3;
}
.hero .icon a{
display:block;
width:60px;
margin:0 auto;
}
.hero .text{
color:rgba(255,255,255,.8);
padding:0 4em;
}
.hero .text h2{
color:#ffffff;
font-size:40px;
margin-bottom:0;
line-height:1.2;
font-weight:300;
}
.heading-section h2{
color:#000000;
font-size:30px;
margin-top:0;
line-height:1.4;
font-weight:300;
}
.heading-section .subheading{
margin-bottom:20px !important;
display:inline-block;
font-size:13px;
text-transform:uppercase;
letter-spacing:2px;
color:rgba(0,0,0,.4);
position:relative;
}
.heading-section .subheading::after{
position:absolute;
left:0;
right:0;
bottom:-10px;
content:'';
width:100%;
height:2px;
background:#f5564e;
margin:0 auto;
}
.heading-section-white{
color:rgba(255,255,255,.8);
}
.heading-section-white h2{
line-height:1;
font-weight:300;
font-size:30px;
padding-bottom:0;
}
.heading-section-white h2{
color:#ffffff;
}
.heading-section-white .subheading{
margin-bottom:0;
display:inline-block;
font-size:30px;
text-transform:uppercase;
letter-spacing:2px;
font-weight:300;
color:rgba(255,255,255,.4);
}
.icon{
text-align:center;
}
.services{
background:rgba(0,0,0,.03);
}
.text-services{
padding:20px 10px 0;
text-align:center;
background:#fafafa;
}
.text-services h4{
font-size:15px;
text-transform:uppercase;
letter-spacing:.5px;
color:#36b1ce;
font-weight:600;
}
.services-list{
padding:0;
margin:0 0 10px;
width:100%;
float:left;
}
.services-list .text{
width:100%;
float:right;
}
.services-list h3{
margin-top:0;
margin-bottom:0;
font-size:15px;
}
.services-list p{
margin:0;
}
.text-tour{
padding-top:10px;
}
.text-tour h3{
margin-bottom:0;
}
.text-tour h3 a{
color:#000;
}
.text-services .meta{
text-transform:uppercase;
font-size:14px;
}
.text-testimony .name{
margin:0;
}
.text-testimony .position{
color:rgba(0,0,0,.3);
}
.counter{
width:100%;
position:relative;
z-index:0;
}
.counter .overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
content:'';
width:100%;
background:#000000;
z-index:-1;
opacity:.3;
}
.counter-text{
text-align:center;
}
.counter-text .num{
display:block;
color:#ffffff;
font-size:34px;
font-weight:700;
}
.counter-text .name{
display:block;
color:rgba(255,255,255,.9);
font-size:13px;
}
ul.social{
padding:0;
}
ul.social li{
display:inline-block;
}
.footer{
color:rgba(255,255,255,.5);
}
.footer .heading{
color:#ffffff;
font-size:20px;
}
.hidden{
display:none;
}
.footer ul{
margin:0;
padding:0;
}
.footer ul li{
list-style:none;
margin-bottom:10px;
}
.footer ul li a{
color:rgba(255,255,255,1);
}
#media screen and (max-width: 500px){
.icon{
text-align:left;
}
} #media screen and (max-width: 500px){
.text-services{
padding-left:0;
padding-right:20px;
text-align:left;
}
}</style></head>
<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #222222;">
<center style="width:100%;background-color:#f1f1f1;">
<div style="display:none;font-size:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family:sans-serif;">
</div>
<div style="max-width:600px;margin:0 auto;" class="email-container">
<!-- BEGIN BODY -->
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin:auto;">
<tr>
<td valign="top" class="bg_white" style="padding:1em 2.5em;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="40%" class="logo" style="text-align:left;">
<h1>
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/beabaa6f-844f-4ffa-9080-6391df1c3ef6.png" style="max-width:200px" alt="beabaa6f-844f-4ffa-9080-6391df1c3ef6.png">
</h1>
</td>
<td width="60%" class="logo" style="text-align:right;">
<ul class="navigation">
<li>
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/ee34875d-ab9f-480d-a11e-150f8027462c.png" style="max-width:25px" alt="ee34875d-ab9f-480d-a11e-150f8027462c.png">
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
<!-- end tr -->
<tr>
<td valign="middle" class="hero bg_white" style="background-image:url('https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1698dfdb-e067-4d6d-acb8-436d9e86c3d4.jpg');background-size:cover;height:400px;">
<table>
<tr>
<td>
<div class="text" style="text-align:center;">
<h2></h2>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- end tr -->
<tr>
<td class="bg_dark email-section" style="text-align:center;">
<div class="heading-section heading-section-white">
<h2>We have a new website!</h2>
<p>We're so excited to unveil our new website! Our website is now easy to navigate to our services, get a quote, and schedule your move. We're excited to give our customers a new, top notch experience to make their move as easy as possible.</p>
<p>visit the site
</p>
</div>
</td>
</tr>
<!-- end: tr -->
<tr>
<td class="bg_white">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="bg_white">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="bg_white email-section">
<div class="heading-section" style="text-align:center;padding:0 30px;">
<h2>All New Service Pages</h2>
<p>We've redesigned and reinvented how deliver our services. We have a general breakdown of each service, plus a detailed service page for those of you who want to learn more specific details.</p>
</div>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" width="50%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding-top:20px;padding-right:10px;">
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/6a5e0310-9a5a-4b52-8487-4702c8cf4fb3.png" alt="" style="width: 100%; max-width: 100px; height: auto; margin: auto; display: block;">
<div class="text-tour" style="text-align:center;">
<h3>
Residential
</h3>
<span class="price">Services include Local Moving, Long Distance and Labor.</span>
</div>
</td>
</tr>
<tr>
<td style="padding-top:20px;padding-right:10px;">
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/e5542099-d033-42ae-8f32-c9198cdc6e00.png" alt="" style="width: 100%; max-width: 100px; height: auto; margin: auto; display: block;">
<div class="text-tour" style="text-align:center;">
<h3>
Collegiate
</h3>
<span class="price">Services include Dorm Store, Lease Layover, Local Moving, and Labor.</span>
</div>
</td>
</tr>
<tr>
<td style="padding-top:20px;padding-right:10px;">
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/22fec672-03f3-4285-a75c-9dc4e1ef78f3.png" alt="" style="width: 100%; max-width: 100px; height: auto; margin: auto; display: block;">
<div class="text-tour" style="text-align:center;">
<h3>
Commercial
</h3>
<span class="price">Services include FF&E, Employee Relocation, Corporate Relocation, and Instutional Moving.</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end: tr -->
</table>
</td>
</tr>
<!-- end:tr -->
<tr>
<td class="bg_white email-section" style="width:100%;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="middle" width="50%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td>
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/6f23aa84-082e-4dba-9d2f-ca5c9fd414af.jpg" alt="" style="width: 100%; max-width: 600px; height: auto; margin: auto; display: block;">
</td>
</tr>
</table>
</td>
<td valign="middle" width="50%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="text-services" style="text-align:left;padding-left:25px;">
<div class="heading-section">
<h3>Moving Tips</h3>
</div>
<div class="services-list">
<div class="text">
<h4>1. Pack up your things</h4>
<p>A small river named Duden flows by their place and supplies</p>
</div>
</div>
<div class="services-list">
<div class="text">
<h4>2. Search for Destination</h4>
<p>A small river named Duden flows by their place and supplies</p>
</div>
</div>
<div class="services-list">
<div class="text">
<h4>3. Be Responsible</h4>
<p>A small river named Duden flows by their place and supplies</p>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end: tr -->
</table>
</td>
</tr>
<!-- Leave a Review -->
<tr>
<td class="bg_light email-section">
<div class="heading-section" style="text-align:center;padding:0 30px;">
<h2>Leave us a Review!</h2>
<p>Had a good moving experience in the past? Please leave us a review on Google!</p>
<p>Leave a Review
</p>
</div>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
</table>
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin:auto;">
<tr>
<td valign="middle" class="bg_black footer email-section">
<table>
<tr>
<td valign="top" width="60%" style="padding-top:20px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align:left;padding-right:10px;">
<h3 class="heading">Follow Us</h3>
<p>Get the latest updates!</p>
<ul class="social">
<li><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/31d75ed2-3027-49aa-b9f2-1969b2cb1f4b.png" alt="" style="width: 30px; padding-right:10px; max-width: 600px; height: auto; display: block;">
</li>
<li><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1f92f2b1-2e26-4add-acf8-b4f8c2056309.png" alt="" style="width: 30px; padding-right: 10px; max-width: 600px; height: auto; display: block;">
</li>
<li><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/63ede42c-5969-4eb5-8f64-5aa9add11cf6.png" alt="" style="width: 30px; max-width: 600px; height: auto; display: block;">
</li>
</ul>
</td>
</tr>
</table>
</td>
<td valign="top" width="40%" style="padding-top:20px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align:left;padding-left:5px;padding-right:5px;">
<h3 class="heading">Contact Info</h3>
<ul>
<li>
<span class="text">130 Industrial Drive<br>Birmingham,AL 35211</span>
</li>
<li>
<span class="text">205-624-4537</span>
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end: tr -->
<tr>
<td valign="middle" class="bg_black footer email-section">
<table>
<tr>
<td valign="top" width="50%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align:left;padding-right:10px;">
<p>© 2019 Move & Store. All Rights Reserved.</p>
</td>
</tr>
</table>
</td>
<td valign="top" width="33%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align:right;padding-left:5px;padding-right:5px;">
<p>Unsubscribe
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
I'm not sure why your hero image is a background image, but if you make it into a regular image, the hero will display in every major email client, including Gmail and Yahoo.
Try this instead:
<tr>
<td valign="middle" class="hero bg_white" style="">
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1698dfdb-e067-4d6d-acb8-436d9e86c3d4.jpg" width="600" />
</td>
</tr>
I pulled out the empty h2 below the image to make it simpler to display the relevant code.
Before I did this, your email hero did not display in Outlook 2007-2019. Even with changing the hero to an img, you have serious issues with this email in Outlook and other clients. I suggest more testing and development to help make sure your customers see your message.
Good luck.
Outlook 2016 is adding space between table rows in HTML email. I can't find a fix that works. Blue section on top should be one bar, not have the white gaps. Gray section on bottom should also be one footer section, not have the two white gaps in it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- 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 -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title>Learn how to improve employee retention by over 40%!</title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / #font-face : BEGIN -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<link href='<link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css' />
<!--<![endif]-->
<!-- Web Font / #font-face : END -->
<!-- CSS Reset -->
<style>
/* 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 auto !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 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: A work-around for iOS meddling in triggered links. */
*[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
}
/* What it does: A work-around for Gmail meddling in triggered links. */
.x-gmail-data-detectors,
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}
h1 {
overflow: hidden;
text-align: center;
}
h2:before,
h2:after {
background-color: #777777;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h2:before {
right: 0.8em;
margin-left: -50%;
}
h2:after {
left: 0.8em;
margin-right: -50%;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* Thanks to Eric Lepetit #ericlepetitsf) for help troubleshooting */
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
#media only screen and (max-width: 600px){
.hero-img {
height:auto !important;
max-width:600px !important;
width: 100% !important;
}
}
</style>
<!-- Progressive Enhancements -->
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #ffd541 !important;
border-color: #ffd541 !important;
}
</style>
</head>
<body padding="0" width="100%" bgcolor="#ffffff" style="padding: 0; margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #ffffff; text-align: center; display: inline-block;"><!-- 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;">Hidden text</div>
<!-- Visually Hidden Preheader Text : END --><!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
2. MSO tags for Desktop Windows Outlook enforce a 600px width.
-->
<div class="email-container" style="max-width: 600px; margin: auto;"><!--[if mso]>
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
<tr>
<td>
<![endif]--><!-- Email Header : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%"><tr><td height="33" bgcolor="#0072bc" style="font-size: 0; line-height: 0;" class=""> </td> </tr><tr><td bgcolor="#0072bc" align="center" class=""><img alt="companyname logo" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4b/50342/155397/companyname_logo_lockup_white.png" aria-hidden="true" border="0" height="54" style="border-spacing: 0; min-height: 54px;"></td></tr><tr><td height="33" bgcolor="#0072bc" style="font-size: 0; line-height: 0;" class=""> </td></tr></table>
<!-- Email Header : END --><!-- Email Body : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tr>
<td align="left" height="5" style="font-family: sans-serif; font-size:1px; mso-line-height-rule: exactly; line-height:100%;" valign="top"> </td>
</tr>
<!-- Hero Image, Flush : BEGIN -->
<tr>
<td style="background: #ffffff" class=""><img alt="" aria-hidden="true" border="0" class="hero-img" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4d/50342/155399/replaced_informed_employees.jpg" style="height: auto; background: #ffffff; border-width: 0px; width: 600px; line-height: 0px; color: #ffffff; max-width: 600px;" width="600"></td>
</tr>
<!-- Hero Image, Flush : END --><!-- 1 Column Text + Button : BEGIN -->
<tr>
<td height="53" style="font-size: 0; line-height: 0; min-height: 53px;" class=""> </td>
</tr>
<tr>
<td class="stack-column-center" style="font-family: 'Lato', sans-serif; line-height: 1.4em; color: #777777; text-align: center; padding: 0px 30px 0px 30px;" width="100%"><span style="color:#0072bc; font-size:18px;"><strong>It’s simple:</strong></span> lorem ipsum.<br>
<br>
lorem ipsum<em>replaceds</em>.</td>
</tr>
<tr>
<td height="40" style="font-size: 0; line-height: 0; min-height: 40px;" class=""> </td>
</tr>
</table>
<!-- Button : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: auto;">
<tr>
<td class="button-td" pardot-data="link-underline:none !important;" style="border-radius: 12px; background: #FFC220; text-align: center; text-decoration: none !important;"><a class="button-a" href="http://www.companynameweb.com/" style="background: rgb(255, 194, 32); border: 15px solid rgb(255, 194, 32); font-family: sans-serif; font-size: 16px; letter-spacing: 1.5px; line-height: 1.1; text-align: center; display: block; border-radius: 4px; font-weight: bold; text-decoration: none !important;"><span class="button-link" style="color:#0072BC; text-transform: uppercase; text-decoration: none !important;"> SEE HOW IT WORKS </span></a></td>
</tr>
</table>
<!-- Button : END --><!-- Social : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" width="90%">
<tr>
<td height="50" style="font-size: 0; line-height: 0; min-height: 50px;" class=""> </td>
</tr>
<tr>
<td align="center" class="stack-column-center" style="font-family: sans-serif; line-height: 20px; color: #777777; padding: 0px 20px 0px 20px; overflow: hidden;">
<h2 style="font-size: 13px; text-transform: uppercase; text-align: center;">Follow us</h2>
</td>
</tr>
<tr>
<td height="40" style="font-size: 0; line-height: 0; min-height: 40px;" class=""> </td>
</tr>
<tr>
<td align="center" class=""><!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]--></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width:600px;" width="100%">
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="LinkedIn social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="YouTube social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="Facebook social icon" aria-hidden="true" height="29" src="png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="Twitter social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" style="font-size: 0; line-height: 0; min-height: 40px;" class=""> </td>
</tr>
</table>
<!-- Social : END -->
<!-- Email Footer : Begin -->
<table align="center" bgolor="#e1e1e1" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:#e1e1e1; border-spacing: 0; max-width: 600px;" width="100%">
<tr>
<td height="39" style="border-spacing: 0; line-height: 0; max-height: 39px; min-height: 39px;" class=""> </td>
</tr>
<tr>
<td class="x-gmail-data-detectors" style="padding: 0px 10px 0px 10px; width: 100%; font-size: 8px; font-family: sans-serif; line-height: 11px; text-align: center; color: #2e2e2e;"><webversion style="color:#2e2e2e; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion><br><br>
© Copyright 2017 <span style="font-weight: bolder;">companyname</span><br>
#companynameweb.com | phone<br>
<span style="font-weight: bolder;">companyname</span> Headquarters | address<br><br>
Click here to unsubscribe</td>
</tr>
<tr>
<td height="39" style="border-spacing: 0; line-height: 0; max-height: 39px; min-height: 39px;" class=""> </td>
</tr>
</table>
<!-- Email Footer : END --><!--[if mso]>
</td>
</tr>
</table>
<![endif]--></div>
</center>
</body>
</html>
I fixed up issues picked by #flexlearn and add in some more code for different supported clients.
Basically these are the changes that i did:
Added display block
removed max and min height on table td
fixed font size and line height to 0px
Also you had two hrefs for the google font (now code looks better in dreamweaver)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- 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 -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title>Learn how to improve employee retention by over 40%!</title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / #font-face : BEGIN -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!-- Web Font / #font-face : END -->
<!-- CSS Reset -->
<style>
/* 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 auto !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 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: A work-around for iOS meddling in triggered links. */
*[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
}
/* What it does: A work-around for Gmail meddling in triggered links. */
.x-gmail-data-detectors,
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}
h1 {
overflow: hidden;
text-align: center;
}
h2:before,
h2:after {
background-color: #777777;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h2:before {
right: 0.8em;
margin-left: -50%;
}
h2:after {
left: 0.8em;
margin-right: -50%;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* Thanks to Eric Lepetit #ericlepetitsf) for help troubleshooting */
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
#media only screen and (max-width: 600px){
.hero-img {
height:auto !important;
max-width:600px !important;
width: 100% !important;
}
}
</style>
<!-- Progressive Enhancements -->
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #ffd541 !important;
border-color: #ffd541 !important;
}
</style>
</head>
<body padding="0" width="100%" bgcolor="#ffffff" style="padding: 0; margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #ffffff; text-align: center; display: inline-block;"><!-- 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;">Hidden text</div>
<!-- Visually Hidden Preheader Text : END --><!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
2. MSO tags for Desktop Windows Outlook enforce a 600px width.
-->
<div class="email-container" style="max-width: 600px; margin: auto;"><!--[if mso]>
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
<tr>
<td>
<![endif]--><!-- Email Header : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%"><tr><td height="33" bgcolor="#0072bc" style="font-size: 0px; line-height: 0px;height:33px;" class=""> </td> </tr><tr><td bgcolor="#0072bc" align="center" class=""><img alt="companyname logo" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4b/50342/155397/companyname_logo_lockup_white.png" aria-hidden="true" border="0" height="54" style="border-spacing: 0; min-height: 54px;display:block;"></td></tr><tr><td height="33" bgcolor="#0072bc" style="font-size: 0px; line-height: 0px;" class=""> </td></tr></table>
<!-- Email Header : END --><!-- Email Body : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tr>
<td align="left" height="5" style="font-family: sans-serif; font-size:1px; mso-line-height-rule: exactly; line-height:100%;" valign="top"> </td>
</tr>
<!-- Hero Image, Flush : BEGIN -->
<tr>
<td style="background: #ffffff" class=""><img alt="" aria-hidden="true" border="0" class="hero-img" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4d/50342/155399/replaced_informed_employees.jpg" style="height: auto; background: #ffffff; border-width: 0px; width: 600px; line-height: 0px; color: #ffffff; max-width: 600px;display:block;" width="600"></td>
</tr>
<!-- Hero Image, Flush : END --><!-- 1 Column Text + Button : BEGIN -->
<tr>
<td height="53" style="font-size: 0px; line-height: 0px; min-height: 53px;" class=""> </td>
</tr>
<tr>
<td class="stack-column-center" style="font-family: 'Lato', sans-serif; line-height: 1.4em; color: #777777; text-align: center; padding: 0px 30px 0px 30px;" width="100%"><span style="color:#0072bc; font-size:18px;"><strong>It’s simple:</strong></span> lorem ipsum.<br>
<br>
lorem ipsum<em>replaceds</em>.</td>
</tr>
<tr>
<td height="40" style="font-size: 0px; line-height: 0px; min-height: 40px;" class=""> </td>
</tr>
</table>
<!-- Button : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: auto;">
<tr>
<td class="button-td" pardot-data="link-underline:none !important;" style="border-radius: 12px; background: #FFC220; text-align: center; text-decoration: none !important;"><a class="button-a" href="http://www.companynameweb.com/" style="background: rgb(255, 194, 32); border: 15px solid rgb(255, 194, 32); font-family: sans-serif; font-size: 16px; letter-spacing: 1.5px; line-height: 1.1; text-align: center; display: block; border-radius: 4px; font-weight: bold; text-decoration: none !important;"><span class="button-link" style="color:#0072BC; text-transform: uppercase; text-decoration: none !important;"> SEE HOW IT WORKS </span></a></td>
</tr>
</table>
<!-- Button : END --><!-- Social : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" width="90%">
<tr>
<td height="50" style="font-size: 0px; line-height: 0px; min-height: 50px;" class=""> </td>
</tr>
<tr>
<td align="center" class="stack-column-center" style="font-family: sans-serif; line-height: 20px; color: #777777; padding: 0px 20px 0px 20px; overflow: hidden;">
<h2 style="font-size: 13px; text-transform: uppercase; text-align: center;">Follow us</h2>
</td>
</tr>
<tr>
<td height="40" style="font-size: 0px; line-height: 0px; min-height: 40px;" class=""> </td>
</tr>
<tr>
<td align="center" class=""><!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]--></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width:600px;" width="100%">
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="LinkedIn social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="YouTube social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="Facebook social icon" aria-hidden="true" height="29" src="png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="Twitter social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" style="font-size: 0px; line-height: 0px; min-height: 40px;" class=""> </td>
</tr>
</table>
<!-- Social : END -->
<!-- Email Footer : Begin -->
<table align="center" bgolor="#e1e1e1" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:#e1e1e1; border-spacing: 0; max-width: 600px;" width="100%">
<tr>
<td height="39" style="border-spacing: 0; line-height: 0px;height: 39px;" class=""></td>
</tr>
<tr>
<td class="x-gmail-data-detectors" style="padding: 0px 10px 0px 10px; width: 100%; font-size: 8px; font-family: sans-serif; line-height: 11px; text-align: center; color: #2e2e2e;"><webversion style="color:#2e2e2e; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion><br><br>
© Copyright 2017 <span style="font-weight: bolder;">companyname</span><br>
#companynameweb.com | phone<br>
<span style="font-weight: bolder;">companyname</span> Headquarters | address<br><br>
Click here to unsubscribe</td>
</tr>
<tr>
<td height="39" style="border-spacing: 0; line-height: 0px;height: 39px;" class=""></td>
</tr>
</table>
<!-- Email Footer : END --><!--[if mso]>
</td>
</tr>
</table>
<![endif]--></div>
</center>
</body>
</html>
Let me know if this works for you.
When building spacer rows, font-size and line-height must be declared as 0px (not 0).
<tr>
<td height="13" align="center" valign="middle" style="margin: 0; font-size: 0px; line-height: 0px;"> </td>
</tr>
I figured it out.
font-size: 0; line-height: 0;
needed to be defined in pixels, and I added
valign="middle"
to each table row's data.
I replaced:
<!-- Email Header : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tbody>
<tr>
<td height="33" bgcolor="#0072bc" style="font-size: 0; line-height: 0;" class=""> </td>
</tr>
<tr>
<td bgcolor="#0072bc" align="center" class=""><img alt="companyname logo" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4b/50342/155397/companyname_logo_lockup_white.png" aria-hidden="true" border="0" height="54" style="border-spacing: 0; min-height: 54px;"></td>
</tr>
<tr>
<td height="33" bgcolor="#0072bc" style="font-size: 0; line-height: 0;" class=""> </td>
</tr>
</tbody>
</table>
<!-- Email Header : END -->
with:
<!-- Email Header : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tbody>
<tr>
<td bgcolor="#0072bc" height="33" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
<tr>
<td align="center" bgcolor="#0072bc" class=""><img alt="companyname logo" aria-hidden="true" border="0" height="54" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4b/50342/155397/companyname_logo_lockup_white.png" style="vertical-align: middle; border-spacing: 0; min-height: 54px;" valign="middle"></td>
</tr>
<tr>
<td bgcolor="#0072bc" height="33" style="font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
</tbody>
</table>
<!-- Email Header : END -->
and it now works in all clients. Same with the footer. I replaced:
<!-- Email Footer : Begin -->
<table align="center" bgolor="#e1e1e1" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:#e1e1e1; border-spacing: 0; max-width: 600px;" width="100%">
<tr>
<td height="39" style="border-spacing: 0; line-height: 0; max-height: 39px; min-height: 39px;" class=""> </td>
</tr>
<tr>
<td class="x-gmail-data-detectors" style="padding: 0px 10px 0px 10px; width: 100%; font-size: 8px; font-family: sans-serif; line-height: 11px; text-align: center; color: #2e2e2e;"><webversion style="color:#2e2e2e; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion><br><br>
© Copyright 2017 <span style="font-weight: bolder;">companyname</span><br>
#companynameweb.com | 1-111-111-1111<br>
<span style="font-weight: bolder;">companyname</span> Headquarters | address<br><br>
Click here to unsubscribe</td>
</tr>
<tr>
<td height="39" style="border-spacing: 0; line-height: 0; max-height: 39px; min-height: 39px;" class=""> </td>
</tr>
</table>
<!-- Email Footer : END -->
with:
<!-- Email Footer : Begin -->
<table align="center" aria-hidden="true" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tbody>
<tr>
<td bgcolor="#e1e1e1" height="39" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
<tr>
<td bgcolor="#e1e1e1" border="0" class="x-gmail-data-detectors" style="vertical-align: middle; border-spacing: 0; font-size: 8px; font-family: sans-serif; line-height: 11px; text-align: center; color: #2e2e2e;" valign="middle"><webversion style="color:#2e2e2e; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion><br>
<br>
© Copyright 2017 <span style="font-weight: bolder;">eni</span><br>
#companynameweb.com 1-111-111-1111<br>
<span style="font-weight: bolder;">companyname</span> Headquarters | address<br>
<br>
Click here to unsubscribe</td>
</tr>
<tr>
<td bgcolor="#e1e1e1" height="39" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
</tbody>
</table>
<!-- Email Footer : END -->
and now it doesn't break anymore. td also needed bgcolor.
Adding this simple css style has worked for me :
<table style="border-spacing: 0 !important; border-collapse: collapse !important;"> </table>
I have an email I'm sending out which I originally designed in mailchimp and then extracted the code from there to further customize it. I have a two column header in where the logo is on the left & social icons on the right. I tested it on emailonacid and all tests look great except that on Outlook 2007, 2010, 2013, the LOGO is no longer bottom aligned with the social icons. On Outlook 2011 and all other email clients like Yahoo, Gmail, etc, it looks fine. Is there a specific reason why it looks okay in 2011, but not the other versions of Outlook? And is there a specific fix?
I've included screenshots of what the header should look like vs what it looks like in certain Outlook clients. I've also attached the code here.
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraph.org/schema/" >
<head>
<meta property="og:title" content="Subject of Email Goes Here">
<meta property="fb:page_id" content="43929265776">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><!-- NAME: 1 COLUMN -->
<!--[if gte mso 15]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Subject of Email Goes Here</title>
<style type="text/css">
p{
margin:10px 0;
padding:0;
}
table{
border-collapse:collapse;
}
h1,h2,h3,h4,h5,h6{
display:block;
margin:0;
padding:0;
}
img,a img{
border:0;
height:auto;
outline:none;
text-decoration:none;
}
body,#bodyTable,#bodyCell{
height:100%;
margin:0;
padding:0;
width:100%;
}
#outlook a{
padding:0;
}
img{
-ms-interpolation-mode:bicubic;
}
table{
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
.ReadMsgBody{
width:100%;
}
.ExternalClass{
width:100%;
}
p,a,li,td{
mso-line-height-rule:exactly;
}
a[href^=tel],a[href^=sms]{
color:inherit;
cursor:default;
text-decoration:none;
}
p,a,li,td,body,table{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
.ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font{
line-height:100%;
}
a[x-apple-data-detectors]{
color:inherit !important;
text-decoration:none !important;
font-size:inherit !important;
font-family:inherit !important;
font-weight:inherit !important;
line-height:inherit !important;
}
#bodyCell{
padding:10px;
}
.templateContainer{
max-width:600px !important;
}
a.mcnButton{
display:block;
}
.mcnImage{
vertical-align:bottom;
}
.mcnTextContent{
word-break:break-word;
}
.mcnTextContent img{
height:auto !important;
}
.mcnDividerBlock{
table-layout:fixed !important;
}
body,#bodyTable{
background-color:#e6e6e6;
}
#bodyCell{
border-top:0;
}
.templateContainer{
border:0;
}
h1{
color:#002664;
font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:18px;
font-style:normal;
font-weight:bold;
line-height:150%;
letter-spacing:normal;
text-align:left;
}
#templatePreheader{
background-color:#FAFAFA;
border-top:0;
border-bottom:0;
padding-top:0px;
padding-bottom:0px;
}
#templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{
color:#656565;
font-family:Helvetica;
font-size:10px;
line-height:150%;
text-align:left;
}
#templatePreheader .mcnTextContent a,#templatePreheader .mcnTextContent p a{
color:#E6E6E6;
font-weight:normal;
text-decoration:underline;
}
#templateHeader{
background-color:#FFFFFF;
border-top:0;
border-bottom:0;
padding-top:9px;
padding-bottom:0;
}
#templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{
color:#202020;
font-family:Helvetica;
font-size:16px;
line-height:150%;
text-align:left;
}
#templateHeader .mcnTextContent a,#templateHeader .mcnTextContent p a{
color:#2BAADF;
font-weight:normal;
text-decoration:underline;
}
#templateBody{
background-color:#FFFFFF;
border-top:0;
border-bottom:2px solid #EAEAEA;
padding-top:0;
padding-bottom:9px;
}
#templateBody .mcnTextContent,#templateBody .mcnTextContent p{
color:#202020;
font-family:Helvetica;
font-size:14px;
line-height:150%;
text-align:left;
}
#templateBody .mcnTextContent a,#templateBody .mcnTextContent p a{
color:#0060a9;
font-weight:bold;
text-decoration:none;
}
#templateFooter{
background-color:#FAFAFA;
border-top:0;
border-bottom:0;
padding-top:9px;
padding-bottom:9px;
}
#templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{
color:#656565;
font-family:Helvetica;
font-size:12px;
line-height:150%;
text-align:center;
}
#templateFooter .mcnTextContent a,#templateFooter .mcnTextContent p a{
color:#656565;
font-weight:normal;
text-decoration:underline;
}
#media only screen and (min-width:768px){
.templateContainer{
width:600px !important;
}
} #media only screen and (max-width: 480px){
body,table,td,p,a,li{
-webkit-text-size-adjust:none !important;
}
} #media only screen and (max-width: 480px){
body{
width:100% !important;
min-width:100% !important;
}
} #media only screen and (max-width: 480px){
#bodyCell{
padding-top:10px !important;
}
} #media only screen and (max-width: 480px){
.mcnImage{
width:100% !important;
}
} #media only screen and (max-width: 480px){
.mcnCaptionTopContent,.mcnCaptionBottomContent,.mcnTextContentContainer,.mcnBoxedTextContentContainer,.mcnImageGroupContentContainer,.mcnCaptionLeftTextContentContainer,.mcnCaptionRightTextContentContainer,.mcnCaptionLeftImageContentContainer,.mcnCaptionRightImageContentContainer,.mcnImageCardLeftTextContentContainer{
max-width:100% !important;
width:100% !important;
}
} #media only screen and (max-width: 480px){
.textContentContainerLeft{
max-width: 65% !important;
width: 65% !important;
}
} #media only screen and (max-width: 480px) {
.textContentContainerRight{
max-width: 35% !important;
width: 35% !important;
}
} #media only screen and (max-width: 480px) {
.socialIcon {
height: 18px !important;
width: 18px !important;
}
} #media only screen and (max-width: 480px) {
#templatePreheader .mcnTextContent .fillerTable p{
line-height: 0 !important;
}
} #media only screen and (max-width: 480px){
.mcnBoxedTextContentContainer{
min-width:100% !important;
}
} #media only screen and (max-width: 480px){
.mcnImageGroupContent{
padding:9px !important;
}
} #media only screen and (max-width: 480px){
.mcnCaptionLeftContentOuter .mcnTextContent,.mcnCaptionRightContentOuter .mcnTextContent{
padding-top:9px !important;
}
} #media only screen and (max-width: 480px){
.mcnImageCardTopImageContent,.mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent{
padding-top:18px !important;
}
} #media only screen and (max-width: 480px){
.mcnImageCardBottomImageContent{
padding-bottom:9px !important;
}
} #media only screen and (max-width: 480px){
.mcnImageGroupBlockInner{
padding-top:0 !important;
padding-bottom:0 !important;
}
} #media only screen and (max-width: 480px){
.mcnImageGroupBlockOuter{
padding-top:9px !important;
padding-bottom:9px !important;
}
} #media only screen and (max-width: 480px){
.mcnTextContent,.mcnBoxedTextContentColumn{
padding-right:18px !important;
padding-left:18px !important;
}
} #media only screen and (max-width: 480px){
.mcnImageCardLeftImageContent,.mcnImageCardRightImageContent{
padding-right:18px !important;
padding-bottom:0 !important;
padding-left:18px !important;
}
} #media only screen and (max-width: 480px){
.mcpreview-image-uploader{
display:none !important;
width:100% !important;
}
} #media only screen and (max-width: 480px){
h1{
font-size:22px !important;
line-height:125% !important;
}
} #media only screen and (max-width: 480px){
.mcnBoxedTextContentContainer .mcnTextContent,.mcnBoxedTextContentContainer .mcnTextContent p{
font-size:14px !important;
line-height:150% !important;
}
} #media only screen and (max-width: 480px){
#templatePreheader{
display:block !important;
}
} #media only screen and (max-width: 480px){
#templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{
font-size:14px !important;
line-height:150% !important;
}
} #media only screen and (max-width: 480px){
#templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{
font-size:16px !important;
line-height:150% !important;
}
} #media only screen and (max-width: 480px){
#templateBody .mcnTextContent,#templateBody .mcnTextContent p{
font-size:16px !important;
line-height:150% !important;
}
} #media only screen and (max-width: 480px){
#templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{
font-size:14px !important;
line-height:150% !important;
}
}
</style>
</head>
<body style="height:100%; margin:0; padding:0; width:100%; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; background-color:#e6e6e6; " ><div ><div class="mktEditable" ><center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;height: 100%;margin: 0;padding: 0;width:
100%;background-color: #e6e6e6;">
<tr>
<td align="center" valign="top" id="bodyCell" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;height: 100%;margin: 0;padding: 10px;width: 100%;border-top: 0;"><!-- BEGIN TEMPLATE // -->
<!--[if gte mso 9]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
<tr>
<td align="center" valign="top" width="600" style="width:600px;">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;border: 0;max-width: 600px !important;">
<tr>
<td align="center" valign="top" id="templatePreheader" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #e6e6e6;border-top: 0;border-bottom: 0;padding-top: 1px;padding-bottom: 0px;"><!--[if gte mso 9]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
<tr>
<td align="center" valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;max-width: 600px !important;">
<tbody><tr>
<td valign="bottom" class="preheaderContainer" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tbody class="mcnTextBlockOuter">
<tr>
<td valign="bottom" class="mcnTextBlockInner" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;vertical-align: bottom;" valign="bottom">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="65%" class="mcnTextContentContainer textContentContainerLeft" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tbody>
<tr>
<td valign="bottom" class="mcnTextContent" style="padding: 0px 0px 0px 0px;color: #1e3b8b;font-size: 1px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;font-family: Helvetica;line-height: 100%;text-align: left;">
<table border="0" cellpadding="0" cellspacing="0" height="10" width="100%" class="mcnTextBlock fillerTable" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tbody class="mcnTextBlockOuter">
<tr>
<td valign="bottom" class="mcnTextBlockInner" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;vertical-align: bottom;" valign="bottom"> <p style="font-size: 2px;line-height: 50%"> </p>
</td>
</tr>
</tbody>
</table>
<span style="display:none; color: #1e3b8b; font-family: Arial, Helvetica, sans-serif; font-size: 0px; line-height: 0px; text-decoration: none; max-height:0px ;max-width: 0px; opacity: 0; overflow: hidden;"><!-- PREVIEW TEXT -->Email Previw Text Here</span></td>
</tr>
<tr>
<td height="90" valign="bottom" class="mcnTextContent" style="padding-bottom: 5px;padding-left: 18px;color: #FFFFFF;font-size: 11px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;font-family: Helvetica;line-height: 100%;text-align: left;vertical-align: bottom;" valign="bottom"><br><a target="_blank" href="http://placehold.it"><img alt="LOGO HERE" src="http://placehold.it/200x75?text=LOGO" style="max-width: 200px;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;vertical-align: bottom;" class="mcnImage" width="200" align="absbottom"></a></td>
</tr>
</tbody>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="35%" height="50" class="mcnTextContentContainer textContentContainerRight" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tbody>
<tr>
<td valign="bottom" class="mcnTextContent" style="padding-right: 18px;color: #FFFFFF;font-size: 11px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;font-family: Helvetica;line-height: 150%;text-align: right;">
<br>
View this email in your browser<br><br>
<div style="color: #E6E6E6; text-align: right;"><img src="https://gallery.mailchimp.com/b7054fb8f7e8331b3b8deed4a/images/2d3db039-eb85-4a61-8fd9-3a8bd68abba3.png" alt="Facebook" style="width: 17px;height: 17px;margin: 0px;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" align="none" height="17" width="17"> <img src="https://gallery.mailchimp.com/b7054fb8f7e8331b3b8deed4a/images/2a87b54c-f615-43a3-bc82-34508a88a4a0.png" alt="Twitter" style="width: 17px;height: 17px;margin: 0px;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" align="none" height="17" width="17"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody></table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
<tr>
<td valign="top" id="templateHeader" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #FFFFFF;border-top: 0;border-bottom: 0;padding-top: 0px;padding-bottom: 0;">
<table class="mcnImageBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody class="mcnImageBlockOuter">
<tr>
<td style="padding: 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" class="mcnImageBlockInner" valign="top">
<table class="mcnImageContentContainer" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="mcnImageContent" style="padding-right: 0px;padding-left: 0px;padding-top: 0;padding-bottom: 0;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" valign="top"><a target="_blank"
href="https://placehold.it"><img alt="" src="http://placehold.it/600x300" style="max-width: 600px;padding-bottom: 0;display: inline
!important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" class="mcnImage" align="middle" width="600"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" id="templateBody" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #FFFFFF;border-top: 0;border-bottom: 2px solid #EAEAEA;padding-top: 0;padding-bottom: 9px;">
<table class="mcnDividerBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;table-layout: fixed !important;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody class="mcnDividerBlockOuter">
<tr>
<td class="mcnDividerBlockInner" style="min-width: 100%;padding: 0px 18px 15px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table class="mcnDividerContent" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="mcnTextBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody class="mcnTextBlockOuter">
<tr>
<td class="mcnTextBlockInner" valign="top" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" class="mcnTextContentContainer" align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="mcnTextContent" style="padding: 9px 25px 9px 25px;font-family: Arial,'helvetica neue',helvetica,sans-serif;font-size: 14px;line-height: 150%;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;text-align: left;"
valign="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mauris est, iaculis elementum neque fringilla quis. Aliquam id maximus magna, vitae dapibus quam. Nulla ex justo, imperdiet vitae erat eget, maximus auctor mi. Praesent a turpis fringilla, venenatis risus eget, varius turpis. Etiam pellentesque auctor tempus.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="mcnDividerBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;table-layout: fixed !important;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody class="mcnDividerBlockOuter">
<tr>
<td class="mcnDividerBlockInner" style="min-width: 100%;padding: 0px 18px 10px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table class="mcnDividerContent" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
<!-- // END TEMPLATE --></td>
</tr>
</table>
</center>
</div>
</div>
</body>
</html>
Screenshots below.
Normal view, including Outlook 2011
Outlook 2007, 2010, 2013
When using aligned tables to get things to stack in mobile, the sum of the two tables' widths cannot add up to 100% or Outlook will do what you're seeing. You need something like 15 to 20 empty pixels between the tables. Try making the widths 63% and 33% instead of 65 and 35.
Alternatively, you can put a ghost cell break between the two tables, eg:
<!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
to force Outlook two view the layout as two cells rather than two floating tables.
I'm creating a responsive email design where several images switch out for the smaller screens. I've reformatted tables and tds several times and the smaller images don't show. The images are live online. Please help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Happy St. Patrick's Day</title>
<style type="text/css">
body { margin: 0px; padding: 0px; }
#media only screen and (max-width: 660px) {
table.one { width: 480px !important; }
table.two { width: 480px !important; }
table.three { width: 480px !important; }
table.four { width: 480px !important; }
table.five { width: 480px !important; }
td.shamtop img { display: none; }
td.shamtop { background: #00A160 url(http://www.poscorp.com/emarketing/2015/images/top-shamrock-med.gif) no-repeat; height: 79px; }
td.shammid img { display: none; }
td.shammid { background: #00A160 url(http://www.poscorp.com/emarketing/2015/images/mid-shamrock-med.gif) no-repeat; height: 151px; }
td.maintext p {font-size: 26px; }
}
#media only screen and (max-width: 510px) {
table.one { width: 300px !important; }
table.two { width: 300px !important; }
table.three { width: 300px !important; }
table.four { width: 300px !important; }
table.five { width: 300px !important; }
td.shamtop img { display: none; }
td.shamtop { background: #00A160 url(http://www.poscorp.com/emarketing/2015/images/top-shamrock-sm.gif) no-repeat; height: 79px; }
td.shammid img { display: none; }
td.shammid { background: #00A160 url(http://www.poscorp.com/emarketing/2015/images/mid-shamrock-sm.gif) no-repeat; height: 89px; }
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="600" border="0" cellspacing="0" cellpadding="0" class="one" align="center">
<tr>
<td bgcolor="#00a160" class="shamtop" style="background: #00A160; margin: 0px;"><img src="http://www.poscorp.com/emarketing/2015/images/top-shamrock-lrg.gif" width="600" height="79"></td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="two">
<tr>
<td bgcolor="#ffffff" class="maintext" style="font-family: Arial, Helvetica, sans-serif; font-size: 32px; line-height:120%; color: #000; background: #FFF; padding: 15px 18px 10px 18px; font-weight:bold; text-align:center;"><p style="margin-top: 0px; margin-bottom: 16px;">In honor of St. Patrick’s Day we’d like to save you some <span style="color: #00a160;">GREEN</span>!</p></td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="three">
<tr>
<td class="shammid" bgcolor="#b7da63" style="background: #b7da63;"><img src="http://www.poscorp.com/emarketing/2015/images/mid-shamrock-lrg.gif" width="600" height="195"></td>
</tr>
<tr>
<td align="center" bgcolor="#b7da63" style="background: #b7da63; font-family: Arial, Helvetica, sans-serif; font-size: 17px; line-height:120%; color: #000; padding: 15px 20px 10px 20px; font-weight:bold; text-align:center;"><p style="font-size:22px; margin-top:0px; margin-bottom: 7px;">Enter to Win $200 Towards a NEW Print Item.</p>
<p style="margin-top:0px; margin-bottom: 0px;">All entries must be made by the end of day today. <br>
Five winners will be drawn.</p></td>
</tr>
<tr>
<td align="center" bgcolor="#b7da63" style="background: #b7da63; padding: 0px 20px 15px 20px; text-align:center;"><img src="http://www.poscorp.com/emarketing/2015/images/enter-to-win-btn.gif" width="180" height="45"></td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="four">
<tr>
<td align="center" valign="top" class="contact" style="font-family: Arial, sans-serif; font-size: 14px; line-height:115%; color: #333; background: #FFF; padding: 20px 20px 20px 20px;">
<table width="275" border="0" cellspacing="0" cellpadding="0" align="left" class="logo">
<tr>
<td class="poslogo"><img src="http://www.poscorp.com/emarketing/2015/images/pos_logo_hc.gif" alt="POS Professional Office Services, Inc." width="272" height="45"></td>
</tr>
</table>
<table width="275" border="0" cellspacing="0" cellpadding="0" align="right" class="info">
<tr>
<td><p style="font-family: Arial, sans-serif; font-size: 14px; line-height: 100%; color: #333; font-weight:bold; margin:20px 0px 5px 0px; text-align:right;">800.331.4976 | www.poscorp.com | <img src="http://www.poscorp.com/emarketing/2015/images/linkedin.jpg" alt="LinkedIn" width="16" height="16" border="0" style="vertical-align:bottom;"/></p></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="five">
<tr>
<td align="center" valign="top" style="font-family: Arial, sans-serif; font-size: 12px; line-height:115%; color: #FFF; background: #00a160; padding: 5px 15px 5px 15px; margin:0px; font-style:italic;"><p>This offer is non-transferable and entries are limited to one entry per recipient.<br>
Contest winners will be notified by March 19th.</p></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html
Your html has a defined style which is overriding the css on your elements. For instance, changing:
<td class="shammid" bgcolor="#b7da63" style="background: #b7da63;">
<img src="http://www.poscorp.com/emarketing/2015/images/mid-shamrock-lrg.gif" width="600" height="195">
</td>
to
<td class="shammid" bgcolor="#b7da63">
<img src="http://www.poscorp.com/emarketing/2015/images/mid-shamrock-lrg.gif" width="600" height="195">
</td>
Yields the result you're looking for.
You should also consider removing the bgcolor attribute as it has been deprecated in HTML5.