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>
Related
I'm having an issue with the outlook application.
One thin line shows above and below the img tag. I have highlighted
the line in the screenshot.
I have attached the screenshot in which the thin line is highlighted.
Please let me know the suggested fix.
Thank you in advance.
#media only screen and (max-width: 639px) {
.st-title-wrapper {
padding-left: 50px !important;
padding-right: 50px !important;
}
.st-title {
font-size: 24px !important;
line-height: 22px !important;
}
.st-desc {
font-size: 16px !important;
line-height: 18px !important;
}
.footer-links {
padding-left: 20px !important;
}
.footer-link-single {
padding: 8px 5px !important;
}
.footer-link-single a {
font-size: 14px !important;
}
.footer-link-top {
height: 30px !important;
}
.footer-link-bottom {
height: 30px !important;
}
.footer-social {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.footer-logo {
width: 125px !important;
}
.footer-logo img {
width: 125px !important;
}
}
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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Email template</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#300;400;700&display=swap" rel="stylesheet" />
<meta name="x-apple-disable-message-reformatting" />
<!--[if gt mso 15]>
<style type="text/css" media="all">
/* Outlook 2016 Height Fix */
table,
tr,
td {
border-collapse: collapse;
}
tr {
font-size: 0px;
line-height: 0px;
border-collapse: collapse;
}
</style>
<![endif]-->
</head>
<body style="margin: 0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td style="max-width: 100%; width: 840px">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse">
<tbody>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse">
<tbody>
<tr>
<td align="center" style="background-color: #000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse">
<tbody>
<tr>
<td></td>
<td style="width: 360px; text-align: center" class="st-title-wrapper">
<font style="
color: #e4002b;
font-family: 'Oswald', Arial, sans-serif;
font-weight: 600;
font-size: 32px;
line-height: 28px;
" class="st-title">Lorem Ipsum is simply dummy text of the
</font>
</td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#e6e6e6">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse">
<tr>
<td>
<img src="https://rahulshahui.github.io/pwa/images/shape-top.png" width="100%" style="display: block" />
</td>
</tr>
<tr>
<td align="center" style="padding: 13px 20px">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse">
<tbody>
<tr>
<td></td>
<td width="550" style="text-align: center">
<font style="
color: #1a1a1a;
text-align: center;
font-family: Arial, sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 20px;
" class="st-desc">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
College in Virginia.
</font>
</td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<img src="https://rahulshahui.github.io/pwa/images/shape-bottom.png" width="100%" style="display: block" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color: #000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="
border-collapse: collapse;
border-spacing: 0px;
">
<tbody>
<tr>
<td align="" class="footer-links" style="padding-left: 80px">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="240" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="" valign="middle" style="padding: 8px 0" class="footer-link-single">
<a href="https://www.google.com/" style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
">Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
</table>
</td>
<td width="210" valign="top">
<table
border="0"
cellpadding="0"
cellspacing="0"
>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tr>
<td
colspan="3"
height="60"
class="footer-link-bottom"
></td>
</tr>
<tr>
<td
align="center"
style="
padding-left: 42px;
padding-right: 42px;
"
>
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tr>
<td
height="1"
style="background-color: #fff"
></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right" colspan="3">
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tr>
<td
align="right"
class="footer-social"
style="
padding-top: 62px;
padding-bottom: 62px;
"
>
<table
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tbody>
<tr>
<td
align="center"
valign="middle"
style="
padding-left: 8px;
padding-right: 8px;
"
>
<a
href="https://www.google.com/"
>
<img
src="https://rahulshahui.github.io/pwa/images/FB-icon.png"
/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
[Below is the code link][2]
[2]: https://codepen.io/rahulFront/pen/oNpPvgZ
This looks like a border.
Try adding border-width:0; to the images, e.g.:
<img src="https://rahulshahui.github.io/pwa/images/shape-bottom.png" width="100%" style="display: block;border-width:0;" />
built the following HTML for an email I am deploying. When I test in Litmus, the email looks great on all platforms except for Outlook. It appears one of the columns (the row with four imgs) breaks in Outlook desktop). The second image ends up moving to a new row.
FYI yes I know the image html may be wonky, I removed the original images that I was using in order to post in this group.
This is what the email block should look like:
code:
<!-- == Title Text And Three Column Section == --><table class="em_full_wrap" style="table-layout:fixed;" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#F8F8FB"> <tr>
<td valign="top" align="center">
<table class="em_wrapper" style="width:640px;" width="640" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
<tr>
<td class="em_side15" style="width:0px;" width="40">
</td><td valign="top" align="center">
<table class="em_wrapper" style="width:560px;" width="560" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td class="em_ptop" style="padding-top:40px; padding-left:40px;padding-right:40px;" valign="top" align="center">
<table class="em_wrapper" style="width:560px;" width="560" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<th class="em_defaultlink" style="color: rgb(37, 13, 83); font-family: "Arial", Arial, sans-serif; font-size: 22px; line-height: 27px; font-weight: bold; vertical-align: middle; height: 20px;" align="center">
Header Text</th></tr><tr>
<td class="em_defaultlink" style="color: rgb(37, 13, 83); font-family: "Arial", Arial, sans-serif; font-size: 22px; line-height: 27px; font-weight: bold; height: 20px;" align="center">
</td></tr><tr>
<td class="em_defaultlink" colspan="3" style="font-family:Arial, sans-serif; font-size:16px; line-height:22px; color:#666666;" valign="top" align="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</td></tr><tr>
<td class="em_h30" style="height: 20px;">
</td></tr><tr>
<td valign="top" align="center">
<table class="em_wrapper" style="width:520px;" width="520" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td valign="top" align="center">
<table class="em_wrapper" style="width:520px;" width="520" cellspacing="0" cellpadding="0" border="0" align="left">
<tr>
<td style="width: 130px; height: 20px;" valign="top" align="center">
<table class="em_wrapper" style="width:130px;" width="130" cellspacing="0" cellpadding="0" border="0" align="left">
<tr>
<td class="em_ptop" style="vertical-align: top; width: 130px; height: 30px;" align="center">
<a alias="" conversion="false" data-linkto="https://" href="" title=""><img alt="Resources to support your mental well-being." data-assetid="144028" src="http://image.em.com/lib/fe8e13727c640d7e76/m/5/image+holder.png" style="display: block; max-width: 127px; color: #000000; font-family: Arial, sans-serif; font-size: 15px; line-height: 20px; font-weight: bold; padding: 0px; height: 65px; width: 95px; text-align: center;" width="95" height="65"></a></td></tr></table><!--[if gte mso 9]>
</td>
<td valign="top">
<![endif]--><table class="em_wrapper" style="width:127px;" width="127" cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td class="em_ptop" style="width: 130px; height: 30px;" valign="top" align="center">
<a alias="" conversion="false" data-linkto="https://" href="" title=""><img alt="Resources to support your mental well-being." data-assetid="144028" src="http://image.em.com/lib/fe8e13727c640d7e76/m/5/image+holder.png" style="display: block; max-width: 127px; color: #000000; font-family: Arial, sans-serif; font-size: 15px; line-height: 20px; font-weight: bold; padding: 0px; height: 65px; width: 95px; text-align: center;" width="95" height="65"></a></td></tr></table><!--[if gte mso 9]>
</td>
<td valign="top">
<![endif]--><table class="em_wrapper" style="width:130px;" width="127" cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td class="em_ptop" style="width: 127px; height: 30px;" valign="top" align="center">
<a alias="" conversion="false" data-linkto="https://" href="" title=""><img alt="Resources to support your mental well-being." data-assetid="144028" src="http://image.em.com/lib/fe8e13727c640d7e76/m/5/image+holder.png" style="display: block; max-width: 127px; color: #000000; font-family: Arial, sans-serif; font-size: 15px; line-height: 20px; font-weight: bold; padding: 0px; height: 65px; width: 95px; text-align: center;" width="95" height="65"></a></td></tr></table><table class="em_wrapper" style="width:130px;" width="130" cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td class="em_ptop" style="width: 127px; height: 30px;" valign="middle" align="center">
<a alias="" conversion="false" data-linkto="" title=""><img alt="Resources to support your mental well-being." data-assetid="144028" src="http://image.em.com/lib/fe8e13727c640d7e76/m/5/image+holder.png" style="display: block; max-width: 127px; color: #000000; font-family: Arial, sans-serif; font-size: 15px; line-height: 20px; font-weight: bold; padding: 0px; height: 65px; width: 95px; text-align: center;" width="95" height="65"></a></td></tr></table></td></tr></table></td></tr></table></td></tr><tr>
<td class="em_h20" style="height: 15px;">
</td></tr><tr>
<td class="em_h20" colspan="3" align="center">
<span style="font-family: Arial, sans-serif; font-size: 16px; line-height: 24px; color:#501CD2; padding: 0px; vertical-align: middle; height: 20px;"><span style="font-size:16px;"><a alias="CTA" conversion="false" data-linkto="https://" href="" style="color:#501cd2;text-decoration:underline;" title="CTA">CTA</a></span></span></td></tr><tr>
<td class="em_h20" style="height: 40px;">
</td></tr><tr>
<td class="em_defaultlink" style="color:#501CD2;font-family:'Montserrat', Arial, sans-serif;font-size:14px;line-height:18px;font-weight:bold;" align="center">
</td></tr><tr>
</tr></table></td></tr></table></td><td class="em_side15" style="width:40px;" width="40">
</td></tr></table></td></tr></table><!-- == // END Title Text And Three Column Section == -->
`
I have found in Outlook desktop that if the sum of the table column widths is exactly the width of the parent table Outlook will push one of the tables to another row. I would suggest reducing the column table widths to 128px.
You can also keep the column table width as is and try to use Outlook specific CSS to eliminate the horizontal margin | padding | border | spacing that Outlook is applying to the column tables.
https://stigmortenmyre.no/mso/html/concepts/ofconstyletable.htm?filter=mso-
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'm new to Dreamweaver and I have no idea how to code, but I managed to make an HTML newsletter. But the issue now is, whenever I send it via Gmail, my pictures are shown as alt_text.
The images are on the same folder as the newsletter.html file.
What am I doing wrong?
Here's the document and images for download if anyone needs it:
https://drive.google.com/file/d/0B6idya0YoPGnekc5V28tRGljWDQ/view
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>EmailTemplate-Responsive</title>
<style type="text/css">
html, body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
.ExternalClass {
width: 100%;
}
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
table, td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
img {
-ms-interpolation-mode: bicubic;
}
.yshortcuts a {
border-bottom: none !important;
}
a[x-apple-data-detectors] {
color: inherit !important;
}
</style>
<style type="text/css">
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}
#media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
}
.fluid,
.fluid-centered {
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
</head>
<body bgcolor="#e0e0e0" width="100%" style="margin: 0;" yahoo="yahoo">
<table bgcolor="#e0e0e0" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse;">
<tr>
<td><center style="width: 100%;">
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> (Optional) This text will appear in the inbox preview, but not the email body. </div>
<!-- Visually Hidden Preheader Text : END -->
<!-- Email Header : BEGIN -->
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 20px 0; text-align: center"><img src="Headers.png" width="600" height="150" alt="" border="0"></td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container">
<tr> </tr>
<tr>
<td background="SJCAM-Logo.png" bgcolor="#222222" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:175px; background-position: center center !important;">
<v:fill type="tile" src="assets/Responsive/Image_600x230.png" color="#222222" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="middle" style="text-align: center; padding: 40px; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #ffffff;"> </td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="M20.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">16MP<br>
4K#24fps<br>
2K#30fp<br>
1080P#60fps<br>
Sony IMX206 sensor <br>
NTK96660 Novatek CPU <br>
Gyro Anti-shake & WiFi </td>
</tr>
</table></td>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="SJ6LegendAir.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">14MP<br>
4K#24fps <br>
2K#30fp <br>
1080P#60fps <br>
Panasonic MN34112PA sensor <br>
SJCAM A9s CPU <br>
Gyro Anti-shake & WiFi<br></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="SJ6Legend.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">16MP <br>
4K#24fps <br>
2K#30fp <br>
1080P#60fps <br>
Panasonic MN34120PA sensor<br>
NTK96660 Novatek CPU <br>
Gyro Anti-shake & WiFi</td>
</tr>
</table></td>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="SJ7Star.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">16MP <br>
4K#30fps <br>
2K#60/30fp <br>
1080P#120/60fps <br>
Sony IMX117 sensor<br>
Ambarella A12S75 CPU<br>
Gyro Anti-shake & WiFi</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="Battery.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">1000mAh high capacity substitutive Li-ion battery is the best choice for keeping your action camera away from powering off. For SJ6 Legend and S7 Star.<br>
<br></td>
</tr>
</table></td>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="DualBatteryCharger2.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">2-slot battery charger for SCJAM SJ6 Legend or SJ7 Star.<br>
<br>
<br>
<br>
<br>
<br></td>
</tr>
</table></td>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="EXTERNAL-MIC.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> External Microphone for SJ6 Legend, SJ7 Star and SJ360<br>
<br>
<br>
<br>
<br>
<br></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td dir="ltr" align="center" valign="top" width="100%" style="padding: 10px;"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;"><img src="RemoteWatch.png" width="170" alt="alt_text" border="0" class="center-on-narrow"></td>
</tr>
</table></td>
<td width="66.66%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow"><font color="#111111"><strong>Smart Remote WristWatch</strong></font><br>
<br>
Smart Remote Wristwatch, features include: Power, Video-Photo, WiFi on/off, Burst mode, Waterproof up to 3 meters.<br>
<br>
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tr> </tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td dir="rtl" align="center" valign="top" width="100%" style="padding: 10px;"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;"><img src="Selfiestick.png" width="170" alt="alt_text" border="0" class="center-on-narrow"></td>
</tr>
</table></td>
<td width="66.66%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow"><font color="#111111"><strong><br>
Remote Controller Selfie Stick</strong></font> <br>
<br>
Smart Remote Controller features include: Power, Video-Photo, WiFi on/off, Burst mode, Waterproof up to 3 meters.<br>
Folded Length (mm): 280 ; Extended Length (mm):900<br>
<br>
<table><br>
</table>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 40px 10px;width: 100%;font-size: 12px; font-family: sans-serif; mso-height-rule: exactly; line-height:18px; text-align: center; color: #888888;"><webversion style="color:#cccccc; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion>
<br>
<br>
SIA AVEX<br>
Katlakalna iela 9,Rīga<br>
3. Stāvs<br>
<br>
<br><unsubscribe style="color:#888888; text-decoration:underline;">unsubscribe</unsubscribe></td>
</tr>
</table>
</center></td>
</tr>
</table>
</body>
</html>
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 -->