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 -->
Related
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.
Hoping someone can help me with a small problem I'm having modifying the code for an email template.
The template contains <td>'s that when additional copy is added, they center align, but I can't work out how to get them to top align. Like I've shown in the screenshot below:
Hoping someone can help explain the tweak I need to make. Thank you so much!
Code below:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Use the latest (edge) version of IE rendering engine -->
<title>EmailTemplate-Responsive</title>
<!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Please use an inliner tool to convert all CSS to inline as inpage or external CSS is removed by email clients -->
<!-- important in CSS is used to prevent the styles of currently inline CSS from overriding the ones mentioned in media queries when corresponding screen sizes are encountered -->
<!-- CSS Reset -->
<style type="text/css">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html, body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
width: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table, td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode: bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
border-bottom: none !important;
}
/* What it does: Another work-around for iOS meddling in triggered links. */
a[x-apple-data-detectors] {
color: inherit !important;
}
</style>
<!-- Progressive Enhancements -->
<style type="text/css">
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #3eaeef !important;
border-color: #3eaeef !important;
}
/* Media Queries */
#media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
}
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid,
.fluid-centered {
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* And center justify these ones. */
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
</head>
<body bgcolor="#e0e0e0" width="100%" style="margin: 0;" yahoo="yahoo">
<table bgcolor="#e0e0e0" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse;">
<tr>
<td><center style="width: 100%;">
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> (Optional) This text will appear in the inbox preview, but not the email body. </div>
<!-- Visually Hidden Preheader Text : END -->
<!-- Email Header : BEGIN -->
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 20px 0; text-align: center"><img src="https://www.nineforbrands.com.au/wp-content/uploads/2019/12/NineLogo_2D.png" width="200" height="50" alt="Nine-Logo" border="0"></td>
</tr>
</table>
<!-- Email Header : END -->
<!-- Email Body : BEGIN -->
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container">
<!-- Hero Image, Flush : BEGIN -->
<tr>
<td class="full-width-image"><img src="https://www.nineforbrands.com.au/wp-content/uploads/2019/12/9Galaxy_New-TemplateHeader.jpg" width="600" alt="Jordan-Hooper" border="0" align="center" style="width: 100%; max-width: 600px; height: auto;"></td>
</tr>
<!-- Hero Image, Flush : END -->
<!-- 1 Column Text : BEGIN -->
<tr>
<td style="padding: 40px; text-align: center; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555;">
<span style="color: #3697e9; font-size: 25px;"><strong>Nine Galaxy 101<br /></strong></span>
<br>
At Nine we have made TV buying easier with the most advanced buying platform, 9Galaxy. 2019 saw the launch of dynamic audience delivery across all screens, allowing media buyers to buy Nine’s linear TV and broadcast video on demand inventory in one simple transaction.
Wavemaker’s Senior Client Manager, Jordan Hooper, speaks about the benefits of 9Galaxy, saying that it provides speed, accuracy and consistency for their clients, and delivers on audience and reach goals.
To learn more, click below.
<br>
<br>
<!-- Button : Begin -->
<table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">
<tr>
<td style="border-radius: 40px; background: #008fe1; text-align: center;" class="button-td"><a href="http://www.google.com" style="background: #008fe1; border: 15px solid #008fe1; padding: 0 10px;color: #ffffff; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 30px; font-weight: bold;" class="button-a">
<!--[if mso]> <![endif]-->View Video<!--[if mso]> <![endif]-->
</a></td>
</tr>
</table>
<!-- Button : END --></td>
</tr>
<!-- Two Even Columns : BEGIN -->
<tr>
<td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_270x270.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
2020 promises to be a revolutionary year for television with the launch of VOZ or Virtual Australia, the new measurement platform coming in February next year. <br><br> Agencies and TV executives both see this new system giving clients a better understanding of how audiences are shifting and, while they may not be watching the traditional TV screen as much, they are still engaging with the content across multiple devices.<br><br> AdNews asked some of TV's senior executives for their predictions on what 2020 will look like. <br><br>Nine’s Richard Hunwick suggest “My call is that 2020 will be the year ‘Total Television’ comes into its own, as Brand returns to fashion and VOZ allows real and robust cross platform measurement between Linear TV and BVOD.<br><br>
Read more here.<br>
sdfasdfasdf asdfa sd asd fasdf
asd fasdf asdf asd fasd f
as dfasdf asdfasdfa</td>
</tr>
</table></td>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0" >
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_270x270.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
Australia’s favourite social experiment is returning to our screens in 2020 and the search for love will again captivate hearts and minds across the country. As we meet a new group of singles this ratings juggernaut promises to reach new heights, all in the name of love.<br><br> For the second year in a row Married at First Sight was Australia’s No. 1 non-sports program of 2019. MAFS securing a national linear broadcast average audience of 1.948 million viewers per episode (Metro: 1.457 million / Regional: 491,000). The finale attracted a national linear broadcast average audience of 2.798 million viewers (Metro: 2.110 million / Regional: 688,000).<br><br> For a sneak peek at our new MAFS couples, click here. <br><br>Married at First Sight returning to Channel 9 and 9Now in 2020.
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Two Even Columns : END -->
<!-- Three Even Columns : BEGIN -->
<tr>
<td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_270x270.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td>
</tr>
</table></td>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td>
</tr>
</table></td>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. per conubia nostra, per inceptos himenaeos. </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Three Even Columns : END -->
<!-- Thumbnail Left, Text Right : BEGIN -->
<tr>
<td dir="ltr" align="center" valign="top" width="100%" style="padding: 10px;"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" alt="alt_text" border="0" class="center-on-narrow"></td>
</tr>
</table></td>
<td width="66.66%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow"><strong style="color:#111111;">Class aptent taciti sociosqu</strong> <br>
<br>
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <br>
<br>
<!-- Button : Begin -->
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td"><a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; padding: 0 10px;color: #ffffff; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<!--[if mso]> <![endif]-->A Button<!--[if mso]> <![endif]-->
</a></td>
</tr>
</table>
<!-- Button : END --></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Thumbnail Left, Text Right : END -->
<!-- Thumbnail Right, Text Left : BEGIN -->
<tr>
<td dir="rtl" align="center" valign="top" width="100%" style="padding: 10px;"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" alt="alt_text" border="0" class="center-on-narrow"></td>
</tr>
</table></td>
<td width="66.66%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow"><strong style="color:#111111;">Class aptent taciti sociosqu</strong> <br>
<br>
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <br>
<br>
<!-- Button : Begin -->
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td"><a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; padding: 0 10px;color: #ffffff; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<!--[if mso]> <![endif]-->A Button<!--[if mso]> <![endif]-->
</a></td>
</tr>
</table>
<!-- Button : END --></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Thumbnail Right, Text Left : END -->
</table>
<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 40px 10px;width: 100%;font-size: 12px; font-family: sans-serif; mso-height-rule: exactly; line-height:18px; text-align: center; color: #888888;">
<span class="mobile-link--footer"> Source: Text Here.</span> <br>
<br>
<a style="text-decoration: underline; color: #34a2fb;" href="https://www.nineforbrands.com.au/" target="_blank">nineforbrands.com.au</a> <br/> <br/> This email was sent to: <%= recipient.email %> <br/> <br/> <%# include view='UnsubscriptionLink' %>
</td>
</tr>
</table>
<!-- Email Footer : END -->
</center></td>
</tr>
</table>
</body>
</html>
td.stack-column-center{
vertical-align: top;
display: table-cell;
}
add this css to HTML (given)
G'day. You should use display: inherit;
Code below will help your problem;
Also I didin't understand why you using HTML table codes instead of bootstrap or div with class!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Use the latest (edge) version of IE rendering engine -->
<title>EmailTemplate-Responsive</title>
<!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Please use an inliner tool to convert all CSS to inline as inpage or external CSS is removed by email clients -->
<!-- important in CSS is used to prevent the styles of currently inline CSS from overriding the ones mentioned in media queries when corresponding screen sizes are encountered -->
<!-- CSS Reset -->
<style type="text/css">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html, body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
width: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table, td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode: bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
border-bottom: none !important;
}
/* What it does: Another work-around for iOS meddling in triggered links. */
a[x-apple-data-detectors] {
color: inherit !important;
}
</style>
<!-- Progressive Enhancements -->
<style type="text/css">
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #3eaeef !important;
border-color: #3eaeef !important;
}
/* Media Queries */
#media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
}
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid,
.fluid-centered {
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* And center justify these ones. */
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
</head>
<body bgcolor="#e0e0e0" width="100%" style="margin: 0;" yahoo="yahoo">
<table bgcolor="#e0e0e0" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse;">
<tr>
<td><center style="width: 100%;">
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> (Optional) This text will appear in the inbox preview, but not the email body. </div>
<!-- Visually Hidden Preheader Text : END -->
<!-- Email Header : BEGIN -->
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 20px 0; text-align: center"><img src="https://www.nineforbrands.com.au/wp-content/uploads/2019/12/NineLogo_2D.png" width="200" height="50" alt="Nine-Logo" border="0"></td>
</tr>
</table>
<!-- Email Header : END -->
<!-- Email Body : BEGIN -->
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container">
<!-- Hero Image, Flush : BEGIN -->
<tr>
<td class="full-width-image"><img src="https://www.nineforbrands.com.au/wp-content/uploads/2019/12/9Galaxy_New-TemplateHeader.jpg" width="600" alt="Jordan-Hooper" border="0" align="center" style="width: 100%; max-width: 600px; height: auto;"></td>
</tr>
<!-- Hero Image, Flush : END -->
<!-- 1 Column Text : BEGIN -->
<tr>
<td style="padding: 40px; text-align: center; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555;">
<span style="color: #3697e9; font-size: 25px;"><strong>Nine Galaxy 101<br /></strong></span>
<br>
At Nine we have made TV buying easier with the most advanced buying platform, 9Galaxy. 2019 saw the launch of dynamic audience delivery across all screens, allowing media buyers to buy Nine’s linear TV and broadcast video on demand inventory in one simple transaction.
Wavemaker’s Senior Client Manager, Jordan Hooper, speaks about the benefits of 9Galaxy, saying that it provides speed, accuracy and consistency for their clients, and delivers on audience and reach goals.
To learn more, click below.
<br>
<br>
<!-- Button : Begin -->
<table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">
<tr>
<td style="border-radius: 40px; background: #008fe1; text-align: center;" class="button-td"><a href="http://www.google.com" style="background: #008fe1; border: 15px solid #008fe1; padding: 0 10px;color: #ffffff; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 30px; font-weight: bold;" class="button-a">
<!--[if mso]> <![endif]-->View Video<!--[if mso]> <![endif]-->
</a></td>
</tr>
</table>
<!-- Button : END --></td>
</tr>
<!-- Two Even Columns : BEGIN -->
<tr>
<td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_270x270.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
2020 promises to be a revolutionary year for television with the launch of VOZ or Virtual Australia, the new measurement platform coming in February next year. <br><br> Agencies and TV executives both see this new system giving clients a better understanding of how audiences are shifting and, while they may not be watching the traditional TV screen as much, they are still engaging with the content across multiple devices.<br><br> AdNews asked some of TV's senior executives for their predictions on what 2020 will look like. <br><br>Nine’s Richard Hunwick suggest “My call is that 2020 will be the year ‘Total Television’ comes into its own, as Brand returns to fashion and VOZ allows real and robust cross platform measurement between Linear TV and BVOD.<br><br>
Read more here.<br>
sdfasdfasdf asdfa sd asd fasdf
asd fasdf asdf asd fasd f
as dfasdf asdfasdfa</td>
</tr>
</table></td>
<td class="stack-column-center" style="display:inherit;"><table cellspacing="0" cellpadding="0" border="0" >
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_270x270.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
Australia’s favourite social experiment is returning to our screens in 2020 and the search for love will again captivate hearts and minds across the country. As we meet a new group of singles this ratings juggernaut promises to reach new heights, all in the name of love.<br><br> For the second year in a row Married at First Sight was Australia’s No. 1 non-sports program of 2019. MAFS securing a national linear broadcast average audience of 1.948 million viewers per episode (Metro: 1.457 million / Regional: 491,000). The finale attracted a national linear broadcast average audience of 2.798 million viewers (Metro: 2.110 million / Regional: 688,000).<br><br> For a sneak peek at our new MAFS couples, click here. <br><br>Married at First Sight returning to Channel 9 and 9Now in 2020.
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Two Even Columns : END -->
<!-- Three Even Columns : BEGIN -->
<tr>
<td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_270x270.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td>
</tr>
</table></td>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td>
</tr>
</table></td>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. per conubia nostra, per inceptos himenaeos. </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Three Even Columns : END -->
<!-- Thumbnail Left, Text Right : BEGIN -->
<tr>
<td dir="ltr" align="center" valign="top" width="100%" style="padding: 10px;"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" alt="alt_text" border="0" class="center-on-narrow"></td>
</tr>
</table></td>
<td width="66.66%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow"><strong style="color:#111111;">Class aptent taciti sociosqu</strong> <br>
<br>
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <br>
<br>
<!-- Button : Begin -->
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td"><a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; padding: 0 10px;color: #ffffff; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<!--[if mso]> <![endif]-->A Button<!--[if mso]> <![endif]-->
</a></td>
</tr>
</table>
<!-- Button : END --></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Thumbnail Left, Text Right : END -->
<!-- Thumbnail Right, Text Left : BEGIN -->
<tr>
<td dir="rtl" align="center" valign="top" width="100%" style="padding: 10px;"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;"><img src="../../2020/00 - Email Templates/1 - Dreamweaver Responsive/2 - Dreamweaver/images/Image_170x170.png" width="170" alt="alt_text" border="0" class="center-on-narrow"></td>
</tr>
</table></td>
<td width="66.66%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow"><strong style="color:#111111;">Class aptent taciti sociosqu</strong> <br>
<br>
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <br>
<br>
<!-- Button : Begin -->
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td"><a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; padding: 0 10px;color: #ffffff; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<!--[if mso]> <![endif]-->A Button<!--[if mso]> <![endif]-->
</a></td>
</tr>
</table>
<!-- Button : END --></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- Thumbnail Right, Text Left : END -->
</table>
<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 40px 10px;width: 100%;font-size: 12px; font-family: sans-serif; mso-height-rule: exactly; line-height:18px; text-align: center; color: #888888;">
<span class="mobile-link--footer"> Source: Text Here.</span> <br>
<br>
<a style="text-decoration: underline; color: #34a2fb;" href="https://www.nineforbrands.com.au/" target="_blank">nineforbrands.com.au</a> <br/> <br/> This email was sent to: <%= recipient.email %> <br/> <br/> <%# include view='UnsubscriptionLink' %>
</td>
</tr>
</table>
<!-- Email Footer : END -->
</center></td>
</tr>
</table>
</body>
</html>
html css email inline
shareeditflag
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 have made an email signature for a client which works perfectly on everything except Gmail. When I try to use the signature in Gmail it somehow centers it. This is only on the browser version. When I view the signature in the mail app on the iPhone it looks good. When I send the signature to Gmail from, for example, Outlook it looks good too. A screenshot of the problem: click .
I have no idea why this happens so I hope someone here has the answer for me. My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3-column layout</title>
</head>
<style type="text/css">
/* Client-specific Styles */
#outlook a {
padding: 0;
} /* Force Outlook to provide a "view in browser" menu link. */
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.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. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
#backgroundTable {
margin: 0;
padding: 0;
width: 100% !important;
line-height: 100% !important;
}
img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
.image_fix {
display: block;
}
p {
margin: 0px 0px !important;
}
table td {
border-collapse: collapse;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/*##############################################*/
/*IPHONE STYLES*/
/*##############################################*/
#media only screen and (max-width: 480px) {
table {
position: relative;
}
table[class="fluid-table"], td[class="fluid-cell"]{
width: 100% !important;
padding: 0 20px 0 20px!important;
}
}
</style>
<body style="padding:0; margin:0">
<!--
/*##############################################*/
3 column
/*##############################################*/
-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td align="left" style="display:block; border:none; outline:none; text-decoration:none; color:#000; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<span style="text-align: left; color: #9C1C27;font-size: 14px; font-weight: bold">Voornaam en Achternaam</span><br>
<span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #B5987F; font-weight: normal; font-style:italic; font-size: 12px;">Functie titel</span><br>
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 7px; padding-bottom: 10px; padding-right: 0px; width:100%; height:100%;">
<img src="http://www.deleeuwhides.com/img/logo.png" nosend="1" border="0" style="width:179px; height:111px;" alt="De Leeuw Hides logo" title="De Leeuw Hides logo">
</td>
</tr>
</tbody>
</table>
<div class="block">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="left">
<tr>
<td><table cellpadding="0" cellspacing="0" border="0" width="600" align="left" class="fluid-table">
<tr>
<!-- Start of first column -->
<td><table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" align="left" style=" border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<strong style="color:#9C1C27;">Location Nijmegen</strong><br>
Lindenhoutseweg 69<br>
6545 AH Nijmegen <br>
The Netherlands
</td>
</tr>
</tbody>
</table>
<!-- End of first column -->
<!--[if mso]></td><td valign="top"><![endif]-->
<!-- Start of second column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" align="left" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<strong style="color:#9C1C27;">Location Winterswijk</strong><br>
Industrieweg 2a<br>
7102 DZ Winterswijk<br>
The Netherlands
</td>
</tr>
</tbody>
</table>
<!-- End of second column -->
<!--[if mso]></td><td valign="top"><![endif]-->
<!-- Start of third column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" align="left" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<font>T:</font> 0031-024-3775233 <br>
F: 0031-024-3779316 <br>
<a style="text-decoration:none; color:#9C1C27;" href="mailto:sales#deleeuwhides.nl">sales#deleeuwhides.nl</a><br>
<a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com">www.deleeuwhides.com</a>
</td>
</tr>
</tbody>
</table>
<!-- End of third column --></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="left" style="margin-top:5px; margin-bottom:3px;" class="fluid-table">
<tr>
<td style="padding: 0 0 2px 0; height:1px; width:100%; background-color:#B5987F;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="left" class="fluid-table">
<tr>
<td valign="top"bgcolor="#9C1C27" style="height:30px; width:100%; background-color:#9C1C27;"><img style="display:block; margin:auto; padding:8px 0 0 0;" src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
Thanks in advance!
Somehow I fixed this by starting to build the code line for line in a new .html document. Testing it every time in Gmail until the centering would occur again, but it never did. So now it is working like it should!
Have you tried float left in your outer table which has a class of fluid-table?
If that doesn't fix it, give the below a shot and let me know if it works.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width:100%; max-width:600px;">[signature content here]</td>
<td> </td>
</tr>
</tbody>
</table>
I have created a table with two columns, first column has max width of 600px and the second doesn't have a width. Place all the content into the first column. I have placed the style inline, you can move it to a class if you want to.
Cheers
I had the same issue and solved it by applying "margin:0 !important" to the signature main container.
I am working on an email template and am having three issues I cannot seem to figure out.
Image at top is being stretched.
Email is not responsive in Gmail App (landscape)
Left aligned text is correct in larger screens, but off centered in mobile screens. (Need to disable added margin in mobile screens)
Here is the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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 iOS meddling in triggered links. */
.mobile-link--footer a,
a[x-apple-data-detectors] {
color:inherit !important;
text-decoration: underline !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !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;
}
}
</style>
</head>
<body width="100%" bgcolor="#f1f1f1" style="margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #f1f1f1;">
<!--
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;">
<!--[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 bgcolor="#222944" style="padding: 20px 0; text-align: center">
<img src="http://revrails-production.s3.amazonaws.com/marketing/emails/template/RevolutionPrep_Logo.png" width="200" height="50" alt="alt_text" border="0" style="height: auto; background: #222944; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
</td>
</tr>
</table>
<!-- Email Header : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td height="15" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
<!-- Email Body : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="vero-editable" style="padding: 40px 40px 0px 40px; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: 15px; line-height: 24px; color: black;">
<h1 style="color: black; font-size: 24px; font-weight: normal;letter-spacing: 1px; padding-bottom: 0px; line-height: 30px;">Thank you <nobr>for getting in</nobr> touch!</h1>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
<!-- 3 Even Columns : BEGIN -->
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding: 20px;">
<img src="http://revrails-production.s3.amazonaws.com/marketing/emails/template/email_envelope.png" width="170" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 170px; height: auto; background: #fff;">
</td>
</tr>
<!-- 3 Even Columns : END -->
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="vero-editable" bgcolor="#ffffff" style="padding: 0px 40px 40px 40px; text-align: left; font-family: Verdana, Arial, sans-serif; font-size: 15px; line-height: 24px; color: black;">
<p>
We have received your message and would like to thank you for writing to us. If your inquiry is urgent, please use the telephone number listed below, to talk to one of our staff members. In the meantime, you can check the FAQ section, look over advice and planning that we offer for free or browse through our latest blog posts click here. Otherwise, we will reply by email shortly.
</p>
<p>
Talk to you soon,
<br>
Revolution Prep Team
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td height="15" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
<!-- 2 Even Columns : BEGIN -->
<tr>
<td bgcolor="#cfd4d8" align="center" height="100%" valign="top" width="100%">
<!--[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; padding: 10px 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" style="padding-left:-30px;" width="660">
<tr>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 25px 10px 0px 30px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px;" class="center-on-narrow">
Revolution Prep
<div style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule:exactly; line-height: 18px; color: #455560;" class="center-on-narrow">
1337 3<sup>rd</sup> Street Promenade, <nobr>2<sup>nd</sup> Floor</nobr>
<br>
Santa Monica, CA 90401<br>
revolutionprep.com
</div>
<br>
<div style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px;" class="center-on-narrow">
Need help?
<div style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule:exactly; line-height: 18px; color: #455560;" class="center-on-narrow">
Call us at <strong>(877) 738-7737</strong> or
<br>
Email us with any questions.
</div>
<br>
<div style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px; padding-bottom: 8px;" class="center-on-narrow">
Follow us
</div>
<img src="http://assets.getvero.com/emails/templates/welcome/tw.png" style="padding-right: 5px" alt="Twitter" height="27px" width="26px">
<img src="http://assets.getvero.com/emails/templates/welcome/fb.png" alt="Facebook" height="27px" width="26px">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 25px 10px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule: exactly; line-height: 14px; color: #555555; text-align: left;" class="center-on-narrow">
<div style="font-size:13px; margin-bottom:20px;">About Revolution</div>
<div style="font-size:13px; margin-bottom:20px;">How We Work</div>
<div style="font-size:13px; margin-bottom:20px;">Subjects we Tutor</div>
<div style="font-size:13px; margin-bottom:20px;">Success Stories</div>
<div style="font-size:13px; margin-bottom:20px;">Advice and Planning</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- 2 Even Columns : END -->
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#fd8204">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 20px; font-size: 12px; font-family: Verdana, Arial, sans-serif; letter-spacing: 1px; line-height: 20px;text-align: center; color: white;">
<nobr>BETTER GRADES.</nobr> <nobr>HIGHER TEST SCORES.</nobr> <nobr>GREATER CONFIDENCE.</nobr>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : BEGIN -->
</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: 20px 10px;width: 100%;font-size: 12px; font-family: sans-serif; line-height:18px; text-align: center; color: #888888;">
<a style="color:#888888; text-decoration:underline;" href="{{url.unsubscribe_link}}">Click here to unsubscribe
</a>
</td>
</tr>
</table>
<!-- Email Footer : END -->
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
Mobile left-align bug -
Outlook left-align bug -
Mobile Gmail App header stretched and white space to right (non-responsive) -
For the left-align bug, I think you do it little bit wrong. Try this.
<td style="padding: 20px 10px 0px 30px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule: exactly; line-height: 14px; color: #555555; text-align: left;" class="center-on-narrow">
<div style="font-size:13px; margin-bottom:20px;">About Revolution</div>
<div style="font-size:13px; margin-bottom:20px;">How We Work</div>
<div style="font-size:13px; margin-bottom:20px;">Subjects we Tutor</div>
<div style="font-size:13px; margin-bottom:20px;">Success Stories</div>
<div style="font-size:13px; margin-bottom:20px;">Advice and Planning</div>
</td>
</tr>
</table>
</td>
I just modify the padding. Hope it will help. I can't help you for your first issue, because I had checked and run your code at jsfiddle, nothing wrong with the image issue that you said :/
For the image stretching part, have you tried removing the font-size and line-height on the image? Since it is an image it really doesn't need it. Gmail App adds weird font-sizes sometimes so that may be the cause.
I agree with the other answer above on the misaligned mobile stuff. You have different padding on each column. See column one you have padding: 25px 10px 0px 30px;
For the top image, you need to add 'height' (height=170, style=height:170px) like this;
<img src='http://revrails-production.s3.amazonaws.com/marketing/emails/template/email_envelope.png' width='170' height='170' border='0' alt='' class='center-on-narrow' style='width: 100%; max-width: 170px; height: auto; max-height:170px; background: #fff;'>
I've tested all browser in Litmus, they are all good.
For Gmail App(Android), you need to add 'hack' code below body tag. And you need to add style for 'gmailfix' class like this in the style tag. After adding this code, Grail app renders like desktop version.
...
<style>
.gmailfix {display:none;display:none!important;}
</style>
...
...
<body width="100%" bgcolor="#f1f1f1" style="margin: 0; mso-line-height-rule: exactly;">
<!-- below is hack for gmail app -->
<div class="gmailfix" style="white-space:nowrap; font:15px courier; line-height:0;">
</div>
...
...
Here is all code that I have fixed. You can copy this code and test in Litmus. I have tested in all email client and eveything looks good.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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 iOS meddling in triggered links. */
.mobile-link--footer a,
a[x-apple-data-detectors] {
color:inherit !important;
text-decoration: underline !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !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;
}
.gmailfix {display:none;display:none!important;}
/* Media Queries */
#media screen and (max-device-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;
}
.mcenter, .mcenter * {text-align: center !important;}
}
</style>
</head>
<body width="100%" bgcolor="#f1f1f1" style="margin: 0; mso-line-height-rule: exactly;">
<div class="gmailfix" style="white-space:nowrap; font:15px courier; line-height:0;">
</div>
<center style="width: 100%; background: #f1f1f1;">
<!--
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;">
<!--[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 bgcolor="#222944" style="padding: 20px 0; text-align: center">
<img src="http://revrails-production.s3.amazonaws.com/marketing/emails/template/RevolutionPrep_Logo.png" width="200" height="50" alt="alt_text" border="0" style="height: auto; background: #222944; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
</td>
</tr>
</table>
<!-- Email Header : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td height="15" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
<!-- Email Body : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="vero-editable" style="padding: 40px 40px 0px 40px; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: 15px; line-height: 24px; color: black;">
<h1 style="color: black; font-size: 24px; font-weight: normal;letter-spacing: 1px; padding-bottom: 0px; line-height: 30px;">Thank you <nobr>for getting in</nobr> touch!</h1>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
<!-- 3 Even Columns : BEGIN -->
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding: 20px;">
<img src="http://revrails-production.s3.amazonaws.com/marketing/emails/template/email_envelope.png" width="170" height="170" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 170px; height: auto; max-height:170px; background: #fff;">
</td>
</tr>
<!-- 3 Even Columns : END -->
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="vero-editable" bgcolor="#ffffff" style="padding: 0px 40px 40px 40px; text-align: left; font-family: Verdana, Arial, sans-serif; font-size: 15px; line-height: 24px; color: black;">
<p>
We have received your message and would like to thank you for writing to us. If your inquiry is urgent, please use the telephone number listed below, to talk to one of our staff members. In the meantime, you can check the FAQ section, look over advice and planning that we offer for free or browse through our latest blog posts click here. Otherwise, we will reply by email shortly.
</p>
<p>
Talk to you soon,
<br>
Revolution Prep Team
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td height="15" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
<!-- 2 Even Columns : BEGIN -->
<tr>
<td bgcolor="#cfd4d8" align="center" height="100%" valign="top" width="100%">
<!--[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; padding: 10px 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" style="padding-left:-30px;" width="660">
<tr>
<td align="left" valign="top" width="330">
<![endif]-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-spacing:0;width:100%;max-width:300px;display:inline-block;vertical-align:top;">
<tr>
<td align="left" style="padding: 25px 10px 0px 30px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px;" class="center-on-narrow">
Revolution Prep
<div style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule:exactly; line-height: 18px; color: #455560;" class="center-on-narrow">
1337 3<sup>rd</sup> Street Promenade, <nobr>2<sup>nd</sup> Floor</nobr>
<br>
Santa Monica, CA 90401<br>
revolutionprep.com
</div>
<br>
<div style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px;" class="center-on-narrow">
Need help?
<div style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule:exactly; line-height: 18px; color: #455560;" class="center-on-narrow">
Call us at <strong>(877) 738-7737</strong> or
<br>
Email us with any questions.
</div>
<br>
<div style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px; padding-bottom: 8px;" class="center-on-narrow">
Follow us
</div>
<img src="http://assets.getvero.com/emails/templates/welcome/tw.png" style="padding-right: 5px" alt="Twitter" height="27px" width="26px">
<img src="http://assets.getvero.com/emails/templates/welcome/fb.png" alt="Facebook" height="27px" width="26px">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td>
<td align="left" valign="top" width="330">
<![endif]-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-spacing:0;width:100%;max-width:190px;display:inline-block;vertical-align:top;">
<tr>
<td align="left" style="padding: 25px 10px 0px 30px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule: exactly; line-height: 14px; color: #555555; text-align: left;" class="center-on-narrow">
<div style="font-size:13px; margin-bottom:20px;">About Revolution</div>
<div style="font-size:13px; margin-bottom:20px;">How We Work</div>
<div style="font-size:13px; margin-bottom:20px;">Subjects we Tutor</div>
<div style="font-size:13px; margin-bottom:20px;">Success Stories</div>
<div style="font-size:13px; margin-bottom:20px;">Advice and Planning</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- 2 Even Columns : END -->
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#fd8204">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 20px; font-size: 12px; font-family: Verdana, Arial, sans-serif; letter-spacing: 1px; line-height: 20px;text-align: center; color: white;">
<nobr>BETTER GRADES.</nobr> <nobr>HIGHER TEST SCORES.</nobr> <nobr>GREATER CONFIDENCE.</nobr>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : BEGIN -->
</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: 20px 10px;width: 100%;font-size: 12px; font-family: sans-serif; line-height:18px; text-align: center; color: #888888;">
<a style="color:#888888; text-decoration:underline;" href="{{url.unsubscribe_link}}">Click here to unsubscribe
</a>
</td>
</tr>
</table>
<!-- Email Footer : END -->
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>