I have an email template. It looks perfect in Gmail (all browsers) and in Web Outlook (all browsers).
But in Outlook 2019 extra white space is added from the left and right side. I suppose it is related to the images. When they are locked the blank space does not appear. When
I decide to download them the blank space appears. I can't find what code causes this error.
In Outlook 2013 this does not happen, respect the maximum width of 600px.
Help me with this problem? I've already tried everything.
Share images and code:
Outlook 2013
Outlook 2019
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>*|MC:SUBJECT|* </title>
<!-- utf-8 works for most cases -->
<meta charset="UTF-8">
<!--[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">
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style>
.mj-outlook-group-fix {
width:100% !important;
}
</style>
<![endif]-->
<!--Web Fonts --->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#100;300;400;700;900&display=swap" rel="stylesheet">
<!--<![endif]-->
<style type="text/css">
/*Outlook Reset Styles*/
.ExternalClass p {
margin: 0px;
}
.ReadMsgBody {
width: 100%
}
.ExternalClass {
width: 100%;
}
.ExternalClass, .ExternalClass * {
line-height: 100%;
}
.yshortcuts a {
border-bottom: none !important;
}
.mobile-link--footer a {
color: #666666 !important;
}
#outlook a{
padding:0;
}
#body_text td {
padding-left: 10px;
padding-right: 10px;
}
/*Global Styles*/
body{
margin:0 auto !important;
padding:0 !important;
width:100% !important;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
/*Default Font*/
font-family:'Tahoma', Verdana,sans-serif;
font-size: 14px;
font-weight: 400;
color: #202020;
}
table,td{
border-collapse:collapse;
mso-table-lspace:0;
mso-table-rspace:0;
}
table{
border-spacing:0 !important;
border-collapse:collapse !important;
table-layout:fixed !important;
margin:0 auto !important;
}
img{
border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
display: block;
-ms-interpolation-mode:bicubic;
}
p{
display:block;
margin:2px 0;
}
a{
text-decoration:none;
}
.yshortcuts a{
border-bottom:none !important;
}
a[x-apple-data-detectors]{
color:inherit !important;
}
.mcnPreviewText{
display:none !important;
}
/*Buttons & other sections*/
.button{
display:inline-block;
letter-spacing:2px;
padding: 10px 10px;
text-decoration:none;
background: #6b6b6b;
background-color: #6b6b6b;
border-radius: 5px;
}
.bullet{
background: #6b6b6b;
background-color: #6b6b6b;
border-radius: 5px;
text-align: center;
padding: 3px 0px 3px 0px;
margin: 0 auto !important;
display: block;
width: 100%;
}
/*obile Responsives Styles*/
#media only screen and (max-width:480px){
.mj-full-width-mobile{
width:100% !important;
}
.centermobile{
margin: 0 auto !important;
}
.blockwrap {
display: block !important;
}
.hide{
display: none !important;
}
.textcenter{
text-align: center !important;
}
.textleft{
text-align: left !important;
}
.textright{
text-align: right !important;
}
.paddingtotal{
padding: 0px 0px 0px 0px !important;
}
.paddingsi{
padding: 20px 0px 20px 0px !important;
}
.paddingid{
padding: 0px 20px 0px 20px !important;
}
.textminium{
font-size: 14px !important;
}
.headerminium{
font-size: 20px !important;
}
}
/*Right & Left Column Responsives Styles*/
#media screen and (max-width: 600px){
.stack-column,.stack-column-center{
display:block !important;
width:100% !important;
max-width:100% !important;
direction:ltr !important;
}
} #media screen and (max-width: 600px){
.stack-column-center{
text-align:center !important;
}
}
#media screen and (max-width: 600px){
.fluid,.fluid-centered{
max-width:100% !important;
height:auto !important;
margin-left:auto !important;
margin-right:auto !important;
}
}
/*Container Styles*/
.wrapper{
max-width:600px;
margin: 0 auto !important;
}
.clear{
width:inherit;
clear:both;
}
</style>
</head>
<!--Start body of the email -->
<body style="background-color:#E0E0E0;background: #E0E0E0;margin: 0;" width="100%" bgcolor="#E0E0E0" >
<!--Start wrapper -->
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="width:600px !important;" width="600">
<tr>
<td style="mso-line-height-rule:exactly;max-width:600px !important;" class="wrapper" align="center" width="600">
<![endif]-->
<table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" align="center" style="background:#FFFFFF;background-color:#FFFFFF;max-width: 600px !important ;" bgcolor="#FFFFFF" width="600">
<tbody>
<tr>
<td id="content" class="wrapper" align="center" width="600" style="direction:ltr;padding:0;max-width: 600px !important;border-collapse:collapse"><!-- Start Main Colum -->
<!--[if mso | IE]>
<table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="max-width:600px;background-color:#c2c2c2; background:#c2c2c2;" width="100%" bgcolor="#c2c2c2">
<tr>
<td width="100%" style="mso-line-height-rule:exactly;mso-padding-alt: 0px 0px;max-width:600px;background-color: #c2c2c2; background: #c2c2c2;" class="wrapper" align="center" bgcolor="#c2c2c2">
<![endif]-->
<table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" align="center" width="100%" class="mj-full-width-mobile mj-outlook-group-fix wrapper" bgcolor="#c2c2c2" style="direction:ltr;vertical-align:top;width:100%; background-color: #c2c2c2; background: #c2c2c2; max-width: 600px;">
<tbody>
<tr>
<td align="center" class="wrapper" width="100%" bgcolor="#c2c2c2" style="vertical-align:top;margin: 0 auto;padding: 5px 0px;background-color: #c2c2c2; background: #c2c2c2;max-width: 600px;" mc:edit="header_logo">
<table cellspacing="0" cellpadding="0" border="0" class="" bgcolor="#c2c2c2" width="100%" style="max-width: 600px;;background-color:#c2c2c2; background:#c2c2c2;">
<tr> <td align="center" width="100%" bgcolor="#c2c2c2" style="max-width: 600px;background-color: #c2c2c2; background: #c2c2c2; ">
<center>
<img src="https://mcusercontent.com/8bebfe395cef9579903533c79/images/22c4d06c-6363-4d2c-808c-6682d6866711.jpg" alt="" style="max-width: 150px;" />
</center>
</td> </tr>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<!--[if mso | IE]>
<table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="width:600px;" width="600">
<tr>
<td width="600" align="center">
<![endif]-->
<table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" mc:repeatable="content_block" mc:variant="header_title_text" class="mj-full-width-mobile mj-outlook-group-fix" style="direction:ltr;vertical-align:top;width:100%; background-color: #FFFFFF; background: #FFFFFF;margin: 10px 0px 0px 0px !important; ">
<tbody>
<tr>
<td style="vertical-align:top;" mc:edit="header_title_text" class="stack-column-center">
<h1 style="font-family:'Tahoma', Verdana,sans-serif; text-align: center;">Heading H1 Text-Tittle</h1>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<!--[if mso | IE]>
<table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="width:600px;" width="600">
<tr>
<td width="600" align="center">
<![endif]-->
<table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" mc:repeatable="content_block" mc:variant="header_title_text_extended" class="mj-full-width-mobile mj-outlook-group-fix" style="direction:ltr;vertical-align:top;width:100%; background-color: #FFFFFF; background: #FFFFFF;margin: 10px 0px 0px 0px !important; ">
<tbody>
<tr>
<td style="vertical-align:top;" mc:edit="header_title_text_extended" class="stack-column-center">
<h1 style="font-family:'Tahoma', Verdana,sans-serif; text-align: center;">Heading H1 Text-SubTittle</h1>
<p class="textcenter" style="text-align: center;padding: 5px 35px 10px 35px; line-height: 150%;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<!--[if mso | IE]>
<table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="width:600px;" width="600">
<tr>
<td width="600" align="center">
<![endif]-->
<table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" bgcolor="#FFFFFF" mc:repeatable="content_block" mc:variant="hero_image" style="direction:ltr;display:inline-block;vertical-align:top;width:100%; background-color: #FFFFFF; background: #FFFFFF; margin: 10px 0px 10px 0px !important; ">
<tbody>
<tr>
<td style="vertical-align:top;" mc:edit="hero_image">
<table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="padding: 0px 10px 0px 10px;">
<tr>
<td>
<center>
<img src="https://mcusercontent.com/8bebfe395cef9579903533c79/images/9df5e4ba-1037-41b9-9ac1-b9a7a18dd064.jpg" alt="" class="stack-column-center" style="max-width: 600px;">
<br />
</center>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<!--[if mso | IE]>
<table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="max-width:600px;background-color: #c2c2c2; background: #c2c2c2;" width="100%" bgcolor="#c2c2c2">
<tr>
<td width="100%" style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;max-width:600px;background-color: #c2c2c2; background: #c2c2c2;" class="wrapper" align="center" bgcolor="#c2c2c2">
<![endif]-->
<table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" bgcolor="#c2c2c2" id="footer" class="mj-full-width-mobile mj-outlook-group-fix wrapper stack-column-center" style="direction:ltr;vertical-align:top;width:100%; background-color: #c2c2c2; background: #c2c2c2;font-size: 10px !important;" >
<tbody>
<tr>
<td align="center" class="wrapper" bgcolor="#c2c2c2" style="direction:ltr;vertical-align:top;max-width:600px; background-color: #c2c2c2; background: #c2c2c2;" width="100%">
<table cellspacing="0" cellpadding="0" border="0" class="" width="100%" style="max-width: 600px;">
<tr>
<td id="businessinfo" width="50%" class="textcenter paddingsi blockwrap" style="vertical-align:top; text-align: left;padding: 20px 20px 20px 20px;margin: 0 auto !important;" mc:edit="footer_section">
<span style="font-weight: 400;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </span>
<br />
</td>
<td id="legal" width="50%" class="textcenter paddingsi blockwrap" style="vertical-align:top;text-align: right;padding: 20px 20px 20px 20px;margin: 0 auto !important;">
Unsuscribe
<br />
Update Profile
<br />
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td><!-- Final Main Colum - End wrapper -->
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</body><!--Final cuerpo del email - End body of the email -->
</html>
welcome to the wounderfull world of Email coding ;)
I ran some tests on your template, and found out its the big image in the middel that mess things up.
Outlook dosnt always work with just style="max-width:600px;", you need the width on the <img> tag it self.
Your template is 600px, your image is set to 600px, but theres also 20px margin on each side extra.
This should solve your issue
<center>
<img width="560" src="https://mcusercontent.com/8bebfe395cef9579903533c79/images/9df5e4ba-1037-41b9-9ac1-b9a7a18dd064.jpg" alt="" class="stack-column-center" style="max-width: 560px;">
</center>
Before:
After:
This is most likely happening due to your hero image.
If you do not set the width attribute in <img> tags, outlook desktop apps tend to show the image at its original width. Setting max-width only is not enough.
The Header has extra space on left and right because the Hero image is taking extra space. It is showing up in 650 pixels width even though max-width is set to 600 pixels. Simply add width attribute to the <img> tag (preferably at the end) and it should fix the issue. So, your <img> tag for the hero image should look like this,
<img src="https://mcusercontent.com/8bebfe395cef9579903533c79/images/9df5e4ba-1037-41b9-9ac1-b9a7a18dd064.jpg" alt="" class="stack-column-center" style="max-width: 600px;" width="600" />
notice the width attribute I added at the end.
This may create some responsiveness issue. To solve the responsiveness add this to the head style tag (if not already there).
#media screen and (max-width: 600px) {
img {width: 100% !important;}
}
All your images have max-width set inline, so making width 100% won't make them blow up in mobile screens.
Hope this helps.
Related
I've got an email layout that functions as one wide column with two smaller columns at the bottom to keep a pair of linked images horizontal. Currently I'm struggling to get the layout to play nicely on mobile—if I can get the table to fill the screen, the leftmost image vanishes entirely, and if I can get both buttons to appear horizontally on mobile, the container breaks. My understanding of responsive layouts is spotty but I'm trying to figure out how to make this work nicely—complicated not least of all because my customer base tilts heavily Outlook.
CSS and HTML below. Appreciate any help!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body class="em_body" style="margin:0px auto; padding:0px;" bgcolor="#f7f6f2"> <u></u>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title>Lorem </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
<meta name="format-detection" content="telephone=no">
<!--[if !mso]><!-->
<style>
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#300;400;700;900&display=swap');
</style>
<!--<![endif]-->
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Trebuchet MS, sans-serif !important;}
</style>
<![endif]-->
<style type="text/css">
body { margin: 0 auto; padding: 0; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; -webkit-font-smoothing: antialiased !important; }
img { border: 0 !important; outline: none !important; }
p { Margin: 0px auto !important; Padding: 0px !important; }
table { border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; }
td, a, span { border-collapse: collapse; mso-line-height-rule: exactly; }
.ExternalClass * { line-height: 100%; }
.em_defaultlink a { color: inherit !important; text-decoration: none !important; }
.em_defaultlinku a { color: inherit !important; text-decoration: underline !important; }
.em_g_img + div { display: none; }
a[x-apple-data-detectors], u + .em_body a, #MessageViewBody a { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
.em_white a { color: #ffffff; text-decoration: none; }
.em_black a { color: #000000; text-decoration: none; }
.em_grey a{text-decoration:underline; color: #5e687b;}
.cta_insta a:hover{opacity:0.8 !important;}
#media only screen and (max-width:599px) {
.em_main_table { width: 100% !important; }
.em_wrapper { width: 100% !important; }
.em_hide { display: none !important; }
.em_full_img img { width: 100% !important; height: auto !important; }
.em_center { text-align: center !important; }
.em_side10 { width: 10px !important; }
.em_aside10 { padding: 0px 10px !important; }
.em_side15 { width: 15px !important; }
.em_aside15 { padding: 0px 15px !important; }
.em_ptop { padding-top: 20px !important; }
.em_pbottom { padding-bottom: 20px !important; }
.em_h20 { height: 20px !important; font-size: 1px!important; line-height: 1px!important; }
.em_h30 { height: 30px !important; }
.em_mob_block { display: block !important; }
.em_hauto { height: auto !important; }
.em_clear { clear: both !important; width: 100% !important; display: block !important; }
.em_pad { padding: 15px 0px!important; }
.em_p0 { padding: 0px !important; }
u + .em_body .em_full_wrap { width: 100% !important; width: 100vw !important; }
}
#media screen and (max-width: 479px) {
.em_w250 img{width: 250px !important; height: auto !important;}
}
</style>
<!-- == Header Section == -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="em_full_wrap" bgcolor="#f7f6f2" style="table-layout:fixed;">
<tbody><tr>
<td align="center" valign="top"><table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:600px; table-layout:fixed;">
<tbody><tr>
<td width="20" style="width: 20px;" class="em_side15"> </td>
<td align="center" valign="top" style="padding: 10px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="em_defaultlinku" align="left" valign="top" style="font-size: 11px;line-height: 19px; font-family: 'Segoe', 'Lato', Trebuchet MS, sans-serif; color: #5e687b;">
A project of the <a style="text-decoration: underline; color: #5e687b;" target="_blank" href="" sib_link_id="-2"><span style="text-decoration: underline; color: #5e687b;">me</span></a>
</td>
<td class="em_defaultlinku" align="right" valign="top" style="font-size: 11px;line-height: 19px; font-family: 'Segoe', 'Lato', Trebuchet MS, sans-serif; color: #5e687b;"><a style="text-decoration: underline; color: #5e687b;" target="_blank" href="https://4gyqr.r.bh.d.sendibt3.com/mk/cl/f/XUnKP49MNRJGqrTlNljomt86K0iNsgdAd6geoccV9wjEoMk4WDUFVtfu35Pch2qMizkrVxMHdgNeKkma-D8pvKI4brXSZeUJcwGASatkf8QC7fvoy2lzRiF_nJ3iplyaHM_VMwh7WfRCLNOA_b_UZgVhaDjK93nLSRu-xdfS9NFxUKEeDSfMmwENzXkMGHNu_L__CmSYdD3h4oaUPw_Ec4Bqf9Oe07sJYlx-plI36Pr30fP3MilbymBwzRvgWQ" sib_link_id="-2"><span style="text-decoration: underline; color: #5e687b;">View in browser</span></a>
</td>
</tr>
</tbody>
</table>
</td>
<td width="20" style="width: 20px;" class="em_side15"> </td>
</tr>
</tbody></table></td>
</tr>
</tbody></table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="em_full_wrap" bgcolor="#3c81b7" style="table-layout:fixed;">
<tbody><tr>
<td align="center" valign="top" class="em_aside10"><table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:600px; table-layout:fixed;">
<tbody><tr>
<td align="center" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td width="15" style="width: 15px;"> </td>
<td align="center" valign="top" style="padding: 33px 0px 34px;" class="em_pad">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td align="center" valign="top" class="em_w250">
<a href="" target="_blank" style="text-decoration: none;" sib_link_id="-2">
<img src="" width="600px" alt="" border="0" style="display: block; max-width: 600px; font-size: 14px; font-family: Trebuchet MS, sans-sarif; line-height: 16px; color: #ffffff; font-weight: bold;" sib_img_id="0" sib_img_id="6"> </a>
</td>
</tr>
</tbody>
</table>
</td>
<td width="15" style="width: 15px;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" class="em_full_img">
<img style="display: block; max-height: 600px;" border="0" alt="" width="600" src="https://img.mailinblue.com/2622083/images/rnb/original/5e5ea936a209c5f1bb63e3a4.png?t=1603303476946" sib_img_id="1" sib_img_id="7">
</td>
</tr>
</tbody></table></td>
</tr>
</tbody>
</table>
<!-- == //Header Section == -->
<!-- == Body Section == -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="em_full_wrap" bgcolor="#f7f6f2" style="table-layout:fixed;">
<tbody>
<tr>
<td align="center" valign="top" class="em_aside10">
<table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:600px; table-layout:fixed;">
<!-- Banner section -->
<tbody>
<tr>
<td align="center" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tbody>
<tr>
<td width="20" style="width: 20px;" class="em_side15"> </td>
<td align="center" valign="top" style="padding: 10px 0px 10px;" class="em_pad">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="em_defaultlink" align="left" valign="top" style="font-size: 18px; font-family: 'Segoe', 'Lato', Trebuchet MS, sans-serif; line-height: 26px; color: #5e687b;">
<br>
<p><span style="font-size:22px; color:#ed7d31;"><strong>Title</strong></span></p>
<br>
<p><span style="font-size:18px; color:#ed7d31;">Subtitle</span></p>
<br>
<p><span style="font-size:18px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></p><br>
<p>Download the app today at: </p>
</td>
</tr>
</tbody>
<table dir="ltr" width="100%" border="0" cellspacing="0" cellpadding="10" align="center" class="tablescale">
<tbody>
<tr>
<td>
<img src="https://img.mailinblue.com/2622083/images/rnb/original/5f8f1501bf3088251f084b30.png?t=1603303691818" width="230" style="margin:6%;width:88%">
</td>
<td>
<img src="https://img.mailinblue.com/2622083/images/rnb/original/5f8f1535c87258058403a4b3.png?t=1603303702894" width="280">
</td>
</table>
</td>
<td width="20" style="width: 20px;" class="em_side15"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<tr>
<td align="center" valign="top" class="em_full_img">
<img style="display: block; max-height: 600px;" border="0" alt="" width="600" src="https://img.mailinblue.com/2622083/images/rnb/original/5e5ea90ba8a748ea77252c11.png?t=1603303468240" sib_img_id="4" sib_img_id="10">
</td>
</tr>
</td>
</tr>
</tbody></table>
<!-- == //Body Section == -->
<!-- == Footer Section == -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="em_full_wrap" bgcolor="#f7f6f2" style="table-layout:fixed;">
<tbody><tr>
<td align="center" valign="top"><table align="center" width="500" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:500px; table-layout:fixed;" bgcolor="#f7f6f2">
<tbody><tr>
<td align="center" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="em_grey em_ptop" align="left" valign="top" style="font-size: 12px; font-family: 'Segoe', 'Lato', Trebuchet MS, sans-serif; line-height: 19px; color: #9a9ca0; padding-top: 30px;">
We sent this email to <a style="text-decoration:underline;color: #5e687b;" href="mailto:{{contact_email}}">{{contact_email}}</a> because you signed up.
<br><br>
i make this solution that solve your problem but i think the main problem is the picture frame of g play it has more "white space". i hope i was helpful, have a good day.
<tbody>
<tr>
<td>
<a href="" sib_link_id="-2">
<img src="https://img.mailinblue.com/2622083/images/rnb/original/5f8f1501bf3088251f084b30.png?t=1603303691818" style="max-width:200px;width:100%">
</a>
</td>
<td>
<a href="" sib_link_id="-2">
<img src="https://img.mailinblue.com/2622083/images/rnb/original/5f8f1535c87258058403a4b3.png?t=1603303702894" style="max-width:255px;width:100%">
</a>
</td>
</tr>
</tbody>
I'm working on a responsive email template and can't get some divs to center on mobile as they should.
I have media queries included in the CSS to center the content on mobile, but they are being ignored on the second div. Not sure if I have the media query styles in the right places in the code. Media queries and div code included for reference.
/*Responsive screens*/
#media screen and (max-width: 500px) {
.stack-column, .stack-column-center { display: block !important;width: 100% !important;max-width: 100% !important;direction: ltr !important; padding-left:0px !important; padding-right:0px !important; padding-bottom:0px !important } /*Forces table cells into full-width rows*/
.stack-column-center { text-align: center !important; padding-left:0px !important; padding-right:0px !important; } /* And center justify these ones. */
.center-on-narrow { text-align: center !important;display: block !important;margin-left: auto !important;margin-right: auto !important;float: none !important; } /*Generic utility class for centering. Useful for images, buttons, and nested tables*/
table.center-on-narrow { display: inline-block !important; }
.email-container p { font-size: 17px !important; } /*Adjusts typography on small screens to improve readability*/
.middle-article-mobile-pt { padding-top: 60px !important; }
.middle-article-mobile-pb { padding-bottom: 60px !important; }
}
<tr>
<td dir="ltr" height="100%" style="padding: 30px 50px; background-color: #ffffff;" valign="top" width="100%"><!--[if mso]>
<table align="center" role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
<tr>
<td valign="top" width="500" style="width: 500;">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width:500px; padding:0; margin:0;" width="100%">
<tbody>
<tr style="padding:0;margin:0;">
<td align="center" style="font-size:0; padding: 0;" valign="top" class=""><!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
<tr>
<td valign="top" width="200" style="width: 200px;">
<![endif]-->
<div class="stack-column" style="display:inline-block; margin: 0; max-width: 200px; vertical-align:top; width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td dir="ltr" style="padding: 0 10px 0 10px;" class=""><img alt="alt_text" border="0" class="center-on-narrow" height="" src="http://go.pardot.com/l/190862/2019-04-09/h9rldk/190862/77786/template_testing_200px_placeholder.png" style="width: 100%; max-width: 200px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;" width="200"></td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="300" style="width: 300px;">
<![endif]-->
<div class="stack-column" style="display:inline-block; margin: 0; max-width:300px; vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="center-on-narrow" dir="ltr" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 0 0 20px; text-align: left;">
<p class="body-h1" style="margin:0;">Headline</p>
<p class="body-h2" style="margin:0;"><a href="##" style="text-decoration:underline;">Author, CPA<br>
Title title title title</a></p>
<p class="body-copy" style="margin: 15px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<!-- Button : BEGIN -->
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" bgcolor="#05090c7" pardot-data="" style="border-radius: 2px; background: rgb(255,255,255);" class=""><a class="light-blue-button" href="##"><!--[if mso]> <![endif]-->Read the Article <!--[if mso]> <![endif]--></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Button : END --></td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
Was expecting the .center-on-narrow and .stack-column CSS styles to center the div content on narrow but it's being ignored on the second div.
Try using center tags. This will center the content enclosed by the tags. For an example visit Center Tags Example.
I figured this out! Added some more mobile styles and tweaked the code around the CTA button.
/*Responsive screens*/
#media screen and (max-width: 500px) {
.stack-column, .stack-column-center { display: block !important;width: 100% !important;max-width: 100% !important;direction: ltr !important; padding-left:0px !important; padding-right:0px !important; padding-bottom:0px !important }
.stack-column-center { text-align: center !important; padding-left:0px !important; padding-right:0px !important; }
.center-on-narrow { text-align: center !important;display: block !important;margin-left: auto !important;margin-right: auto !important;float: none !important; }
table.center-on-narrow { display: inline-block !important; }
.email-container p { font-size: 17px !important; }
.middle-article-mobile-pt { padding-top: 60px !important; }
.middle-article-mobile-pb { padding-bottom: 60px !important; }
.text-right-mobile { padding: 0px !important; }
.body-copy, .body-copy-2, .body-h1, .body-h2, .light-blue-button, .orange-button, .mobile-center { text-align:center !important; }
}
<tr>
<td dir="ltr" height="100%" style="padding: 30px 50px; background-color: #ffffff;" valign="top" width="100%" ><!--[if mso]>
<table align="center" role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
<tr>
<td valign="top" width="500" style="width: 500;">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width:500px; padding:0; margin:0;" width="100%">
<tbody>
<tr style="padding:0;margin:0;">
<td align="center" style="font-size:0; padding: 0 0 60px 0;border-bottom:1px solid #ebebeb;" valign="top" class=""><!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
<tr>
<td valign="top" width="200" style="width: 200px;">
<![endif]-->
<div class="stack-column" style="display:inline-block; margin: 0; max-width: 200px; vertical-align:top; width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td dir="ltr" style="padding: 0 10px 0 10px;" class=""><img alt="alt_text" border="0" class="center-on-narrow" height="" src="http://go.pardot.com/l/190862/2019-04-09/h9rldk/190862/77786/template_testing_200px_placeholder.png" style="width: 100%; max-width: 200px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;" width="200"></td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="300" style="width: 300px;">
<![endif]-->
<div class="stack-column" style="display:inline-block; margin: 0; max-width:300px; vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="center-on-narrow text-right-mobile" dir="ltr" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 0 0 20px; text-align: left;">
<p class="body-h1" style="margin:0;">Headline</p>
<p class="body-h2" style="margin:0;"><a href="##" style="text-decoration:underline;">Author, CPA<br>
Title title title title</a></p>
<p class="body-copy" style="margin: 15px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<!-- Button : BEGIN -->
<table border="0" cellpadding="0" cellspacing="0" >
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#05090c7" pardot-data="" style="border-radius: 2px; background: rgb(255,255,255);" class=""><a class="light-blue-button" href="##"><!--[if mso]> <![endif]-->Read the Article <!--[if mso]> <![endif]--></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Button : END --></td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
I am creating a responsive email template.
And I want to give the white content area border-radius: 5px;. The border-radius is working on the bottom corners of the table, but it will not show on the top corners.
Any ideas whats going on?
Here is a code pen which is easier to see the template in action:
https://codepen.io/thecashbag/pen/jLyQoa
P.S. This is for an email template. Web designers who are not familiar with email will hate this table based code, but it's required for email clients to display correctly.
<!DOCTYPE html>
<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. -->
<!-- Web Font / #font-face : BEGIN -->
<!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->
<!-- 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]><!-->
<!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto: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 it 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 email clients meddling in triggered links. */
*[x-apple-data-detectors], /* iOS */
.x-gmail-data-detectors, /* Gmail */
.x-gmail-data-detectors *,
.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;
}
/* 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;
}
/* 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;
}
}
</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: #555555 !important;
border-color: #555555 !important;
}
/* Media Queries */
#media screen and (max-width: 480px) {
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
/* What it does: Adjust typography on small screens to improve readability */
.email-container p {
font-size: 17px !important;
line-height: 22px !important;
}
/* What it does: Adjusts reduces padding on discount boxes; */
.discount-outside {
padding: 10px !important;
}
.discount-td-first {
padding: 30px 10px 10px 10px !important;
}
.discount-td-middle {
padding: 10px 30px !important;
}
.discount-td-last {
padding: 10px 10px 30px 10px !important;
}
}
</style>
<!-- What it does: Makes background images in 72ppi Outlook render at correct size. -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body width="100%" bgcolor="#f6f6f6" style="margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #f6f6f6; text-align: left;">
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">
(Optional) This text will appear in the inbox preview, but not the email body.
</div>
<!-- Visually Hidden Preheader Text : END -->
<!--
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 680px.
2. MSO tags for Desktop Windows Outlook enforce a 680px width.
Note: The Fluid and Responsive templates have a different width (600px). The hybrid grid is more "fragile", and I've found that 680px is a good width. Change with caution.
-->
<div style="max-width: 680px; margin: auto;" class="email-container">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td>
<![endif]-->
<!-- Email Header : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<tr>
<td style="padding: 20px 0; text-align: center">
<img src="https://elementpaints.com/wp-content/uploads/2017/07/Element-db3236-transparent-200x42.png" width="200" height="42" alt="Element Paints - Enable images to view" border="0" style="height: auto; background: #f6f6f6; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #f6f6f6;">
</td>
</tr>
</table>
<!-- Email Header : END -->
<!-- Email Body : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px; border-radius: 5px;" class="email-container" bgcolor="#ffffff">
<!-- 1 Column Text : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
<p style="margin: 0 0 10px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text : END -->
<!-- 3 Even Columns : BEGIN -->
<tr>
<td bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%" style="padding: 10px 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="660">
<tr>
<td align="left" valign="top" width="220">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; max-width:33.33%; min-width:220px; vertical-align:top; width:100%;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px 10px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: center;">
<tr>
<td>
<img src="https://elementpaints.com/wp-content/uploads/2017/02/Paint-brush-80x80.png" width="80" height="" border="0" alt="Soft Buttery Texture Image" class="center-on-narrow" style="width: 100%; max-width: 80px; height: auto; background: #ffffff; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #ffffff;">
</td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding-top: 10px;" class="stack-column-center">
<h3>Soft Buttery Texture</h3>
<p style="margin: 0 0 10px 0;">Feels great on the brush, always a pleasure to work with.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="220">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; max-width:33.33%; min-width:220px; vertical-align:top; width:100%;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px 10px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px; text-align: center;">
<tr>
<td>
<img src="https://elementpaints.com/wp-content/uploads/2017/02/Color-Plate-80x80.png" width="80" height="" border="0" alt="Heavy Pigment Load Image" class="center-on-narrow" style="width: 100%; max-width: 80px; height: auto; background: #ffffff; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #ffffff;">
</td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding-top: 10px;" class="stack-column-center">
<h3>Heavy Pigment Loads</h3>
<p style="margin: 0 0 10px 0;">Optimal pigment ratios give you rich vivid colors, and the best coverage.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="220">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; max-width:33.33%; min-width:220px; vertical-align:top; width:100%;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px 10px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px; text-align: center;">
<tr>
<td>
<img src="https://elementpaints.com/wp-content/uploads/2017/02/Picture-icon-80x81.png" width="80" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 80px; height: auto; background: #ffffff; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #ffffff;">
</td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding-top: 10px;" class="stack-column-center">
<h3>Lightfast Colors</h3>
<p style="margin: 0 0 10px 0;">Strong permanent colors stop your painting from fading over time.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- 3 Even Columns : END -->
<!-- DISCOUNT 1 COLUMN : BEGIN -->
<tr>
<td bgcolor="#ffffff" class="discount-outside" style="padding: 10px 40px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border: 8px dashed #cccccc; text-align: center;">
<tr>
<td class="discount-td-first" style="padding: 30px 30px 10px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
<h1>heading</h1>
</td>
</tr>
<tr>
<td class="discount-td-middle" style="padding: 0 30px 10px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
<p style="margin: 0 0 10px 0;">text:</p>
</td>
</tr>
<tr>
<td class="discount-td-middle" style="padding: 0 30px 10px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
<h2>XXX-CODE-GOES-HERE-XXX</h2>
</td>
</tr>
<tr>
<td class="discount-td-last" style="padding: 0 30px 30px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
<!-- Button : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td">
<a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<span style="color:#ffffff;" class="button-link"> A Button </span>
</a>
</td>
</tr>
</table>
<!-- Button : END -->
</td>
</tr>
</table>
</td>
</tr>
<!-- DUSCOUNT 1 COLUMN : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td aria-hidden="true" height="30" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
</table>
<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<tr>
<td style="padding: 40px 10px 10px; width: 100%; font-size: 12px; font-family: sans-serif; line-height:18px; text-align: center; color: #cccccc;" class="x-gmail-data-detectors">
View as a Web Page
<br><br>
%SENDER-INFO-SINGLELINE%
<br>
unsubscribe
</td>
</tr>
</table>
<!-- Email Footer : END -->
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
Add style="background:none" to your forst in your "1 Column Text" section. This should do what you want.
<!-- 1 Column Text : BEGIN -->
<tr>
<td bgcolor="#ffffff" style="background:none">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
<p style="margin: 0 0 10px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text : END -->
In am creating a bunch of emails for an email-flow. For some reason I can't find, when I test the email in the GMAIL APP there is some unwanted grey lines at 1px height.
I just can't find out why they are there. It seems that it's only in the GMAIL APP - I am testing using litmus.com
The HTML for the email:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vores 5 bedste råd inden boligkøbet</title>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse;}
</style>
<![endif]-->
<!--[if mso]>
<style> body,table tr,table td,a, span,table.MsoNormalTable { font-family:Arial, Helvetica, sans-serif !important; }
</style>
<!--<![endif]-->
<style type="text/css">
#media screen and (max-width: 525px) {
h1 {
font-size: 30px !important;
}
}
</style>
</head>
<body bgcolor="#3d6e9c" style="padding: 0; margin: 0;">
<div style="background-color:#3d6e9c;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://naborapporten.its-umbraco.dk/emails/bg.jpg" color="#3d6e9c"/>
</v:background>r
<![endif]-->
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td valign="top" align="left" background="http://naborapporten.its-umbraco.dk/emails/bg.jpg">
<center>
<!--[if (gte mso 9)|(IE)]><table width="650" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table cellspacing="0" cellpadding="0" border="0" style="border: none; border-collapse: collapse; width: 100%;">
<tr>
<td background="http://naborapporten.its-umbraco.dk/emails/bg.jpg" align="center" style="font-family: Arial; padding-top: 100px; padding-bottom: 100px; padding-left: 15px; padding-right: 15px;">
<table border="0" align="center" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 650px; border-collapse: collapse; border: none; ">
<tr>
<td height="43" valign="bottom"><img src="http://naborapporten.its-umbraco.dk/emails/top.png" valign="bottom" style="font-family: Arial; max-width: 650px; width: 100%; height: auto; vertical-align: bottom; border-collapse: collapse;"></td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff" style="font-family: Arial; padding-left: 15px; padding-right: 15px; padding-top: 45px; padding-bottom: 45px; border-collapse: collapse;">
<h1 style="color: #707986; font-size: 45px; margin-bottom: 0; mso-line-height-rule: exactly; line-height: 90%;"><b><b>Din Naborapport™</b></b></h1>
<!--[if (gte mso 9)|(IE)]><table width="470" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; max-width: 470px; width: 100%;">
<tr>
<td align="center" style="color: #707986; font-size: 18px; padding-top: 45px; border-collapse: collapse;"><b>#Model.FullAddress</b></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]><table width="470" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table border="0" cellspacing="0" cellpadding="0" align="center" style="max-width: 470px; width: 100%; border-collapse: collapse;">
<tr>
<td align="center" bgcolor="#ffffff" valign="middle" style="padding-top: 45px; padding-bottom: 45px; padding-left: 15px; padding-right: 15px;"><img src="http://naborapporten.its-umbraco.dk/gfx/email/knap_til_naborapport.png" border="0" style="border: none; max-width: 100%; height: auto;"></td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" bgcolor="#ffffff" style="font-family: Arial; max-width: 470px; width: 100%; padding-left: 15px; padding-right: 15px;">
<h2 style="color: #1fbba7; font-size: 30px; font-weight: bold;">Naborapporten giver dig et unikt indblik i nabolaget</h2>
<table>
<tr>
<td align="center" valign="middle" style="font-size: 18px; color: #5d6573; ">
<p><b>Hvilke typer er dine naboer?</b></p>
<p><b>Hvad er afstanden til skole, indkøb og transport?</b></p>
<p><b>Hvad beskæftiger dine naboer sig med til dagligt?</b></p>
<b>Hvad er prisudviklingen på boliger i området?</b>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
<tr>
<td valign="middle" align="center" bgcolor="#ffffff" style="font-family: Arial; padding-top: 45px; padding-left: 15px; padding-right: 15px; border-collapse: collapse;">
<span style="color: #1fbba7; font-size: 18px; font-weight: bold;">Få gode råd til huskøbet på vores boligunivers</span>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff" style="padding-top: 45px; padding-bottom: 45px; padding-left: 15px; padding-right: 15px; border-collapse: collapse;">
<img src="http://naborapporten.its-umbraco.dk/emails/kvittering/knap_book.png" style="border: none; max-width: 100%; height: auto;" />
</td>
</tr>
<tr>
<td bgcolor="#eeeeee" align="center" valign="middle" style="padding-top: 45px; border-collapse: collapse;">
<img src="http://naborapporten.its-umbraco.dk/emails/logo.png">
</td>
</tr>
<tr>
<td valign="top" style="border-collapse: collapse;"><img src="http://naborapporten.its-umbraco.dk/emails/bund.png" valign="top" alt="" style="max-width: 100%; height: auto;"></td>
</tr>
<tr>
<td height="92" align="center" valign="middle" style="border-collapse: collapse;"><b>Afmeld</b></td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</center>
</td>
</tr>
</table>
</div>
</body>
</html>
It looks to me like your background color is bleeding through. This is a common problem on iOS devices as well as some other apps. Is there a reason why you're setting a background color on the body and first div tag?
Make table border as "0"
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
Hope this will help you!
As Gokul Maha recommends, I'd change the border="1" on line 35 to border="0". But it's odd that a single instance of that would cause three horizontal borders to appear.
Regarding emails previews in Litmus, they are not always 100% accurate due to the way they open an email in their inbox and create a screenshot. I recommend testing this using an actual copy of Gmail app, if you are able to do that. Results may differ. Litmus saves a ton of time, but for the small details it's always good to know how it looks on an actual device running the actual email app.
i recently created a similar Mail with the same problem. In my case I tried to border the whole Mail, wich worked, but it created small borders around img's and some other objects.
To fix this i added style="border: none;" to each first td after the table with the border around. This fixed it for me.
Also try putting the border on a td. The border doesn't seem to show up in some Outlook Versions, if they are on a table.
If you dont want a Border at all, you sould set the border="1" in line 35 to 0.
Hi I fixed this issue by putting bgcolor="#ffffff" style="background-color:#ffffff;" on the body tag and on the td tag and also in every table tag . All the gray lines disappeared from gmail app.
I have two side by side table cells which stack when triggered by a media query for a HTML newsletter. I want the headlines "Be Ready" and "Stay Organized" to left align when the responsive code fires but the "margin: 0px auto" causes all of the content to center. Is there a way to get these to stay left aligned? If I move them out of the table data cell from the rest of the content, everything messes up.
The "Stay Organized" and "Be Ready" headlines are centered when the code is responsive. I need them left aligned instead.
This is what it's supposed to look like on mobile: http://imgur.com/vT3XhJ6
Any help is appreciated.
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
table td {border-collapse:collapse;}
table[class=tblPreHeaderLinks] {
width: 100% !important;
height: 25px !important;
clear: both !important;
float: none !important;
}
.appleLinks2 a {
color:#333333 !important;
text-decoration: none !important;
}
/* CLIENT-SPECIFIC STYLES */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* RESET STYLES */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body{height:100% !important; margin:0; padding:0; width:100% !important;}
/* iOS BLUE LINKS */
.appleBody a {color:#68440a; text-decoration: none;}
.appleFooter a {color:#999999; text-decoration: none;}
/* MOBILE STYLES */
#media screen and (max-width: 525px) {
body[yahoo] .block_td {display: block;}
.appleLinks2 a {
color:#545861 !important;
text-decoration: none !important;
}
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
div[class="mobilecontent"]{
display: block !important;
max-height: none !important;
}
/* ALLOWS FOR FLUID TABLES */
table[class="wrapper"]{
width:100% !important;
}
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
td[class="mobile-hide"]{
display:none;}
img[class="mobile-hide"]{
display: none !important;
}
img[class="img-max"]{
max-width: 100% !important;
width: 100% !important;
height:auto !important;
}
a.learnMore {
display: block;
text-align: center;
}
/* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */
td[class="section-padding"]{
padding: 10px 15px 5px 15px !important;
}
/* FULL-WIDTH TABLES */
table[class="responsive-table"]{
width:100%!important;
}
td[class="weatherTEXT"]{
font-size: 23px !important;
line-height: 27px !important;
}
td[class="weatherTEXT2"]{
font-size: 17px !important;
line-height: 21px !important;
}
}
</style>
</head>
<body yahoo="fix" style="margin: 0; padding: 0;" bgcolor="#f6f4f5">
<style type="text/css">
body { width: 100% !important; }
</style>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapper" style="border:1px solid #e2e0e0;">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="640" class="wrapper" bgcolor="#f6f4f5">
<tr>
<td align="center">
<!--BODY-->
<table border="0" cellpadding="0" cellspacing="0" width="640" class="wrapper" bgcolor="#f6f4f5" align="center">
<tbody><tr>
<td width="640" align="center" bgcolor="#ffffff" class="section-padding" >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td bgcolor="#ffffff" align="center" style="padding: 5px 0px 5px 0px;" class="section-padding">
<table border="0" cellpadding="0" cellspacing="0" width="640" class="responsive-table" align="center">
<tbody>
<tr><!--MOVABLE INK-->
<td>
<table border="0" cellpadding="0" cellspacing="0" width="640" class="wrapper" bgcolor="#ffffff" align="center">
<tbody><tr>
<td style="padding: 15px 15px 5px 15px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="290" class="block_td" style="margin:0px auto;">
<table cellpadding="0" cellspacing="0" border="0" >
<tr>
<td align="left" style="font-family: Ariel, Arial, Helvetica, sans-serif; font-size: 22px; line-height: 26px; color:#002663;padding:0px 0px 25px 0px;" colspan="2">
<b>Be Ready.</b>
</td>
</tr>
<td rowspan="3" valign="top" width="57" style="padding-right:10px;;">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Phone-35x73.jpg" width="35" height="73" alt="House getting hit by a fallen tree" border="0">
</td>
<td valign="top" align="left">
<table cellpadding="0" cellspacing="0" border="0" style="padding: -5px 0px 0px 0px;">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; line-height:17px; padding-left:0px;">
<b>Download our app:</b>
</td>
</tr>
<tr>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">
<table cellpadding="2" cellspacing="2" border="0">
<tr>
<td style="valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">Take pictures of damage</td>
</tr>
<tr>
<td valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">Submit your claim</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style=" padding-top:2px;padding-bottom:35px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td class="mobile-hide">
<img src="http://www.movable-ink-7850.com/p/rp/aa8600496aa4ae32.png?MM_webID=%%WebID%%" alt="House getting hit by a fallen tree">
</td>
</tr>
<tr>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="padding-right:35px;">
<!--[if !mso 9]><!-->
<div class="mobilecontent" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;" align="center">
<img src="http://www.movable-ink-7850.com/p/rp/aa8600496aa4ae32.png?MM_webID=%%WebID%%" border="0" alt="House getting hit by a fallen tree">
</div>
<!--<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top" width="290" class="block_td" style="margin:auto;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: Ariel, Arial, Helvetica, sans-serif; font-size: 22px; line-height: 26px; color:#002663;padding:0px 0px 25px 0px;" colspan="2">
<b>Stay Organized.</b>
</td>
</tr>
<tr>
<td rowspan="3" valign="top" width="60" style="padding-right:10px;">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Icon-Devices-50x50.jpg" alt="" border="0">
</td>
<td valign="top" align="left">
<table cellpadding="0" cellspacing="0" border="0" style="padding: -5px 0px 0px 0px;">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; line-height:17px; padding-left:0px;">
<b>Visit eService today:</b>
</td>
</tr>
<tr>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">
<table cellpadding="2" cellspacing="2" border="0">
<tr>
<td valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;"><span class="appleLinks2">24/7 access</span></td>
</tr>
<tr>
<td valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">Manage your policy online</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top:2px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td class="mobile-hide">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Button-Sign-In-70x19.jpg">
</td>
</tr>
<tr>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="padding-top: 30px; padding-right:40px;">
<!--[if !mso 9]><!-->
<div class="mobilecontent" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;" align="center">
<a href="https://www.libertymutual.com/home-insurance/home-coverages-and-benefits/home-insurance-benefits/property-replacement-service?MM_webID=%%WebID%%"><img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Button-Sign-In-139x38.jpg" width="139" height="38" border="0" alt="House getting hit by a fallen tree">
</div>
<!--<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="padding: 15px 15px 20px 15px;" class="tdLine">
<table width="100%" align="center" cellpadding="0" cellspacing="0" class="tblLine">
<tr>
<td style="line-height:1px; font-size:1px; background-color:#f6f4f5" class="tdLineActual"> </td>
</tr>
</table> <!-- tblLine -->
</td> <!-- tdLine -->
</tr>
</tbody></table>
</td>
</tr><!--END OF MOVABLE INK-->
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table><!--END OF BODY-->
</td>
</tr>
</table>
</td>
</tr>
</table><!--END OF CONTAINER-->
</body>
</html>
However i dont recommend to use nested tables but for your structure added one more table for desired results: demo
<table width="80%" border="0" align="center" cellspacing="0" cellpadding="0">