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>
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 been trying to hide a block element in outlook desktop and show another block element in outlook mobile but it doesn't work and I don't know why because I'm using the same method as I was using before but still doesn't work.
Can you please check my code and tell me if you have any suggestions? Thank you!
Please check the screenshot with the way it displays in outlook here
https://imgur.com/U6b2oSj
On mobile it hides the element, is just the desktop outlook that it doesn't
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&display=swap" rel="stylesheet">
<style type="text/css">
* {
mso-line-height-rule: exactly;
}
div,
p,
a,
li,
td,
body {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
font-family: 'Roboto Condensed', sans-serif;
}
table td {
border-collapse: collapse;
}
body,
p {
margin: 0;
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 110%
}
img {
-ms-interpolation-mode: bicubic;
display: block;
border: 0;
}
blockquote .orig,
.WordSection1 .orig {
display: none!important;
}
table th {
margin: 0!important;
padding: 0!important;
vertical-align: top;
font-weight: normal;
}
</style>
<style type="text/css">
#media screen {
a[href^="tel"],
a[href^="sms"],
.moblinks a {
color: inherit;
text-decoration: none!important;
}
}
a[x-apple-data-detectors] {
color: inherit!important;
text-decoration: none!important;
font-size: inherit!important;
font-family: inherit!important;
font-weight: inherit!important;
line-height: inherit!important;
}
div[style*="margin: 16px 0"] {
margin: 0!important;
}
</style>
<style type="text/css">
#media screen and (max-device-width:640px),
screen and (max-width:640px) {
.gapmob {
width: 100%!important;
float: left!important;
display: block!important;
padding-top: 10px!important;
}
.stack {
width: 100% !important;
float: left !important;
display: block !important;
align-content: center !important;
text-align: center !important;
}
.CTR {
align-content: center !important;
text-align: center !important;
width: 100% !important;
}
.colsplit {
width: 100%!important;
float: left!important;
display: block!important;
}
.wrapto320px {
width: 380px!important;
min-width: 380px!important;
max-width: 380px!important;
height: auto!important;
}
.wrapto320px .FontHeader {
font-size: 30px !important;
line-height: 1.2 !important;
}
.wrapto280px {
width: 280px!important;
min-width: 280px!important;
max-width: 280px!important;
height: auto!important;
}
.wrapto100pc {
width: 100%!important;
min-width: 100%!important;
max-width: 1000px!important;
height: auto!important;
}
.wrapto100pcmax {
width: auto!important;
height: auto!important;
max-width: 100%!important;
display: block!important;
}
.nomob {
display: none!important;
width: 0px!important;
height: 0px!important;
}
.textcenter {
text-align: center!important;
}
.textleft {
text-align: left!important;
}
.textright {
text-align: right!important;
}
.show {
display: block!important;
overflow: visible!important;
float: none!important;
width: 100%!important;
height: auto!important;
max-height: inherit!important;
}
.logo {
width: 120px!important;
height: auto!important;
}
.clearbg {
background-image: none!important;
}
.ptop10 {
padding-top: 10px!important;
}
.valignmobtop {
vertical-align: top!important;
}
.valignmobmiddle {
vertical-align: middle!important;
}
.valignmobbottom {
vertical-align: bottom!important;
}
.mobheightclear {
height: auto!important;
}
.mobheight100 {
height: 100px!important;
}
.mobheight150 {
height: 150px!important;
}
.mobheight200 {
height: 200px!important;
}
.mobheight250 {
height: 250px!important;
}
.mobheight300 {
height: 300px!important;
}
.mobheight350 {
height: 350px!important;
}
.mobheight400 {
height: 400px!important;
}
.mobheight450 {
height: 450px!important;
}
.mobheight500 {
height: 500px!important;
}
.mobheight550 {
height: 550px!important;
}
.mobheight600 {
height: 600px!important;
}
.mobheight650 {
height: 650px!important;
}
.mobheight700 {
height: 700px!important;
}
.mobheight750 {
height: 750px!important;
}
.mobheight800 {
height: 800px!important;
}
}
</style>
<!--[if (mso)|(mso 16)]>
<style type="text/css">
a {text-decoration: none;}
</style>
<![endif]-->
<!--[if mso] >
<style type="text/css">
table, td, div, p {
font-family: arial, sans-serif !important;
line-height:normal;
}
</style>
<![endif]-->
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!--[if gte mso 9]><xml>
<o:CustomDocumentProperties>
<o:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Editor msdt:dt="string">Ionut Mitu</o:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Editor>
<o:Order msdt:dt="string">5825000.00000000</o:Order>
<o:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Author msdt:dt="string">Ionut Mitu</o:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Author>
<o:ContentTypeId msdt:dt="string">0x0101003BA064F954674D4B968EEE2A83BA3752</o:ContentTypeId>
</o:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body class="body" leftmargin="0" topmargin="0" rightmargin="0" bgcolor="#ffffff" style="margin:0 !important; padding:0 !important; width:100% !important;"><img src="https://s4cloudae36f1aac.hana.ondemand.com:443/data-buffer/sap/public/cuan/link/100/53453E04AD2A2EA685C0B93208E78873279FF43A/pixel.gif?_L54AD1F204_=c2NlbmFyaW89TUxPUEVOJnRlbmFudD1teTMwMzczNi5zNGhhbmEub25kZW1hbmQuY29t" width="1" height="1" border="0"
alt="">
<!--[if mso]></td></tr></table><![endif]-->
<!--[if mso]><table border="0" cellpadding="0" cellspacing="0" align="left" style="mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse: collapse; width: 100%"><tr><td style="width: 100%;"><![endif]-->
<div style="float: left; width: 100%" class="sapMktBlock">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" bgcolor="#FFFFFF">
<tr>
<td style="font-size: 0px;" class="nomob"> </td>
<td align="center" width="640" style="width: 640px; min-width: 640px;" class="wrapto320px">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" class="wrapto320px">
<tr>
<td align="left">
<table role="presentation" width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0" bgcolor="#fff">
<tr>
<td align="center" valign="top" style="padding: 0px 0px 0px 0px;" class="textcenter">
<table width="100%" style="min-width: 100%;" border="0" align="left" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="left" valign="top">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" style="font-family: 'Roboto Condensed', Arial, sans-serif; line-height: 21px; color: #000000;" class="textcenter">
<table align="left" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc">
<tr>
<td width="600" align="left" style="padding: 0px 0px 0px 20px; font-family: 'Roboto Condensed', Arial, serif; color: #ffffff;" class="textcenter">
<b><a align="left" href="" style="color: #000000; font-size: 30px; text-align: left; text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;">EXPLORE</a></b>
<br>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" style="padding: 20px 0px 20px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tr>
<td style="padding: 0px 0px 0px 20px; ">
<!--button-->
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner nomob">
<tr>
<td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;"><a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none; display: block;">FIRST</a></td>
<td width="20" align="center" bgcolor="#ffffff"> </td>
<td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;"><a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none; display: block;">SECOND</a></td>
<td width="20" align="center" bgcolor="#ffffff"> </td>
<td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;"><a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none; display: block;">THIRD</a></td>
<td width="20" align="center" bgcolor="#ffffff"> </td>
<td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;"><a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none; display: block;">FORTH</a></td>
</tr>
</table>
</td>
</tr>
</table>
<div style="width: 0; overflow: hidden; float: left; display: none; max-height: 0px; mso-hide: all;" class="show">
<table align="center" role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner">
<tr>
<td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;">
<a rel="noopener noreferrer" href=" target=" _blank " style="color: #000000; text-decoration: none; display: block; ">FIRST</a></td>
<td width="20 " align="center " bgcolor="#ffffff "> </td>
<td align="center " bgcolor="#ffffff " style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family:
'Roboto Condensed', Arial, sans-serif; "><a rel="noopener noreferrer " href=" " target="_blank " style="color: #000000; text-decoration: none; display: block; ">SECOND</a></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td align="center " bgcolor="#ffffff " style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family:
'Roboto Condensed', Arial, sans-serif; "><a rel="noopener noreferrer " href=" " target="_blank " style="color: #000000; text-decoration: none; display: block; ">THIRD</a></td>
<td width="20 " align="center " bgcolor="#ffffff "> </td>
<td align="center " bgcolor="#ffffff " style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family:
'Roboto Condensed', Arial, sans-serif; "><a rel="noopener noreferrer " href=" " target="_blank " style="color: #000000; text-decoration: none; display: block; ">FORTH</a></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td style="font-size: 0px;mso-line-height-rule: exactly;-webkit-text-size-adjust: none;-ms-text-size-adjust: none;font-family: 'Roboto Condensed', sans-serif;border-collapse: collapse; " class="nomob "> </td>
</tr>
</table>
</div>
</body>
</html>
#media screen and (min-device-width:641px),
screen and (min-width:641px) {
.gapmob {
display: none!important;
}}
Add this code in CSS
On responsive the other 2 or more elements are collapsing(http://prntscr.com/m2x4ke) What am I doing wrong? It is everywhere perfect except MacOS iOS email agent.
I have tried everything i knew. display to change and width 100% but it doesnt works.All !important are on their places. Have anyone any ideas about this issue.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta name="viewport"
content="min-width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no, date=no">
<meta charset="UTF-8">
<title>Title</title>
<style>
a[href^="x-apple-data-detectors:"] {
color: inherit;
text-decoration: inherit;
}
html {
/*-webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased;*/
}
</style>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
<body style="-webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; ">
<style>
#media screen and (max-width: 650px) {
table {
border-spacing: 0;
}
.container {
width: 100% !important;
max-width: 600px;
min-width: 0 !important;
}
.resp-td {
width: 239px !important;
max-width: 100%;
margin: 0 auto;
display: block;
padding: 0 !important;
}
.resp-td {
width: 100% !important;
}
.resp-td {
padding: 0 0 50px 0 !important;
}
.number-color a {
color: #9a9b9b !important;
text-decoration: none !important;
}
* {
-webkit-text-size-adjust: none;
box-sizing: border-box !important;
}
}
#media screen and (max-width: 380px) {
.resp-td {
/*width: 68.3% !important;*/
}
}
#media screen and (max-width: 320px) {
.resp-td {
/*width: 82.3% !important;*/
}
}
</style>
<!--[if gte mso 9]>
<style>
ul, ol, dl {
display: block;
list-style-position: outside !important;
margin: 0 0 10px 18px;
padding: 0;
text-align: left;
}
ul li {
margin: 0 0 0 10px;
padding-left: 20px;
}
ol li {
margin: 0 0 0 10px;
padding-left: 20px;
}
li:last-child, li:last-of-type {
margin-bottom: 0;
}
dt {
font-weight: bold;
line-height: 18px;
margin: 0 0 4px;
padding: 0;
text-align: left;
vertical-align: middle;
}
dd {
line-height: 18px;
margin: 0 0 8px;
padding: 0;
text-align: left;
vertical-align: middle;
}
</style>
<![endif]-->
<table align="center" cellpadding="0" cellspacing="0"
style="background-color:#ffffff; font-family: sans-serif; margin:0; padding:0; width:100% !important; text-align: left; border-spacing: 0; border-collapse: collapse; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased;mso-cellspacing: 0; mso-padding-alt: 0;">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="container" align="center" width="600"
style="mso-cellspacing: 0; mso-padding-alt: 0;border-collapse: collapse; border-spacing: 0; width: 600px; max-width: 600px; min-width: 600px;margin: 0 auto; font-family: sans-serif;">
<tbody>
<tr>
<td style="padding-left: 10px; padding-right: 10px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="resp-td" width="33.3%" style="padding-right: 6px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#BF1C1F">
<tbody>
<tr>
<td style="padding: 10px 0 10px 0">
<a href="#"><p
style="color: #ffffff; font-family: sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 25px;margin: 0; padding:0; text-align: center;">Lorem
Ipsum</p></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td class="resp-td" width="33.3%" style="padding-left: 4px;padding-right: 4px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#BF1C1F">
<tbody>
<tr>
<td style="padding: 10px 0 10px 0">
<a href="#"><p
style="color: #ffffff; font-family: sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 25px;margin: 0; padding:0; text-align: center;">Lorem
Ipsum</p></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td class="resp-td" width="33.3%" style="padding-left: 6px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#BF1C1F">
<tbody>
<tr>
<td style="padding: 10px 0 10px 0">
<a href="#"><p
style="color: #ffffff; font-family: sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 25px;margin: 0; padding:0; text-align: center;">Lorem
Ipsum</p></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
It should be under by one. Like block elements. Ordinary display block doesnt helpd at all. And I have collapsing of other 2 elements
It seems for such layout http://prntscr.com/m2xzf8 and more in a row better to replace <td> with <th> and the problem is solved and you will have this outlook http://prntscr.com/m2xzuh except of this http://prntscr.com/m2y02e.
I have white space in my table. I've searched the forum but it seem I have everything setup correct. Has it something to do with the images?
Cellpadding is here but no luck.
Does anyone know where it goes wrong? I've tried block to but with no luck, I know I must be missing something but I can't seem to find it.
I can't add any more details to this post.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>House of Talents</title>
<style type="text/css">
img {display: inline-block}
.floatRight {float:right;}
.floatLeft {float:none;}
.mobileShow {display: none}
.MPED_ULSortable {margin: 0 !important;padding: 0 !important;}
.cornerAll {border-radius: 0px;}
#media only screen and (max-device-width: 850px), (max-width: 850px) {
.logo {width: 180px;height: auto;}
.marginBottom {
margin-bottom: 15px;
}
.contentTable {
width:100% !important;
float: none !important;
}
td[class="floatLeft"] {
float:left !important;
width: 100% !important;
}
td[class="floatRight"] {
width: 100% !important;
float:right !important;
}
.mobileHide {display:none}
.mobileShow {display: block !important}
.resizeImage img {
width: 100%;
height: auto;
}
}
</style>
</head>
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td class="MPED_CONTENT">
<div class="MPED_CONTENTBLOCK">
<table border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
<tbody>
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 850px; max-width: 850px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="resizeImage" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #243e55; font-weight: bold; background-color: #f3716d; width: 425px; padding-left: 60px;" width="425"><br>
<br>
<img src="http://images.m9.mailplus.nl/user3900328/765/arcq_wit_4x.png" border="0" width="150" height="37" mpdatacustomsize="true"><br>
<br>
<span style="color: #e94b5a; font-family: helvetica;"> <br>
</span></td>
<td class="resizeImage" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #243e55; font-weight: bold; background-color: #f3716d; width: 425px;" width="425"> </td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e;">
<blockquote>
<p class="p1"> </p>
</blockquote>
</td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e;">
<p class="p1"><span style="font-family: helvetica;"><img src="http://images.m9.mailplus.nl/user3900328/131/welcome0.png" border="0" width="425" height="425" mpdatacustomsize="true" ><br>
</span></p>
</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e; line-height: 18px; background-color: #e7f0f7;"> </td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e; line-height: 18px; background-color: #e7f0f7;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Your <p> tags are adding margins by default. There is no css class p1 defined, but setting margins to zero on that class will fix this.
Note
I am purposely not addressing the bad practice involved with using tables for layout (or the other myriad other bad practices in this code).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>House of Talents</title>
<style type="text/css">
img {display: inline-block}
.floatRight {float:right;}
.floatLeft {float:none;}
.mobileShow {display: none}
.MPED_ULSortable {margin: 0 !important;padding: 0 !important;}
.cornerAll {border-radius: 0px;}
.p1 { margin: 0 };
#media only screen and (max-device-width: 850px), (max-width: 850px) {
.logo {width: 180px;height: auto;}
.marginBottom {
margin-bottom: 15px;
}
.contentTable {
width:100% !important;
float: none !important;
}
td[class="floatLeft"] {
float:left !important;
width: 100% !important;
}
td[class="floatRight"] {
width: 100% !important;
float:right !important;
}
.mobileHide {display:none}
.mobileShow {display: block !important}
.resizeImage img {
width: 100%;
height: auto;
}
}
</style>
</head>
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td class="MPED_CONTENT">
<div class="MPED_CONTENTBLOCK">
<table border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
<tbody>
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 850px; max-width: 850px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="resizeImage" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #243e55; font-weight: bold; background-color: #f3716d; width: 425px; padding-left: 60px;" width="425"><br>
<br>
<img src="http://images.m9.mailplus.nl/user3900328/765/arcq_wit_4x.png" border="0" width="150" height="37" mpdatacustomsize="true"><br>
<br>
<span style="color: #e94b5a; font-family: helvetica;"> <br>
</span></td>
<td class="resizeImage" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #243e55; font-weight: bold; background-color: #f3716d; width: 425px;" width="425"> </td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e;">
<blockquote>
<p class="p1"> </p>
</blockquote>
</td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e;">
<p class="p1"><span style="font-family: helvetica;"><img src="http://images.m9.mailplus.nl/user3900328/131/welcome0.png" border="0" width="425" height="425" mpdatacustomsize="true" ><br>
</span></p>
</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e; line-height: 18px; background-color: #e7f0f7;"> </td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #43565e; line-height: 18px; background-color: #e7f0f7;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
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.