I have written email signature codes for Gmail and Outlook for my company mail. The mail signature codes I have written are not working responsively. The dimensions are not optimized on different screens (mobile, web, different mail applications) I am putting the codes I have written below.
Can you please tell me what's wrong and what's causing the dimension problem.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cameron Mathis</title>
<style>
#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 {
font-size: 14px;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 0;
}
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: #000 !important;
border-color: #000 !important;
}
}
.headewa a {
color: #fff;
}
.mt4stepsouter i.lastborder {
display: none !important
}
.hotkeys_chart {
border: 1px solid #8a8a8a;
margin: auto;
}
.hotkeys_chart td {
border-bottom: 1px solid #8a8a8a;
text-align: left;
padding: 8px 10px;
font-size: 14px;
color: #707070;
line-height: 20px
}
.hotkeys_chart td+td {
border-left: 1px solid #8a8a8a;
}
.hotkeys_chart tr:last-child td {
border-bottom: 0
}
.hotkeys_chart tr td:first-child,
.hotkeys_chart tr td:last-child {
white-space: nowrap;
}
.hotkeys_chart tr:nth-child(even) {
background: #f4f4f4
}
.headerbg .mobileview {
display: none;
}
.boxheading {
}
.webinarblock_mobile {
display: none;
}
.mobileview {
display: none;
}
.boxheading {}
.table_social_one a {
color: #3491bf;
}
.table_social_two a {
color: #3491bf;
}
.table_social_three a {
color: #3491bf;
}
.clr p a {
color: #fff;
}
</style>
</head>
<body class=""
style="background-color: #fafafa; font-family: 'arial', sans-serif, sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4;padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;margin:0">
<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: #fafafa;">
<tr>
<td style="font-family: 'arial', sans-serif, 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 0; max-width: 700px; padding: 0; width: 100%;">
<div class="content"
style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 700px; padding:0; overflow: hidden;">
<!-- START CENTERED WHITE CONTAINER -->
<table border="0" cellpadding="0" cellspacing="0"
style="display:block;border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; border-collapse:separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background:url('https://mathiswealth.com/wp-content/uploads/2022/07/bg-02.png'); background-position:left center; height:250px;background-repeat: no-repeat;background-size:cover ">
<tr>
<td>
<table>
<tr>
<td>
</td>
</tr>
<tr style="height:121px">
<td>
</td>
</tr>
<tr>
<td style="height:20px;width:161px;">
<img width="100%" src="https://mathiswealth.com/wp-content/uploads/2021/06/Mathis-Wealth-Management.png" alt="" srcset="" style="padding-left: 32px;">
</td>
</tr>
<tr>
<td>
<img src="https://mathiswealth.com/wp-content/uploads/2022/07/facebook.png" alt="" style="width:25px;padding-left:78px;padding-top:11px">
<img src="https://mathiswealth.com/wp-content/uploads/2022/07/linkedin.png" alt="" style="width:25px;padding-left:10px;padding-top:11px">
</td>
</tr>
</table>
</td>
<td style="display: block;">
<table style = "display:initial;margin-left:46px;">
<tr>
<td colspan="3">
<p style="display:block;font-family: 'arial', sans-serif; font-size:26px;margin-top:41px;margin-bottom:0px;color:#004466; line-height:30px; font-weight:bold;letter-spacing: 1px;">CAMERON MATHIS</p>
</td>
</tr>
<tr>
<td style="display: block;">
<p style="display:block;font-family: 'arial', sans-serif; font-size:16px;margin:0px auto; color:#004466; line-height:19px; font-weight:normal">
FINANCIAL ADVISOR <br>
</p>
<p style="display:block;font-family: 'arial', sans-serif; font-size:15px;margin-top:29px;margin-bottom:0px;color:#333333; line-height:30px; font-weight:bold">
ADDRESS: </p>
<p style="display:block;font-family: 'arial', sans-serif; font-size:15px;margin-top:0px;margin-bottom:0px;color:#333333; line-height:18px; font-weight:normal">
7210 N. 16TH STREET <br>
PHOENIX, AZ 85020
</p>
</td>
<td style="width:30px"></td>
<td>
<p style="display:block;font-family: 'arial', sans-serif; font-size:13px;margin-top:13px;margin-bottom:0px;margin-left:0px;color:#333333; line-height:22px; font-weight:normal">
<span style="font-weight: bold;">P : </span>602-393-0501
</p>
<p style="display:block;font-family: 'arial', sans-serif; font-size:13px;margin-top:0px;margin-bottom:0px;margin-left:0px;color:#333333; line-height:22px; font-weight:normal">
<span style="font-weight: bold;">TF : </span>800-817-9406
</p>
<p style="display:block;font-family: 'arial', sans-serif; font-size:13px;margin-top:0px;margin-bottom:0px;margin-left:0px;color:#333333; line-height:22px; font-weight:normal">
<span style="font-weight: bold;">F : </span>800-391-6075
</p>
<p style="display:block;font-family: 'arial', sans-serif; font-size:13px;margin-top:0px;margin-bottom:0px;margin-left:0px;color:#333333; line-height:22px; font-weight:normal">
<span style="font-weight: bold;">E : </span>CAMERON#MATHISWEALTH.COM
</p>
<p style="display:block;font-family: 'arial', sans-serif; font-size:13px;margin-top:0px;margin-bottom:0px;margin-left:0px;color:#333333; line-height:22px; font-weight:normal">
<span style="font-weight: bold;">W : </span>WWW.MATHISWEALTH.COM
</td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="followus" border="0" cellpadding="0" cellspacing="0"
style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; border-collapse:separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt;padding:12px 16px 10px;background-color:white">
<tr>
<td valign="top">
<p
style="font-family: 'arial', sans-serif; font-size:12px; font-weight:normal;margin-top:5px; margin-bottom:0; text-align:left; color:#333333; line-height:38px; font-weight:bold">
Private Financial Planning & Investment Management - It’s not just business, it’s personal!</p>
<p
style="font-family: 'arial', sans-serif; font-size:12px; font-weight:normal; margin:0px 0 0; text-align:left; color:#333333; line-height:16px">
Cameron Mathis is a Registered Representative offering Securities through United Planners Financial Services, member FINRA, SIPC.
Advisory Services offered through Mathis Wealth Management, a registered investment advisory firm not affiliated with United Planners Financial Services.
</p>
<p
style="font-family: 'arial', sans-serif; font-size:12px; font-weight:normal; margin:12px 0 0; text-align:left; color:#333333; line-height:16px;font-style: italic;">
Confidential Information: This message and any attachments contain information from Mathis Wealth Management and/or United
Planners Financial Services, which may be confidential and/or privileged, and is intended for use only by the addressee(s) named on this
transmission. If you are not the intended recipient, or the employee or agent responsible for delivering the message to the intended recipient, you are notified that any review, copying, distribution or use of this transmission is strictly prohibited. If you have received this transmission in error, please (i) notify the sender immediately by e-mail or by telephone and (ii) destroy all copies of this message.
</p>
<p
style="font-family: 'arial', sans-serif; font-size:12px; font-weight:normal; margin-top:12px; text-align:left; color:#333333; line-height:16px; font-weight:bold">
IMPORTANT NOTE: Email is not secure. To protect your personal Information, do not send any sensitive data such as account
numbers or social security numbers via email. Strategies discussed may have tax consequences that you may wish to discuss
with your tax professional. Also, transaction requests or address updates cannot be accepted via email. We must speak to you in
person to accept any requests.</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
</body>
</html>
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>
The first span with border 1px solid #333; not showing in outlook 365, but showing in outlook live and gmail. I've tried outline and box-shadow as well it's not working in any way.The first span with border 1px solid #333; not showing in outlook 365, but showing in outlook live and gmail. I've tried outline and box-shadow as well it's not working in any way.I
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style=" mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; border-spacing: 0px; ">
<tr>
<td align="right" style="padding: 0; margin: 0">
<span class="es-button-border" bordercolor="#333" border="1" style=" mso-border-right-alt: 1px solid #333333; mso-border-bottom-alt: 1px solid #333333; mso-border-left-alt: 1px solid #333333; mso-border-top-alt: 1px solid #333333; border-style: solid; border-color: #333333; border-width: 1px; border: 1px solid #333333; display: inline-block; border-radius: 0px; width: auto; ">
<span class="es-button" target="_blank" style=" mso-style-priority: 100 !important; text-decoration: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; mso-line-height-rule: exactly; color: #333333; font-size: 12px; border-style: solid; border-color: #fff; border-width: 10px 20px 10px 20px; display: inline-block; background: #fff; border-radius: 0px; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-weight: normal; font-style: normal; line-height: 14px; width: auto; text-align: center; " >
<span id="price1">Per person:</span>
INR 98298 (CHF 1192)
</span>
</span>
</td>
</tr>
</table>
The problem is you're using a span as a block element, which it isn't naturally and on top of that - trying to force it with the use of display:inline-block won't always work in Outlook clients.
Your best bet is to use block level elements for borders. These include: table cells & divs.
You could convert all of your span tags to divs to make this work, however because divs are block elements, they'll go full width by default.
You can define widths to fix this, however Outlook won't respect those without mso specific code.
Below is your code and then the row below that is what I'd do:
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style=" mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
<tr>
<td align="right">
<span class="es-button-border" style="border: 1px solid #333333; display: inline-block;">
<span class="es-button" style="mso-style-priority: 100 !important; text-decoration: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; mso-line-height-rule: exactly; color: #333333; font-size: 12px; border-style: solid; border-color: #fff; border-width: 10px 20px 10px 20px; display: inline-block; background: #fff; border-radius: 0px; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-weight: normal; font-style: normal; line-height: 14px; width: auto; text-align: center;">
<span id="price1">Per person:</span>INR 98298 (CHF 1192)
</span>
</span>
</td>
</tr>
<tr>
<td style="padding-top:10px;">
<table align="right" role="presentation" border="0" cellpadding="0" cellspacing="0" style="border: 1px solid #333333;">
<tr>
<td class="es-button-border" style="text-decoration: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; mso-line-height-rule: exactly; color: #333333; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-size: 12px; line-height: 14px; text-align: center;">
<div style="border-style: solid; border-color: #fff; border-width: 10px 20px 10px 20px;">
<span id="price1">Per person:</span>INR 98298 (CHF 1192)
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
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'm working on a two-column reponsive email. Everything is appearing perfect except that I can't get the right border in one of my TDs to remove on mobile. I have the following style set:
td.copy { padding-right: 0px; border-bottom: 0; border-right: none; padding-bottom: 20px; }
Strangely, the bottom border is adding just fine.
Here is my code. Any help would be greatly appreciated. I can't figure this one out.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body { margin: 0px; padding: 0px; }
#media only screen and (max-width: 660px) {
table.view { width: 480px !important; }
table.container { width: 480px !important; }
table.left { width: 260px !important; }
table.right { width: 140px !important; }
td.design img { display: none; }
td.design { background: #FFF url(http://www3.poscorp.com/emarketing/market-growth/free-design-25-off-sm.gif) no-repeat;
height: 75px;
background-repeat: no-repeat !important;
background-position: center !important;
}
td.contact table { width: 100% !important; text-align: center;}
table.info p { text-align:center;}
table.copy { width: 480px !important; }
}
#media only screen and (max-width: 510px) {
table.view { width: 100% !important; }
table.container { width: 100% !important; }
table.left { width: 100% !important; margin-bottom: 10px; }
td.copy { padding-right: 0px; border-bottom: 0; border-right: none; padding-bottom: 20px; }
table.right { width: 100% !important; }
table.video td { padding-top: 15px; }
td.design img { display: none; }
td.design { background: #FFF url(http://www3.poscorp.com/emarketing/market-growth/free-design-25-off.gif) no-repeat;
height: 88px;
background-repeat: no-repeat !important;
background-position: center !important;
vertical-align: middle;
text-align: center; }
table.copy { width: 100% !important; }
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="view">
<tr>
<td align="right" valign="middle" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 10px; line-height:100%; color: #666; background: #FFF; padding: 8px 10px 8px 10px; vertical-align:middle;"><img src="http://www2.poscorp.com/images/addthis/16x16/email.png" alt="Forward Email" width="13" height="13" style="vertical-align: sub;"> Forward to a Friend | Email not displaying correctly? View it in your browser.</td>
</tr>
</table>
<table class="container" align="center" width="600" border="0" cellspacing="0" cellpadding="20" bgcolor="#FFFFFF" style="border:1px solid #CCC;">
<tr>
<td class="header" bgcolor="#ffffff" style="border-top: #00a160 solid 10px; padding: 20px 60px 20px 20px; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 27px; line-height:140%; color: #00a160; background: #FFF; ">When communicating with your patients, <span style="font-weight:bold;">consistency counts.</span></td>
</tr>
<tr>
<td class="content" bgcolor="#ffffff" style="font-family: Tahoma,Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 0px 20px 20px 20px;">
<table width="340" border="0" cellspacing="0" cellpadding="0" align="left" class="left" >
<tr>
<td class="copy" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; border-right: solid #00a160 1px; padding-right:20px;"><p style="margin-bottom: 15px; margin-top: 0px; padding-top: 0px; ">POS provides practices customized print and digital communication to ensure your brand stands out – and that it stays consistent from one communication solution to the next. From print and messaging to billing and surveying, our services help you deliver communications in the patient’s preferred way, increase practice revenue and improve patient satisfaction.</p>
<p style="margin-bottom: 15px; margin-top: 0px; padding-top: 0px; ">It's how you'll build loyalty while helping keep your patients healthy.</p>
<p style="margin-bottom: 15px; margin-top: 15px;">Print – With print services from POS, you’ll receive clarity, convenience and consistency – from your practice stationery to marketing materials.</p>
<p style="margin-bottom: 15px; margin-top: 15px;">Statement Processing & Patient Payment Services – POS provides solutions to improve your practice's profitability. We specialize in driving down the cost of collecting your patient-owed balances through our Statement Processing, Online Bill Pay and Past Due Notification solutions.</p>
<p style="margin-bottom: 15px; margin-top: 15px;">Digital Messaging – Our automated communication system, POS Messaging™, lets you send customized, two-way communication to your patients via email, phone, text or mail to help you reduce no-shows and more.</p>
<p style="margin-bottom: 0px; margin-top: 15px;">Patient Surveys – With POS Surveys™, you can find out what your patients like about your practice and what you can improve so they don’t leave.</p></td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="0" align="right" class="right" >
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="video">
<tr>
<td style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; line-height:130%; color: #333; background: #FFF; border-bottom: 1px #00a160 solid;"><p style="margin-top:0px; margin-bottom: 15px; text-align:center;"><img src="http://www3.poscorp.com/emarketing/market-growth/blog-logo.gif" alt="POS Blog - Communicate" width="150" height="69"></p>
<p style="margin-top:0px; margin-bottom: 10px;">The blog for best practices in patient communication.</p>
<p style="margin-top:0px; margin-bottom: 20px;">JOIN NOW</p></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="promo">
<tr>
<td align="center" valign="middle" class="design"><p style="text-align:center; vertical-align:middle;" ><img src="http://www3.poscorp.com/emarketing/market-growth/free-design-25-off.gif" width="200" height="88" alt="Free Design and 25% a new print item"></p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 10px 20px 20px 20px;"><p style="margin: 0px; ">For more information, contact your Regional Territory Manager, <span style="font-weight:bold;">%%user_name%%</span> at <span style="font-weight:bold;">%%user_phone%%</span> or <span style="font-weight:bold;">%%user_email%%</span>.</p></td>
</tr>
<tr>
<td class="content" bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; line-height:130%; color: #333; background: #FFF; padding: 0px 20px 0px 20px; text-align:center;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><p style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 5px 0px 5px 0px; border-top: #CCC solid 1px; border-bottom:#CCC solid 1px; text-align:center; letter-spacing: 1px;">PRINT <span style="color:#00a160;">|</span> STATEMENT PROCESSING <span style="color:#00a160;">|</span> DIGITAL MESSAGING <span style="color:#00a160;">|</span> PATIENT SURVEYS</p></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" class="contact" style="font-family: Arial, sans-serif; font-size: 14px; line-height:115%; color: #333; background: #FFF; padding: 20px 20px 20px 20px;">
<table width="275" border="0" cellspacing="0" cellpadding="0" align="left" class="logo">
<tr>
<td class="poslogo"><img src="http://www3.poscorp.com/emarketing/master/pos_logo_hc.gif" alt="POS Professional Office Services, Inc." width="272" height="45"></td>
</tr>
</table>
<table width="265" border="0" cellspacing="0" cellpadding="0" align="right" class="info">
<tr>
<td align="right"><p style="font-family: Tahoma, Arial, sans-serif; font-size: 13px; line-height: 100%; color: #333; font-weight:bold; margin:19px 0px 5px 0px;">800.331.4976 <span style="color:#00a160;">|</span> poscorp.com <span style="color:#00a160;">|</span> <img src="http://www3.poscorp.com/emarketing/master/linkedin.jpg" alt="LinkedIn" width="16" height="16" border="0" style="vertical-align:bottom;"/> <img src="http://www3.poscorp.com/emarketing/master/youtube.jpg" width="39" height="16" alt="YouTube" border="0" style="vertical-align:bottom;"></p></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="copy">
<tr>
<td bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 10px; line-height:120%; color: #666; background: #FFF; padding: 10px 10px 10px 10px; border-top:1px solid #CCC;">
<p style="margin-top: 0px; margin-bottom:10px;"><span style="font-weight:bold;">Our mailing address is:</span> <br>
%%account_address%%</p>
<p style="margin-top: 10px; margin-bottom:0px;">update subscription preferences</p></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Did you add it to the media query?, dont forget !important.
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>