I'm building a really simple template for an HTML email and all is great until you get to Outlook... Outlook seems to ignore all styling with regards to the max-width of the table so it spans the whole width of the email window.
I've tried a couple of things like wrapping the table within a div with a max-width but it just get's ignored.
The code is below, can anyone spot what's causing the problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Oppss, Hello</title>
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
font-family: Calibri, 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.6em;
margin: 0;
padding: 0;
}
img {
max-width: 600px;
width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
height: 100%;
-webkit-text-size-adjust: none;
width: 100% !important;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #348eda;
}
.btn-primary {
margin-bottom: 10px;
width: auto !important;
}
.btn-primary td {
background-color: #348eda;
border-radius: 25px;
font-family: Calibri, 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 14px;
text-align: center;
vertical-align: top;
}
.btn-primary td a {
background-color: #348eda;
border: solid 1px #348eda;
border-radius: 25px;
border-width: 10px 20px;
display: inline-block;
color: #ffffff;
cursor: pointer;
font-weight: bold;
line-height: 2;
text-decoration: none;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
padding: 20px;
width: 100%;
}
table.body-wrap .container {
border: 1px solid #f0f0f0;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
clear: both !important;
width: 100%;
}
.footer-wrap .container p {
color: #666666;
font-size: 12px;
}
table.footer-wrap a {
color: #999999;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3 {
color: #e6007e;
font-family: Calibri, 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 200;
line-height: 1.2em;
margin: 10px 0 10px;
}
h1 {
font-size: 74px;
padding: 0px 20px 0px 20px;
letter-spacing: -5px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
h3 {
font-size: 22px;
font-style: italic;
}
h4 {
font-size: 15px;
line-height: 21px;
font-style: italic;
margin: 0 0 20px 0;
color: #53565a;
padding: 0 20px 0 40px;
font-weight: 600;
font-family: Georgia, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
p,
ul,
ol {
font-size: 14px;
font-weight: normal;
margin-bottom: 10px;
color: #53565a;
padding: 0 20px 0 40px;
font-family: Calibri, 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
ul li,
ol li {
margin-left: 5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
clear: both !important;
display: block !important;
Margin: 0 auto !important;
max-width: 600px !important;
}
.rounded-wrapper {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
background-color: #fff;
}
/* Set the padding on the td rather than the div for Outlook compatibility */
.body-wrap .container {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
background-color: #fff;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
display: block;
margin: 0 auto;
max-width: 600px;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<div style="width: 600px !important; margin: 0 auto;">
<!-- body -->
<table class="body-wrap" bgcolor="#f6f6f6" width="600" style="max-width: 600px !important; margin: 0 auto;">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF" style="border: 20px solid #009fe3">
<div class="rounded-wrapper">
<!-- content -->
<div class="content">
<img src="header.jpg" editable="true" width="560">
<table>
<tr>
<td>
<h1><img src="hello.jpg" style="width: 204px;"></h1>
<h4>Lorem</h4>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p style="padding: 10px 20px 0 20px !important"><img src="apply-now.jpg" style="width: 121px;"></p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</div>
</td>
<td></td>
</tr>
</table>
<!-- /body -->
<!-- footer -->
<table class="footer-wrap" width="600" style="max-width: 600px !important; margin: 0 auto;">
<tr>
<td></td>
<td class="container">
<!-- content -->
<div class="content">
<table>
<tr>
<td align="center">
<p><unsubscribe>Unsubscribe</unsubscribe>.
</p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</td>
<td></td>
</tr>
</table>
<!-- /footer -->
</div>
</body>
</html>
Outlook ignores max-width, you should wrap the email <table> with if microsoft outlook tags (mso).
<!--[if mso]>
<center><table><tr><td width="600">
<![endif]-->
<!-- MAIN EMAIL BODY -->
<table class="body-wrap" bgcolor="#f6f6f6" width="600" style="max-width: 600px !important; margin: 0 auto;">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF" style="border: 20px solid #009fe3">
<div class="rounded-wrapper">
<!-- content -->
<div class="content">
<img src="header.jpg" editable="true" width="560">
<table>
<tr>
<td>
<h1><img src="hello.jpg" style="width: 204px;"></h1>
<h4>Lorem</h4>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p style="padding: 10px 20px 0 20px !important">
<a href="#" target="_blank" editable="true">
<img src="apply-now.jpg" style="width: 121px;">
</a>
</p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</div>
</td>
<td></td>
</tr>
</table>
<!-- /body -->
<!-- footer -->
<table class="footer-wrap" width="600" style="max-width: 600px !important; margin: 0 auto;">
<tr>
<td></td>
<td class="container">
<!-- content -->
<div class="content">
<table>
<tr>
<td align="center">
<p>
<unsubscribe>Unsubscribe</unsubscribe>.
</p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</td>
<td></td>
</tr>
</table>
<!-- END / MAIN EMAIL BODY -->
<!--[if mso]>
</td></tr></table></center>
<![endif]-->
I had the same issues here but got it solved when i wrote my CSS inline.
Try to write all your CSS inline.
Related
I'm working on an HTML email and I'm running into a few blockers. I can't figure out how to center the image header or how to change the opacity of the background image.
I've tried multiple different class movements and dabbled with the CSS but to no success. I've attached a mockup of how it should look (the height should be desktop height)
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>NASCAR Fan Email</title>
<style>
#media only screen and (max-width: 620px) {
table.body h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table.body p,
table.body ul,
table.body ol,
table.body td,
table.body span,
table.body a {
font-size: 16px !important;
}
table.body .wrapper,
table.body .article {
padding: 10px !important;
}
table.body .content {
padding: 0 !important;
}
table.body .container {
padding: 0 !important;
width: 100% !important;
}
table.body .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table.body .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body style=" font-family: sans-serif; -webkit-font-smoothing: antialiased; line-height: 2.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<span class="imageheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">This
is preheader text. Some clients will show this text as a preview.</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%" bgcolor="#f6f6f6">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 800px; padding: 10px; width: 800px; margin: 0 auto;" width="800" valign="top">
<div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 800px; padding: 10px;">
<!-- START CENTERED WHITE CONTAINER -->
<table style="background-image: url('https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NFC_Horiz_BlackRGB.png'); width: 100%; background-repeat: no-repeat; padding: 50px 0px 50px 0px; border-bottom: 10px solid red;" width="100%">
<table role="presentation" class="main" style="background-image: url('https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NASCAR_FanCouncil_DaytonaFanPhoto_1-1.jpg'); width: 100%; background-repeat: no-repeat; padding: 60px;" width="100%">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
Hello,</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
We’d like to invite you to participate in a short survey about this past weekend’s races. This survey should take less than 5 minutes and will be open through Wednesday, August 25. We want to know what you think!</p>
<p class="targetlink">
<!-- <a class="targetlink" style="font-family: sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 15px; text-transform: uppercase;" href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J">Click here to start</a></p> -->
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
If you are unable to click the link, please copy and past the full URL below into your browser:</p>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%;" width="100%">
<tbody>
<tr>
<td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tbody>
<a class="targetlink" style="font-family: sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 15px; text-transform: uppercase; text-decoration: none;" href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J">Click here to start</a>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
Good luck! Hope it works.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
</tr>
</table>
</body>
</html>
You can't have background images in emails with text on top, here is why:
First of all to center the background you can use (see snippet)
background-position: center center;
and to add opacity you can do things like
opacity:0.5
or
background-color:rgba(0, 0, 0, 0.5)
Although none of the previous will work on a background, you would need to add it as an image and then position it absoulute behinde the text. And here comes the greatest problem.
Emails are a complicated things to code because of compatibilty issues, for instance, your css styles might not work because some email clients are not compatible with <style>, as well as media queries, or even styles like opacity.
It is recommended that all CSS is inline and work strictly with tables, (which you already do, great!). But when it comes to images, images must be as <img/> and not css background, because many email clients will not show the image, and that's why you can't have text on top of them. It is true that you can use position absolute as I said before, but css positining is not compatible with emals.
That's why, see all the promotional emails that you get and none of them uses background images.
Another tip: make sure your html has no errors, or many email clients like gmail will consider it as spam. For instance I noticed that you have a <table> followed by another <table>, when you must have <table><tr></td> or <th> and then another <table> (also don't foget of <tbody> )
I found a great comaptibility gude:
https://www.campaignmonitor.com/css/
Good luck!
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>NASCAR Fan Email</title>
<style>
#media only screen and (max-width: 620px) {
table.body h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table.body p,
table.body ul,
table.body ol,
table.body td,
table.body span,
table.body a {
font-size: 16px !important;
}
table.body .wrapper,
table.body .article {
padding: 10px !important;
}
table.body .content {
padding: 0 !important;
}
table.body .container {
padding: 0 !important;
width: 100% !important;
}
table.body .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table.body .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body style=" font-family: sans-serif; -webkit-font-smoothing: antialiased; line-height: 2.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<span class="imageheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">This
is preheader text. Some clients will show this text as a preview.</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%" bgcolor="#f6f6f6">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 800px; padding: 10px; width: 800px; margin: 0 auto;" width="800" valign="top">
<div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 800px; padding: 10px;">
<!-- START CENTERED WHITE CONTAINER -->
<table style="background-image: url('https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NFC_Horiz_BlackRGB.png'); width: 100%; background-repeat: no-repeat; background-position: center center;padding: 50px 0px 50px 0px; border-bottom: 10px solid red; background-position: center center;" width="100%">
<table role="presentation" class="main" style="background-image: url('https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NASCAR_FanCouncil_DaytonaFanPhoto_1-1.jpg'); width: 100%; background-repeat: no-repeat; padding: 60px;" width="100%">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
Hello,</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
We’d like to invite you to participate in a short survey about this past weekend’s races. This survey should take less than 5 minutes and will be open through Wednesday, August 25. We want to know what you think!</p>
<p class="targetlink">
<!-- <a class="targetlink" style="font-family: sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 15px; text-transform: uppercase;" href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J">Click here to start</a></p> -->
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
If you are unable to click the link, please copy and past the full URL below into your browser:</p>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%;" width="100%">
<tbody>
<tr>
<td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tbody>
<a class="targetlink" style="font-family: sans-serif; font-size: 14px; font-weight: bold; margin: 0; margin-bottom: 15px; text-transform: uppercase; text-decoration: none;" href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J">Click here to start</a>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">
Good luck! Hope it works.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
</tr>
</table>
</body>
</html>
I've used an html email template and modified it but the email is displaying with a large white margin at the top. How to I reduce this? I'm using android mail client to receive mail and, between the head and top of the page (subject bar), there's too much margin (white space. I'd like to bring the whole thing up to the top of the page
/* -------------------------
------------
INLINED WITH
htmlemail.io/inline
----------------------------
--------- */
/* -------------------------
------------
RESPONSIVE AND MOBILE
FRIENDLY STYLES
----------------------------
--------- */
#media only screen and (max- width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img- responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------
------------
PRESERVE THESE STYLES IN THE
HEAD
----------------------------
--------- */
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
<body class="" style="background-color:
#f6f6f6; font-family: sans-
serif; -webkit-font.
smoothing: antialiased;
font-size: 14px; line-
height: 1.4; margin: 0;
padding: 0; -ms-text-size-
adjust: 100%; -webkit-text-s
size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%; background.
color: #f6f6f6;">
<tr>
<td style="font-family:
sans-serif; font-size: 14px;
vertical-align: top;">
</td>
<td class="container" style="font-family: sans-
serif; font-size: 14px;
vertical-align: top;
display: block; Margin: 0
auto; max-width: 580px;
padding: 10px; width:
580px;">
<div class="content" style="box-sizing: border.
box; display: block;
Margin: 0 auto; max-width:
580px; padding: 10px;">
<!-- START CENTERED WHITE
CONTAINER -->
<span class="preheader" style="color: transparent;
display: none; height: 0;
max-height: 0; max-width: 0;
opacity: 0; overflow:
hidden; mso-hide: all;
visibility: hidden; width:
0;">Post an ad today and
start selling your unwanted
items.</span>
<table class="main" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%; background:
#ffffff; border-radius:
3px;">
<!-- START MAIN CONTENT AREA
-->
<tr>
<td class="wrapper" style="font-family: sans-
serif; font-size: 14px;
vertical-align: top; box-
sizing: border-box; padding:
20px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%;">
<tr>
<td style="font-family:
sans-serif; font-size: 14px;
vertical-align: top;">
<p style="font-family: sans-
serif; font-size: 14px;
font-weight: normal; margin:
0; Margin-bottom: 15px;">.
</p>
<p style="font-family: sans-
serif; font-size: 14px;
font-
weight: normal; margin: 0;
Margin-bottom: 15px;">.
<center><img src="http://adsler.co.uk/wp-
content/uploads/2019/
07/Photo_1563667417091.png" alt="Useful alt text" width="300" height="60" border="0" style="border:0;
outline:none; text.
decoration:none;
display:block;"><br><br>.
</center>
Hey there and welcome to Adsler. Just in case you didn't know, you can also post ads for property, jobs, items wanted or for sale, motors, mobile phones and much more. </p>
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
<tbody>
<tr>
<td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;"><br><br>
<center>
<tbody>
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;"> <a href="https://adsler.co.uk" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;"
rel="https://adsler.co.uk noopener noreferrer">Post Today</a> </td>
</tr>
</tbody>
</center>
</table>
</td>
</tr>
</tbody>
</table>
<center>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Just Click the button</p>
</center>
<center>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Happy posting.</p>
</center>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- START FOOTER -->
<div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
<span class="apple-link" style="color: #999999; font-size: 12px; text-align: center;">Adsler.co.uk, 49a-49b Friern Barnet Road.</span>
<br>
.
</td>
</tr>
<tr>
<td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"> </td>
</tr>
</table>
</body>
Example of changes..
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-
family: sans-serif; font-size:
14px; vertical-align: top; box-
sizing: border-box; padding: 0
20px;">
<table border="0" cellpadding="0"
cellspacing="0" style="border.
collapse:
separate; mso-table-lspace: 0pt;
mso-table-rspace: 0pt; width:
100%;">
<tr>
<td style="font-family: sans-serif;
font-size: 14px; vertical-align:
top;">
<center><img
src="http://adsler.co.uk/wp--
content/uploads/2019/07/Ph
oto_1563667417091.png" alt="Useful
alt text" width="300" height="60"
border="0" style="border:0;
outline:none; text-decoration:none;
display:block;"><br><br></center>
Hey there and welcome to Adsler.
Just in case you didn't know, you
can also post ads for property,
jobs, items wanted or for sale,
motors, mobile phones and much
more.
<table border="0" cellpadding="0"
cellspacing="0" class="btn bt
You had a couple empty <p> tags above your header image and the surrounding <td> had a 20px padding.
/* -------------------------
------------
INLINED WITH
htmlemail.io/inline
----------------------------
--------- */
/* -------------------------
------------
RESPONSIVE AND MOBILE
FRIENDLY STYLES
----------------------------
--------- */
#media only screen and (max- width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img- responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------
------------
PRESERVE THESE STYLES IN THE
HEAD
----------------------------
--------- */
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
<body class="" style="background-color:
#f6f6f6; font-family: sans-
serif; -webkit-font.
smoothing: antialiased;
font-size: 14px; line-
height: 1.4; margin: 0;
padding: 0; -ms-text-size-
adjust: 100%; -webkit-text-s
size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%; background.
color: #f6f6f6;">
<tr>
<td style="font-family:
sans-serif; font-size: 14px;
vertical-align: top;">
</td>
<td class="container" style="font-family: sans-
serif; font-size: 14px;
vertical-align: top;
display: block; Margin: 0
auto; max-width: 580px;
padding: 10px; width:
580px;">
<div class="content" style="box-sizing: border.
box; display: block;
Margin: 0 auto; max-width:
580px; padding: 10px;">
<!-- START CENTERED WHITE
CONTAINER -->
<span class="preheader" style="color: transparent;
display: none; height: 0;
max-height: 0; max-width: 0;
opacity: 0; overflow:
hidden; mso-hide: all;
visibility: hidden; width:
0;">Post an ad today and
start selling your unwanted
items.</span>
<table class="main" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%; background:
#ffffff; border-radius:
3px;">
<!-- START MAIN CONTENT AREA
-->
<tr>
<td class="wrapper" style="font-family: sans-
serif; font-size: 14px;
vertical-align: top; box-
sizing: border-box; padding:
0 20px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%;">
<tr>
<td style="font-family:
sans-serif; font-size: 14px;
vertical-align: top;">
<center><img src="http://adsler.co.uk/wp-
content/uploads/2019/
07/Photo_1563667417091.png" alt="Useful alt text" width="300" height="60" border="0" style="border:0;
outline:none; text.
decoration:none;
display:block;"><br><br>.
</center>
<p style="font-family: sans-
serif; font-size: 14px;
font-
weight: normal; margin: 0;
Margin-bottom: 15px;">Hey there and welcome to Adsler. Just in case you didn't know, you can also post ads for property, jobs, items wanted or for sale, motors, mobile phones and much more. </p>
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
<tbody>
<tr>
<td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;"><br><br>
<center>
<tbody>
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;"> <a href="https://adsler.co.uk" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;"
rel="https://adsler.co.uk noopener noreferrer">Post Today</a> </td>
</tr>
</tbody>
</center>
</table>
</td>
</tr>
</tbody>
</table>
<center>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Just Click the button</p>
</center>
<center>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Happy posting.</p>
</center>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- START FOOTER -->
<div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
<span class="apple-link" style="color: #999999; font-size: 12px; text-align: center;">Adsler.co.uk, 49a-49b Friern Barnet Road.</span>
<br>
.
</td>
</tr>
<tr>
<td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"> </td>
</tr>
</table>
</body>
I am creating Email Template and footer is not display proper only on iphone's portrait mode. it is not in 100% width.
This the code and footer is meshed up on iphone's mail..
Please give me solution for this...
https://drive.google.com/open?id=1791KTM_aTog1Os_IpD41CFZLqQKfT7TQ
in this image footer is fine but iphone it only comes with 70% of width.
#media only screen and (max-width: 480px) {
body {
margin: 0 !important;
padding: 0px !important;
border: 10px solid #f0f0f0 !important
}
table.main {
width: 340px !important;
margin: 0 auto
}
table {
display: block !important;
width: 100%
}
table td {
display: block;
width: 100%
}
td {
width: 100% !important;
text-align: left !important;
padding: 10px 0 0 0 !important
}
p {
text-align: left !important
}
h2 {
text-align: left !important
}
h3 {
text-align: left !important
}
h4 {
text-align: left !important
}
table td table td {
display: block;
width: 100%;
padding-left: 0 !important
}
tr td:first-child hr {
display: none
}
table.main_table br {
display: none
}
}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Email Template</title>
<body style="background-color: #f0f0f0; font-family: Arial, Helvetica, sans-serif; padding-top: 20px; padding-bottom:20px;">
<table align="center" border="0" cellpadding="0" cellspacing="20" width="600" class="main" style="font-family: Arial, Helvetica, sans-serif; padding: 0;background:#fff;">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="margin-bottom: 15px; border-bottom: 1px solid #ccc; padding-bottom: 12px; font-family: Arial, Helvetica, sans-serif;">
<tr>
<td rowspan="2" style="width: 220px;"><img src="https://www.trimarkpremier.com/images/email/trimarkLogo.jpg"></td>
<td align="right" style="padding-top: 10px; color: #A9273D; font-size: 11px; font-family: 'open sans light', sans-serif;"> About Us | Interactive Catalog | Insights & Resources | Contact Us</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style=" font-family: 'Open Sans', sans serif; background:#fff;">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="color: #A9273D; font-family: 'Open Sans', sans serif; background:#fff;">
<tr>
<td align="center" style="text-align: center !important; border-top: 1px solid #ccc; padding-top:15px;">
<p style="text-align: center !important;">
<img src="http://trimarkpremier.com/images/email/footer_logo.png" style="text-align: center; margin: 0;">
</p>
www.trimarkpremier.com | info#trimarkpremier.com
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
My page is centered horizontally and vertically, the page works in all browsers but for IE the page works only in IE11 (Latest). In IE 10, 9 and 8 the table is vertical aligned at the top of the page. How can I make the vertical align work in IE 10,9 and 8, what do I need to change?
Html
<body>
<div class="container">
<div class="content">
<table width="350px">
<tr>
<td>
<img border='0' src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Information_example_page2_300px.jpg' width='300' height='300' style="margin:25px 25px 50px 25px;">
</td>
</tr>
<tr>
<td align="center">
<p style="margin: 0px 0px 50px 0px;">Street<br>
0000AA City
</p>
</td>
</tr>
<tr>
<td align="center" class="contact">
<p style="margin: 0px 0px 50px 0px;">
<span style="color:#DDB4A4;">T</span> 000000<br>
<span style="color:#DDB4A4;">E</span> info#info.nl<br>
</p>
</td>
</tr>
<tr>
<td align="center">
<p style="color:#999999; margin: 0px 0px 25px 0px; font-size: 16px;">Text</p>
</td>
</tr>
</table>
</div>
</div>
<body>
Css
html, body
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table;
}
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
display: inline-block;
text-align: left;
}
table {
font-size:18px;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #4D4D4D;
}
.contact a:link
{
color: #4D4D4D;
text-decoration: none;
}
.contact a:hover
{
color: #1a0dab;
text-decoration: underline;
}
JSFiddle: https://jsfiddle.net/64ys7j6n/
Older IEs can't handle display:table for both html and body very well. Besides, it's not needed.
Solution: don't assign display:table to html, only to body. The html only needs height:100%.
html {
height:100%;
}
body
{
margin: 0;
width: 100%;
height: 100%;
display: table;
}
New fiddle
Excuse my newbie coding because it's a Frankenstein mix of hundreds of email layouts, but can someone tell me why my table layout is not displaying the columned tables side-by-side?
It's the two td elements with the class name container-small at 50% width that won't position side-by-side. I'm not using float or divs.
Is it because they're separate tables when they should be part of the same td? Please feel free to make other amendments/suggestions so I can improve my layout. The left column must be 283px exactly, but the right column can be 100% fluid. That's really the only requirement.
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<style type="text/css">
#media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
#body {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
#body {
width: 100% !important;
}
.container {
display: block !important;
width: 100% !important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 480px !important;
width: 100% !important;
}
.column-image {
height:auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100% !important;
font-weight: normal;
line-height: 125% !important;
}
}
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important;
clear: both!important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 600px !important;
width: 100% !important;
}
.column-image {
height: auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table {
width: 100%;
}
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 125%;
}
img {
-ms-interpolation-mode: bicubic;
}
a {
color: #EC6129;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
line-height: 125%;
text-decoration: none;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
.service-text {
text-align: center;
}
.service-text p {
text-align: left
}
.last {
margin-bottom: 0px;
}
.first {
margin-top: 0px;
}
body, .body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100% !important;
height: 100%;
display: block;
max-width: 600px;
margin: 0 auto;
margin-top: 20px;
background-color: #999999;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
line-height: 125%;
}
h1, h2, h3 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
line-height: 125%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h1 {
font-size: 1.8em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 1.5em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h3 {
font-size: 1.2em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 1.0em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
ul li, ol li {
list-style-position: inside;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}
.large-button {
color: #FFFFFF;
background-color: #666666;
border: none;
border-bottom: 1px solid #666666;
line-height: 125%;
display: inline-block;
width: 100%;
margin: 0 auto;
position: relative;
font-style: normal;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
</style>
</head>
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 0px solid #999999;">
<tr>
<td class="container" align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="content" align="center" valign="top" width="100%">
<center><img src="https://www.vpcode.com/vfeimages/uploads/email/PureStorage_Email_Banner.png" alt="Pure Storage" style="height: auto !important; width: 100% !important;" class="header-image"/></center>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<img src="https://www.vpcode.com/vfeimages/uploads/email/Vivint_Virtual_Card.png" alt="Vivint Card" align="left" width="283" style="max-width: 283px;" class="column-image" />
</td>
</tr>
<tr>
<td class="content" align="left" valign="top">
<p>Lorem ipsum dolor sit amet.</p>
</td>
</tr>
</table>
</td>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<p>Dear #FirstName#,</p>
<p>Congratulations! $#DollarAmount# in reward money is available to load onto your Visa Prepaid Card! To accept your funding, simply click on the button below. Be sure to have your card handy.</p>
<p><b>Reference Code:</b> #Promocode#</p>
<p>#EmailMessage#</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; max-width: 600px; border-collapse: separate; border-radius: 2em;">
<tr>
<td class="large-button" align="center" valign="middle" width="100%" style="color: #FFFFFF; font-family: Arial; font-size: 100%; font-weight: bold; line-height: 125%; padding: 10px; text-align: center;">
<center>Click Here to Access Your Reward</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" align="left" valign="top" width="100%">
<p>If you do not yet have a card, please hold onto this email. You will receive your card shortly and can accept your reward at that time.</p>
<p>If you need help, email service#prepaidcodecenter.com or call Cardholder Services at 1-877-325-8444 during standard business hours.</p>
</td>
</tr>
<tr>
<td class="content" align="center" valign="top" width="100%">
<center><p>Program issued by The Bancorp Bank, Member FDIC, pursuant to a license from Visa U.S.A. Inc.</p></center>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
</html>
the problem is here:
.container-small {
display: block !important;
width: 100% !important;
}
just remove this two properties above.
Snippet below:
#media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
#body {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
#body {
width: 100% !important;
}
.container {
display: block !important;
width: 100% !important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 480px !important;
width: 100% !important;
}
.column-image {
height:auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100% !important;
font-weight: normal;
line-height: 125% !important;
}
}
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important;
clear: both!important;
}
/* REMOVE HERE
.container-small {
display: block !important;
width: 100% !important;
}
*/
.header-image {
height: auto !important;
max-width: 600px !important;
width: 100% !important;
}
.column-image {
height: auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table {
width: 100%;
}
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 125%;
}
img {
-ms-interpolation-mode: bicubic;
}
a {
color: #EC6129;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
line-height: 125%;
text-decoration: none;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
.service-text {
text-align: center;
}
.service-text p {
text-align: left
}
.last {
margin-bottom: 0px;
}
.first {
margin-top: 0px;
}
body, .body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100% !important;
height: 100%;
display: block;
max-width: 600px;
margin: 0 auto;
margin-top: 20px;
background-color: #999999;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
line-height: 125%;
}
h1, h2, h3 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
line-height: 125%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h1 {
font-size: 1.8em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 1.5em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h3 {
font-size: 1.2em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 1.0em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
ul li, ol li {
list-style-position: inside;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}
.large-button {
color: #FFFFFF;
background-color: #666666;
border: none;
border-bottom: 1px solid #666666;
line-height: 125%;
display: inline-block;
width: 100%;
margin: 0 auto;
position: relative;
font-style: normal;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 0px solid #999999;">
<tr>
<td class="container" align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="content" align="center" valign="top" width="100%">
<center>
<img src="https://www.vpcode.com/vfeimages/uploads/email/PureStorage_Email_Banner.png" alt="Pure Storage" style="height: auto !important; width: 100% !important;" class="header-image" />
</center>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<img src="https://www.vpcode.com/vfeimages/uploads/email/Vivint_Virtual_Card.png" alt="Vivint Card" align="left" width="283" style="max-width: 283px;" class="column-image" />
</td>
</tr>
<tr>
<td class="content" align="left" valign="top">
<p>Lorem ipsum dolor sit amet.</p>
</td>
</tr>
</table>
</td>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<p>Dear #FirstName#,</p>
<p>Congratulations! $#DollarAmount# in reward money is available to load onto your Visa Prepaid Card! To accept your funding, simply click on the button below. Be sure to have your card handy.</p>
<p><b>Reference Code:</b> #Promocode#</p>
<p>#EmailMessage#</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; max-width: 600px; border-collapse: separate; border-radius: 2em;">
<tr>
<td class="large-button" align="center" valign="middle" width="100%" style="color: #FFFFFF; font-family: Arial; font-size: 100%; font-weight: bold; line-height: 125%; padding: 10px; text-align: center;">
<center>Click Here to Access Your Reward
</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" align="left" valign="top" width="100%">
<p>If you do not yet have a card, please hold onto this email. You will receive your card shortly and can accept your reward at that time.</p>
<p>If you need help, email service#prepaidcodecenter.com or call Cardholder Services at 1-877-325-8444 during standard business hours.</p>
</td>
</tr>
<tr>
<td class="content" align="center" valign="top" width="100%">
<center>
<p>Program issued by The Bancorp Bank, Member FDIC, pursuant to a license from Visa U.S.A. Inc.</p>
</center>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>