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.
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>
I'm struggling to find a solution to remove the blue underline from Links on Emails Sent from Outlook (Outlook for Office 365) to Gmail (Desktop version)
The generated html works perfectly on Google Chrome, but not on Gmail
Here is the whole Code of my tests:
It was generated with mjml framework:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
</title>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<!--<![endif]-->
<style type="text/css">
#media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
}
</style>
<style type="text/css">
<!-- Override Gmail blue links
-->
.ii
a[href]
{
text-decoration:
none;
color:
inherit
!important;
}
.link-nostyle
{
color:
inherit;
text-decoration:
none
}
.link-underlined
{
color:
inherit;
text-decoration:
underline
!important;
}
.link-not-underlined
{
color:
inherit;
text-decoration:
none
!important;
text-decoration-color:
transparent;
color:
green;
}
.myClass,
.myClass1
{
text-decoration:
none
!important;
color:
orange;
;
</style>
</head>
<body>
<div style>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:helvetica;font-size:20px;line-height:1;text-align:left;text-decoration:none;color:#F45e46;">Hello Hello World</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo odio impedit minus suscipit, quis autem nulla aliquam maxime optio facere, esse quia corrupti possimus expedita aspernatur modi molestiae, iusto dolore. <a style="text-decoration: underline !important; color: orange !important;" href="https://www.google.com"><span style="text-decoration: underline !important; color: red !important;">Test link 2</span></a>
<a style="text-decoration: none !important; color: #00d0ff !important;" href="https://www.google.com"><span style="text-decoration: none !important; color: green !important;">Test link 2</span></a></div>
</td>
</tr>
<!-- Link underlined -->
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">Hello <span style="text-decoration: underline !important;">link underlined</span></div>
</td>
</tr>
<!-- Link NOT underlined -->
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;text-decoration:none;color:#000000;">Hello link not underlined</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"><a style="text-decoration: none !important; color: #00d0ff !important;" href="https://www.google.com"><span style="text-decoration: none !important; color: green !important;">Test link 3</span></a>
<br><br> lorem Ipsum <a href="http://www.google.com" target="_blank" style="color: red !important; text-decoration:none !important;">
<span style="color:red !important; text-decoration:none!important;">Getting Started with Our Services</span>
</a>
<br><br>
<a href="https://www.google.com" target="_blank" style="color:#CCCCCC; text-decoration:none;">
<color="#cccccc">test 4 </color="#cccccc">
</a>
<div class="myClass"> <a href="mailto:info#example.com">
<span class="myClass1">info#ccc.com </span></a> </div>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">Test for numbers: 0711 12345678</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</div>
</body>
</html>
I have tried the whole propositions from this post:
How to Remove Hyperlink underline in Gmail while sending Email template from outlook without success
All those links with underline are having an inline css for displaying underline so that's why it's still visible. And at some places anchor tags are having span as children with underline css, so although the text-decoration: none is set for the anchor tags its not working because of the span inside. I have removed that from the code and replaced it below. Please refer below for the same. Hope this solves the issue
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
</title>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<!--<![endif]-->
<style type="text/css">
#media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
}
</style>
<style type="text/css">
<!-- Override Gmail blue links
-->
.ii
a[href]
{
text-decoration:
none;
color:
inherit
!important;
}
.link-nostyle
{
color:
inherit;
text-decoration:
none
}
.link-underlined
{
color:
inherit;
text-decoration:
none
!important;
}
.link-underlined span {
text-decoration:
none
!important;
}
.link-not-underlined
{
color:
inherit;
text-decoration:
none
!important;
text-decoration-color:
transparent;
color:
green;
}
.myClass a {
text-decoration: none;
}
.myClass,
.myClass1
{
text-decoration:
none
!important;
color:
orange;
;
</style>
</head>
<body>
<div style>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:helvetica;font-size:20px;line-height:1;text-align:left;text-decoration:none;color:#F45e46;">Hello Hello World</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo odio impedit minus suscipit, quis autem nulla aliquam maxime optio facere, esse quia corrupti possimus expedita aspernatur modi molestiae, iusto dolore. <a style="text-decoration: none !important; color: orange !important;" href="https://www.google.com"><span style="text-decoration: none !important; color: red !important;">Test link 2</span></a>
<a style="text-decoration: none !important; color: #00d0ff !important;" href="https://www.google.com"><span style="text-decoration: none !important; color: green !important;">Test link 2</span></a></div>
</td>
</tr>
<!-- Link underlined -->
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">Hello <span style="text-decoration: none !important;">link underlined</span></div>
</td>
</tr>
<!-- Link NOT underlined -->
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;text-decoration:none;color:#000000;">Hello link not underlined</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"><a style="text-decoration: none !important; color: #00d0ff !important;" href="https://www.google.com"><span style="text-decoration: none !important; color: green !important;">Test link 3</span></a>
<br><br> lorem Ipsum <a href="http://www.google.com" target="_blank" style="color: red !important; text-decoration:none !important;">
<span style="color:red !important; text-decoration:none!important;">Getting Started with Our Services</span>
</a>
<br><br>
<a href="https://www.google.com" target="_blank" style="color:#CCCCCC; text-decoration:none;">
<color="#cccccc">test 4 </color="#cccccc">
</a>
<div class="myClass"> <a href="mailto:info#example.com">
<span class="myClass1">info#ccc.com </span></a> </div>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">Test for numbers: 0711 12345678</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</div>
</body>
</html>
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.
I'm trying to achieve an email design where there's text over an image, but that table is on top of 2 background colors. I used a white space image for that effect but I think the outlook hack is not working because I'm using 2 background images.
Does anyone have an idea what I can do? Maybe a CSS trick for the white space?
This is what I want to see:
(https://ibb.co/fQzPSDV)
But my results are all over the place.
<table class="mktoModule module_wrapper m_header mktoModule module_wrapper m_header" id="header2" style="border-spacing: 0; border-collapse: collapse;" align="center" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="module" style="mso-line-height-rule: exactly;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;word-break: break-word;background-image:https://campaign.yougov.com/rs/060-QFD-941/images/whitespace.png;padding-left: 0;background-position:top center;background-size:auto;background-color:#9078d7;padding-top: 0;padding-right: 0;padding-bottom: 0;background-repeat: repeat-x ;background:https://campaign.yougov.com/rs/060-QFD-941/images/whitespace.png;" valign="top" bgcolor="#9078d7" background="https://campaign.yougov.com/rs/060-QFD-941/images/whitespace.png">
<center>
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:800px;height:120px">
<v:fill type="frame" src="https://campaign.yougov.com/rs/060-QFD-941/images/whitespace.png" color="#9078d7" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<div><div style="font-size: 0;line-height: 0;margin: 0;border: 0">
<![endif]-->
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td class="module" style="mso-line-height-rule: exactly;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;word-break: break-word;background-image:https://campaign.yougov.com/rs/060-QFD-941/images/templatebg.jpg;padding-left: 0;background-position:top center;background-size:auto;background-color:#7C64C3;padding-top: 0;padding-right: 0;padding-bottom: 0;background-repeat: repeat-x ;background:https://campaign.yougov.com/rs/060-QFD-941/images/templatebg.jpg;" valign="top" bgcolor="#7C64C3" background="https://campaign.yougov.com/rs/060-QFD-941/images/templatebg.jpg">
<center>
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="false" stroke="false" style="width:600px;height:300px">
<v:fill type="frame" src="https://campaign.yougov.com/rs/060-QFD-941/images/templatebg.jpg" color="#7C64C3" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<div><div style="font-size: 0;line-height: 0;margin: 0;border: 0">
<![endif]-->
<table>
<tbody>
<tr>
<td class="bgImgSpace" style="word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse; mso-line-height-rule: exactly; line-height: 155px; font-size: 155px;" height="155"> </td>
</tr>
<tr>
<td>
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="500">
<tbody>
<tr>
<td class="primary-font title" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;text-align: left;font-family: Arial, sans-serif;font-weight: bold;font-size: 24px;border-collapse: collapse;line-height:26px;color:#ffffff;">
<div class="mktoText" id="heroText2">
Make money online through advertising
</div> </td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td class="bgImgSpace" style="word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse; mso-line-height-rule: exactly; line-height: 35px; font-size: 35px;" height="35"> </td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]></div></div>
</v:textbox>
</v:rect>
<![endif]-->
</center> </td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]></div></div>
</v:textbox>
</v:rect>
<![endif]-->
</center> </td>
</tr>
</tbody>
</table>
Thanks for anyone who can help.
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.