I have a pretty simple unordered list with some links in an html email that generated by a server. It looks and works as expected in most email clients (gmail, apple mail, outlook web), but in Outlook desktop some of the links don't work, seemingly at random.
Specifically, some of the links (all from the same list) work, some don't. When they don't, they don't appear as links: they're not underlined and the cursor doesn't change when you mouse over them.
Here's the code:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>New Lead</title>
<style>
#media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] h2 {
margin-bottom: 5px !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;
}
}
#media all {
.btn-primary table td:hover {
background-color: #229422 !important;
}
.btn-primary a:hover {
background-color: #229422 !important;
border-color: #229422 !important;
}
.statusLinks a {
color: #870a0a
}
}
</style>
</head>
<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-size-adjust: 100%;">
<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;">New lead from Bill Jones of Jason Test 20220511 B</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="margin-top: 20px; border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; 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: 580px; padding: 10px; width: 580px; margin: 0 auto;" width="580" valign="top">
<div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 580px; padding: 10px;">
<!-- START CENTERED WHITE CONTAINER -->
<table role="presentation" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border-radius: 3px; width: 100%;" 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">
<img src="http://company.com/logo.png" alt="company logo" width="227" height="31" border="0" style="-ms-interpolation-mode: bicubic; max-width: 100%; padding-bottom: 2em; border: 0; outline: none; text-decoration: none; display: block;">
Hello,
<br/>
<br/>The following sales lead has been assigned to you based on the inquiry sender's location and needs.
<br/>
<br/>Please process the lead within 24 hours; contact the inquiry sender (when needed) and select the correct status or delegate the lead to someone else. Options are listed in the bottom of this email.
<br/>
<br/>
<h2>Lead Details</h2>
<table align="left" role="presentation" cellspacing="0" cellpadding="0" border="0" style="display:block; width: 100% !important; margin-bottom: 20px"><tbody>
<tr><td style="color: #888888; font-size: 12px;"> ID#:</td></tr>
<tr><td style="padding-left: 10px;">218271</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;"> Source:</td></tr>
<tr><td style="padding-left: 10px;">Manually-added lead - Outbound Calls</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;"> Status:</td></tr>
<tr><td style="padding-left: 10px;">Awaiting Sales Action</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Generated Date:</td></tr>
<tr><td style="padding-left: 10px;">12 May 2022</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Company:</td></tr>
<tr><td style="padding-left: 10px;">Jason Test 20220511 B</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Location:</td></tr>
<tr>
<td style="padding-left: 10px;">
United States
</td>
</tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Contact:</td></tr>
<tr><td style="padding-left: 10px;"><div><div style="margin: .3em 0"><span style="margin-right: .25em; border: 1px solid #ccc;padding:.25em">Bill</span> <span style="border: 1px solid #ccc;padding:.25em">Jones</span></div></div><div>jason#company.com</div><div>Marketing Allowed: No</div></td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Interest:</td></tr>
<tr><td style="padding-left: 10px;">Training</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Customer Comment:</td></tr>
<tr><td style="padding-left: 10px;">
--
</td></tr>
</tbody></table>
<table role="presentation" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #F7ACAD; border-radius: 3px; width: 100%;" width="100%">
<tr>
<td style="padding:10pt">
<h2 style="margin-top:0">Update Lead Status</h2>
<p>Please process this as soon as possible and select one of the options below. For detailed information of the categories, please review your Sales Handbook.</p>
<ul class="statusLinks">
<li>Qualify</li>
<li>Mark as Non-Sales Inquiry</li>
<li>Work-In-Progress</li>
<li>Mark as Disqualified</li>
<li>Mark as Junk / Solitication</li>
<li>Send to Dealer</li>
<li>Mark as Career / Media / PR / Sponsorship / Supplier Inquiry</li>
<li>Delegate to Someone Else</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr style="clear: both; border: 0; border-bottom: 1px solid #cacaca; margin: 20px 0;">
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">Your feedback is always appreciated.</p>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
<!-- START FOOTER -->
<div class="footer" style="clear: both; margin-top: 10px; text-align: center; width: 100%;">
<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 class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; color: #999999; font-size: 12px; text-align: center;" valign="top" align="center">
©2022 product, a product of Company.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
</tr>
</table>
</body>
</html>
Some relevant details:
The email uses the Cerberus html template.
There are no list specific styles in play outside of changing text color (no positioning or z-index stuff, etc.)
I can't replicate it myself at all; my user can't replicate it on demand either, but sees the problem routinely.
As far as I can tell the user is using the most up to date version of outlook desktop with no plugins.
Questions
Is anyone else seeing this problem?
Are there any obvious problems with my markup?
Are there any ways to lint/validate html emails for outlook standards?
Updates:
20220513 Stabbing around in the dark, I noticed if you change the zoom in the separate message window some of the links no longer work. They still look like links, but the hover and click actions no longer work. This might be related.
20220513 With some more messing around, when viewing the message in the separate, just scrolling up and down changes whether or not the links work. This has got to be some kind of outlook bug.
Related
I have email template with simple css. I send email to user but it show css code to user and template is not working correctly.
I test by sent email to myself on Gmail It work correctly.
and problem is I don't have enough data what kind of email client that they use.
If it possible I want to avoid using email with text only.
First image is what user get.
Second image is what I test and got on gmail
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
#media screen {
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v11/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v11/HkF_qI1x_noxlxhrhMQYELO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
}
/* CLIENT-SPECIFIC STYLES */
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
/* RESET STYLES */
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* iOS BLUE LINKS */
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;
}
/* MOBILE STYLES */
#media screen and (max-width:600px) {
h1 {
font-size: 32px !important;
line-height: 32px !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] {
margin: 0 !important;
}
</style>
</head>
<body style="background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;">
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Lato', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;"> We're thrilled to have you here! Get ready to dive into your new account. </div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#2194F4" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td align="center" valign="top" style="padding: 40px 10px 40px 10px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#2194F4" align="center" style="padding: 0px 10px 0px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #111111; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 4px; line-height: 48px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#f4f4f4" align="center" style="padding: 0px 10px 0px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<p style="margin: 0;">We're excited to have you get started. First, you need to confirm your account. Just press the button below.</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 20px 30px 30px 30px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding-right:10px;border-radius: 3px;" bgcolor="#2194F4">
Confirm Contract
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 20px 30px 60px 30px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding-right:10px;border-radius: 3px;" bgcolor="#65F489">
View Contract
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 0px 30px 40px 30px; border-radius: 0px 0px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<p style="margin: 0;">Cheers,<br> Team</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
When you send an email like this you will want a fallback. The person receiving the email can set the email up so he will see text only. You want to create a multipart message. This might help you out, so both types get content. Multipart MIME Email Guide or here: How do I send a multipart email (both HTML and plain text)
It looks like you're forwarding the email - emails will get reformatted according to the native styles of the specific email application. There's very little we can do to control that. If you want to test what it will look like, you need to send to them directly. You can use something like https://putsmail.com/ if you need.
However, not sure why the #font-face declaration are showing on forward. They shouldn't be. I suggest removing them from the #media screen { ... } - you don't need that. Just have #font-face { ... } declarations on their own.
I've used Mailchimp to build the main template structure and then modified properties and added some elements to get it working on Outlook versions.
It looks fine on most of web clients, desktop clients (Thunderbird and Mail[Apple]), but in Outlook, a white gap appears.
I've checked the code multiple times, done modifications and the only thing I'm getting is to move down or up the white gap. I've modified the template and put some stock content so you can check the source code.
Here is a codepen to check the source code: https://codepen.io/anon/pen/wEoxKy
<div class="col num6" style="max-width: 320px;min-width: 250px;display: table-cell;vertical-align: top;background-color:#000000;">
<div style="background-color: #000000; width: 100% !important;"><!--[if (!mso)&(!IE)]><!-->
<div style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:0px; padding-bottom:0px; padding-right: 0px; padding-left: 5px;"><!--<![endif]-->
<div align="center" class="img-container center autowidth fullwidth " style="padding-right: 0px; padding-left: 0px;"><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px;line-height:0px;"><td style="padding-right: 0px; padding-left: 0.5px;" align="center"><![endif]--><img align="center" alt="Image" class="center autowidth fullwidth" height="auto" src="https://www.demilked.com/magazine/wp-content/uploads/2018/03/5aaa1ce36b9c8-funny-weird-wtf-stock-photos-coverimage.jpg" style="outline: none; text-decoration: none; clear: both; border: 0px; width: 261px; max-width: 245px; display: block !important;" title="Image" width="262.5" /> <!--[if mso]></td></tr></table><![endif]--></div>
<div align="center" class="img-container center autowidth " style="padding-right: 0px; padding-left: 0px; margin-top: 5px; height: 40px;"><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px;line-height:0px;"><td style="padding-right: 0px; padding-left: 0px; padding-top: 5px;" align="center"><![endif]--><img align="center" alt="Image" class="center autowidth " height="auto" src="https://via.placeholder.com/170x40" style="outline: none; text-decoration: none; clear: both; border: 0px; width: 192px; max-width: 168px; display: block !important;" title="Image" width="192" /> <!--[if mso]></td></tr></table><![endif]--></div>
<div><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td height="80" style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px;background-color:#000000;"><![endif]-->
<div class="bwmxstext" style="color:#998b70;line-height:150%;font-family:'Roboto', sans-serif; padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px;">
<div style="font-size:12px;line-height:18px;color:#fff;font-family:'Roboto', sans-serif;text-align:left;height: 80px;">
<p style="margin: 0;font-size: 12px;line-height: 18px;text-align: center"><span style="font-size: 13px; line-height: 25px;"><strong><span style="line-height: 25px; font-size: 13px;">LOREM IPSUM</span></strong></span></p>
<p style="margin: 0;font-size: 11px;line-height: 16px;text-align: center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum dictum sollicitudin. Donec mattis mauris et massa dapibus, at posuere neque mollis.</p>
</div>
</div>
<!--[if mso]></td></tr></table><![endif]--></div>
<div align="center" class="img-container center autowidth " style="padding-right: 0px; padding-left: 0px; margin-bottom: 10px;"><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px;line-height:0px;background-color:#000000;"><td width="25%" align="right"><img src="https://www.nubiscrm.es/lists/images/image/testAgosto/boton-left.png"></td><td style="padding-right: 0px; padding-left: 0px; background-color: #fff; vertical-align: middle;" width="50%" valign="middle" align="center"><![endif]--> BOOK NOW <!--[if mso]></td><td width="25%" align="left"><img src="https://www.nubiscrm.es/lists/images/image/testAgosto/boton-right.png"></td></tr></table><![endif]--></div>
<!--[if (!mso)&(!IE)]><!--></div>
<!--<![endif]--></div>
</div>
This is how it's seen on Outlook 2010. I can't find any element causing that white gap. Also tried to set the main container to black so maybe I could hide it but it's not getting the color at all.
I am trying to create a responsive two-column row (in a table) using media-queries for an email. Using the table align method from Mailchimp, it looks great on desktop and Android. On iPhone, the media query tells the "templatecolumnContainer" to display 100% width of the screen under 480px, but it only fills 50%. The other column container, does wrap underneath the image and stretch the width of the viewport.
Here's the media query -
#media only screen and (max-width: 480px) {
.templateColumnContainer2 {
display: block !important;
width:100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
And here's the two columns -
<table align="center" border="0" cellpadding="0" cellspacing="0" id="templateColumns" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: inline-block !important;padding-bottom: 15px;" width="750">
<tbody>
<tr>
<td align="center" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="templateColumnContainer2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: block !important;padding-bottom: 15px; padding-left: 15px;" width="360">
<tbody>
<tr>
<td class="leftColumnContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 21px; text-align: center;">
<img class="columnImage" src="image.jpg">
</td>
</tr>
</tbody>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" class="templateColumnContainer2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: block !important;padding-bottom: 15px; padding-left: 15px;" width="360">
<tbody>
<tr>
<td class="rightColumnContent" height="200" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 18px; text-align: left; padding-left: 15px;" valign="top">
<h3 style="color: #606060 !important; display: inline; font-family: Helvetica; font-size: 16px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 16px; margin: 0;text-align: left;">Header</h3>
<p>Some paragraph text</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I'd be eternally grateful if anyone can fill in whatever coding gap I'm omitting!! Thanks in advance.
This should do what you ask:
<!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>Untitled Document</title>
<style>
#media screen and (max-width: 750px) {
#templateColumns {
width: 100% !important;
}
.templateColumnContainer2 {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
}
</style>
</head>
<body width="100%" style="Margin: 0;">
<center style="width: 100%;">
<table cellspacing="0" cellpadding="0" border="0" align="center" width="750" style="margin: auto;" id="templateColumns">
<tr>
<td class="templateColumnContainer2" width="50%" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="leftColumnContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 21px; text-align: center;">
<img class="columnImage" src="image.jpg" width="100%" height="auto">
</td>
</tr>
</table>
</td>
<td class="templateColumnContainer2" width="50%" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="rightColumnContent" height="200" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 18px; text-align: left; padding-left: 15px;">
<h3 style="color: #606060 !important; font-family: Helvetica; font-size: 16px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 16px; margin: 0;text-align: left;">Header</h3>
<p>Some paragraph text</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
I'm not sure what parent HTML you have above this, but I included the <body> and <center>, and slightly rewrote the <table> markup + classes to achieve a responsive layout that stacks once the viewport dips below the <table>'s desktop width of 750px.
Someone please help! My company purchased an email template and all seemed well, but now they have requested that I make it so when the email is viewed as a web page at full size, it stays at the standard 660px. Every thing I have tried has resulted in either it resizing but no longer being responsive or vice versa. I know it's something simple, I know it's gotta be possible but I am just at a loss with this pre-purchased template. Any help to make this header media responsive but also only full size to 660 is appreciated. Code Below
</title>
<style type="text/css">
.Hasna html { width: 640px; }
.Hasna ::-moz-selection{background:#fefac7;color:#4a4a4a;}
.Hasna ::selection{background:#fefac7;color:#4a4a4a;}
.Hasna body { margin: 0; padding: 0; }
.Hasna .ReadMsgBody { width: 640px; background-color: #f1f1f1; }
.Hasna ExternalClass { width: 640px; background-color: #f1f1f1; }
.Hasna a { color:#eb7260; text-decoration: none; font-weight: normal; font-style: normal; }
.Hasna p, .Hasna div, .Hasna span { margin: 0 !important; }
.Hasna table { border-collapse: collapse;}
#media only screen and (max-width: 640px) {
body { width: auto !important;}
body table table{width:100% !important; }
body table[class="table-wrapper"] {width: auto !important; margin: 0px 20px !important;}
body table[class="table-inner"] {width: 100% !important; margin: 0 auto !important;}
body table[class="full"] {width: 100% !important; margin: 0 auto !important;}
body table[class="center"] {margin: 0 auto !important;}
body td[class="center"] {text-align: center !important;}
body td[class="rewrite_padding"] {padding:0px !important; border-left: none !important;}
body img[class="img_scale"] {width: 100% !important; height: auto !Important;}
body img[class="divider"] {width: 100% !important; height: 2px !Important;}
}
#media only screen and (max-width: 479px) {
body { width: auto !important;}
body table table{width:100% !important; }
body table[class="table-wrapper"] {width: auto !important; margin: 0px 20px !important;}
body table[class="table-inner"] {width: 100% !important; margin: 0 auto !important;}
body table[class="full"] {width: 100% !important; margin: 0 auto !important;}
body table[class="center"] {margin: 0 auto !important;}
body td[class="center"] {text-align: center !important;}
body td[class="rewrite_padding"] {padding:0px !important; border-left: none !important;}
body img[class="img_scale"] {width: 100% !important; height: auto !Important;}
body img[class="divider"] {width: 100% !important; height: 2px !Important;}
body td[class="one_third"] {width: 100% !important; display: block !important; padding-bottom: 20px; margin: 0 auto !important; text-align: center !important;}
body td[class="one_third_last"] {width: 100% !important; display: block !important; margin: 0 auto !important; text-align: center !important;}
}
</style><!--[if lt mso 14]>
<style type="text/css">
td span {
font-family: Arial, sans-serif;
}
td a {
font-family: Arial, sans-serif;
}
body {font-family: Arial, sans-serif !important;}
</style>
<![endif]-->
<!--[if mso 15]>
<style type="text/css">
td span {
font-family: Arial, sans-serif;
}
td a {
font-family: Arial, sans-serif;
}
body {font-family: Arial, sans-serif !important;}
</style>
<![endif]-->
</head>
<body style="background-color:#ffffff; margin:0; padding:0;">
<!-- START header -->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="100%" align="center">
<table ds-data-bg="1" bgcolor="#333333" class="ds-bg-module ele-active" width="100%" border="0" background="https://cs.homecity.com/images/email_icons/newsletterhouse2.jpg" align="center" style="">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="tile" src="https://cs.homecity.com/images/email_icons/r" color="#333333" ></v:fill>
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<tbody>
<tr>
<td valign="top" align="center">
<table class="table-wrapper" width="660" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="padding: 60px 20px;">
<table class="table-inner" width="640" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td valign="top">
<table class="full" width="640" border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<!-- START OF HEADER FOR LOGO & PREHEADER-->
<tbody>
<tr class="ds-remove" data-remove="ds-remove-1">
<td mc:edit="text_header" class="one_third" width="230" align="left" valign="middle" style=" margin: 0;font-weight: normal; font-size:14px ; color:#ffffff; font-family: 'Nunito', sans-serif; line-height: 18px;mso-line-height-rule: exactly;">
<multiline>
<span class="tea14-content-editable">Newsletter issue #1</span>
</multiline>
</td>
<td mc:edit="logo" class="one_third" width="180" align="center" valign="top" style="">
<span><img src="http://cdn3.homecity.com/inc/skins/pt-1r/schemes/homecity/img/homecity-new-white.png" editable="true" alt="logo" width="250" height="" border="0" style="display: inline-block; border-color: rgb(21, 177, 210); color: rgb(21, 177, 210);"></span>
</td>
<td mc:edit="forward" class="one_third_last" width="230" align="right" valign="middle" style=" margin: 0;font-weight: normal; font-size:14px ; color:#ffffff; font-family: 'Nunito', sans-serif; line-height: 18px;mso-line-height-rule: exactly;">
<multiline>
<span>Web version Forward</span>
</multiline>
</td>
</tr><!-- END OF HEADER FOR LOGO & PREHEADER-->
<!-- START OF HEADING-->
<tr class="ds-remove" data-remove="ds-remove-2">
<td mc:edit="heading" colspan="3" align="center" valign="middle" style="margin: 0; padding-top: 60px; padding-bottom: 20px; text-transform: uppercase; font-size:28px ; font-weight: normal; color:#ffffff; font-family: 'Nunito', Arial, sans-serif; line-height: 140%; mso-line-height-rule: exactly;">
<multiline>
<span class="tea14-content-editable">The Insider</span>
</multiline>
</td>
</tr><!-- END OF HEADING-->
<!-- START OF DIVIDER IMAGE-->
<tr class="ds-remove" data-remove="ds-remove-3">
<td mc:edit="div_header" colspan="3" align="center" valign="middle" style="margin: 0; padding-bottom: 20px; font-size:14px ; font-weight: normal; color:#ffffff; font-family: 'Nunito', Arial, sans-serif; line-height:100%;">
<span class="tea14-content-editable"><img src="images/heading-divider-img.png" editable="true" alt="heading-divider-img" width="195" height="15" border="0" style="display: inline-block;"></span>
</td>
</tr><!-- END OF DIVIDER IMAGE-->
<!-- START OF HEADING-->
<tr class="ds-remove" data-remove="ds-remove-4">
<td mc:edit="heading1" colspan="3" align="center" valign="middle" style="margin: 0; padding-bottom: 0; font-size:18px ; font-weight: 300; color:#ffffff; font-family: 'Nunito', Arial, sans-serif; line-height: 140%; mso-line-height-rule: exactly;">
<multiline>
<span class="tea14-content-editable">Hi! I hope you've been well, I've put together some things I thought you might find interesting this month... enjoy!</span>
</multiline>
</td>
</tr><!-- END OF HEADING-->
<!-- START OF BUTTON-->
<!-- END OF BUTTON-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr><!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table><!-- END header -->
Working with a background image can be tricky but this template you bought looks decent. I made a few edits that I think will solve your problem. In the nested table that includes the background image I gave it this style
<style="background-repeat:no-repeat; background-position:center;">
I also wanted that same effect to carry over into the outlook fix, so I changed the fill type to frame rather than tile:
<v:fill type="frame" src="https://cs.homecity.com/images/email_icons/r" color="#333333" ></v:fill>
Try this code in your body:
<body style="background-color:#ffffff; margin:0; padding:0;">
<!-- START header -->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="100%" align="center">
<table ds-data-bg="1" bgcolor="#333333" class="ds-bg-module ele-active" width="100%" border="0" background="https://cs.homecity.com/images/email_icons/newsletterhouse2.jpg" align="center" style="background-repeat:no-repeat; background-position:center;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="frame" src="https://cs.homecity.com/images/email_icons/r" color="#333333" ></v:fill>
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<tbody>
<tr>
<td valign="top" align="center">
<table class="table-wrapper" width="660" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="padding: 60px 20px;">
<table class="table-inner" width="640" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td valign="top">
<table class="full" width="640" border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<!-- START OF HEADER FOR LOGO & PREHEADER-->
<tbody>
<tr class="ds-remove" data-remove="ds-remove-1">
<td mc:edit="text_header" class="one_third" width="230" align="left" valign="middle" style=" margin: 0;font-weight: normal; font-size:14px ; color:#ffffff; font-family: 'Nunito', sans-serif; line-height: 18px;mso-line-height-rule: exactly;">
<multiline>
<span class="tea14-content-editable">Newsletter issue #1</span>
</multiline>
</td>
<td mc:edit="logo" class="one_third" width="180" align="center" valign="top" style="">
<span><img src="http://cdn3.homecity.com/inc/skins/pt-1r/schemes/homecity/img/homecity-new-white.png" editable="true" alt="logo" width="250" height="" border="0" style="display: inline-block; border-color: rgb(21, 177, 210); color: rgb(21, 177, 210);"></span>
</td>
<td mc:edit="forward" class="one_third_last" width="230" align="right" valign="middle" style=" margin: 0;font-weight: normal; font-size:14px ; color:#ffffff; font-family: 'Nunito', sans-serif; line-height: 18px;mso-line-height-rule: exactly;">
<multiline>
<span>Web version Forward</span>
</multiline>
</td>
</tr><!-- END OF HEADER FOR LOGO & PREHEADER-->
<!-- START OF HEADING-->
<tr class="ds-remove" data-remove="ds-remove-2">
<td mc:edit="heading" colspan="3" align="center" valign="middle" style="margin: 0; padding-top: 60px; padding-bottom: 20px; text-transform: uppercase; font-size:28px ; font-weight: normal; color:#ffffff; font-family: 'Nunito', Arial, sans-serif; line-height: 140%; mso-line-height-rule: exactly;">
<multiline>
<span class="tea14-content-editable">The Insider</span>
</multiline>
</td>
</tr><!-- END OF HEADING-->
<!-- START OF DIVIDER IMAGE-->
<tr class="ds-remove" data-remove="ds-remove-3">
<td mc:edit="div_header" colspan="3" align="center" valign="middle" style="margin: 0; padding-bottom: 20px; font-size:14px ; font-weight: normal; color:#ffffff; font-family: 'Nunito', Arial, sans-serif; line-height:100%;">
<span class="tea14-content-editable"><img src="images/heading-divider-img.png" editable="true" alt="heading-divider-img" width="195" height="15" border="0" style="display: inline-block;"></span>
</td>
</tr><!-- END OF DIVIDER IMAGE-->
<!-- START OF HEADING-->
<tr class="ds-remove" data-remove="ds-remove-4">
<td mc:edit="heading1" colspan="3" align="center" valign="middle" style="margin: 0; padding-bottom: 0; font-size:18px ; font-weight: 300; color:#ffffff; font-family: 'Nunito', Arial, sans-serif; line-height: 140%; mso-line-height-rule: exactly;">
<multiline>
<span class="tea14-content-editable">Hi! I hope you've been well, I've put together some things I thought you might find interesting this month... enjoy!</span>
</multiline>
</td>
</tr><!-- END OF HEADING-->
<!-- START OF BUTTON-->
<!-- END OF BUTTON-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr><!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table><!-- END header -->
</body>
I'm creating a responsive email design where several images switch out for the smaller screens. I've reformatted tables and tds several times and the smaller images don't show. The images are live online. Please help.
<!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>Happy St. Patrick's Day</title>
<style type="text/css">
body { margin: 0px; padding: 0px; }
#media only screen and (max-width: 660px) {
table.one { width: 480px !important; }
table.two { width: 480px !important; }
table.three { width: 480px !important; }
table.four { width: 480px !important; }
table.five { width: 480px !important; }
td.shamtop img { display: none; }
td.shamtop { background: #00A160 url(http://www.poscorp.com/emarketing/2015/images/top-shamrock-med.gif) no-repeat; height: 79px; }
td.shammid img { display: none; }
td.shammid { background: #00A160 url(http://www.poscorp.com/emarketing/2015/images/mid-shamrock-med.gif) no-repeat; height: 151px; }
td.maintext p {font-size: 26px; }
}
#media only screen and (max-width: 510px) {
table.one { width: 300px !important; }
table.two { width: 300px !important; }
table.three { width: 300px !important; }
table.four { width: 300px !important; }
table.five { width: 300px !important; }
td.shamtop img { display: none; }
td.shamtop { background: #00A160 url(http://www.poscorp.com/emarketing/2015/images/top-shamrock-sm.gif) no-repeat; height: 79px; }
td.shammid img { display: none; }
td.shammid { background: #00A160 url(http://www.poscorp.com/emarketing/2015/images/mid-shamrock-sm.gif) no-repeat; height: 89px; }
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="600" border="0" cellspacing="0" cellpadding="0" class="one" align="center">
<tr>
<td bgcolor="#00a160" class="shamtop" style="background: #00A160; margin: 0px;"><img src="http://www.poscorp.com/emarketing/2015/images/top-shamrock-lrg.gif" width="600" height="79"></td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="two">
<tr>
<td bgcolor="#ffffff" class="maintext" style="font-family: Arial, Helvetica, sans-serif; font-size: 32px; line-height:120%; color: #000; background: #FFF; padding: 15px 18px 10px 18px; font-weight:bold; text-align:center;"><p style="margin-top: 0px; margin-bottom: 16px;">In honor of St. Patrick’s Day we’d like to save you some <span style="color: #00a160;">GREEN</span>!</p></td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="three">
<tr>
<td class="shammid" bgcolor="#b7da63" style="background: #b7da63;"><img src="http://www.poscorp.com/emarketing/2015/images/mid-shamrock-lrg.gif" width="600" height="195"></td>
</tr>
<tr>
<td align="center" bgcolor="#b7da63" style="background: #b7da63; font-family: Arial, Helvetica, sans-serif; font-size: 17px; line-height:120%; color: #000; padding: 15px 20px 10px 20px; font-weight:bold; text-align:center;"><p style="font-size:22px; margin-top:0px; margin-bottom: 7px;">Enter to Win $200 Towards a NEW Print Item.</p>
<p style="margin-top:0px; margin-bottom: 0px;">All entries must be made by the end of day today. <br>
Five winners will be drawn.</p></td>
</tr>
<tr>
<td align="center" bgcolor="#b7da63" style="background: #b7da63; padding: 0px 20px 15px 20px; text-align:center;"><img src="http://www.poscorp.com/emarketing/2015/images/enter-to-win-btn.gif" width="180" height="45"></td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="four">
<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://www.poscorp.com/emarketing/2015/images/pos_logo_hc.gif" alt="POS Professional Office Services, Inc." width="272" height="45"></td>
</tr>
</table>
<table width="275" border="0" cellspacing="0" cellpadding="0" align="right" class="info">
<tr>
<td><p style="font-family: Arial, sans-serif; font-size: 14px; line-height: 100%; color: #333; font-weight:bold; margin:20px 0px 5px 0px; text-align:right;">800.331.4976 | www.poscorp.com | <img src="http://www.poscorp.com/emarketing/2015/images/linkedin.jpg" alt="LinkedIn" width="16" height="16" border="0" style="vertical-align:bottom;"/></p></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="five">
<tr>
<td align="center" valign="top" style="font-family: Arial, sans-serif; font-size: 12px; line-height:115%; color: #FFF; background: #00a160; padding: 5px 15px 5px 15px; margin:0px; font-style:italic;"><p>This offer is non-transferable and entries are limited to one entry per recipient.<br>
Contest winners will be notified by March 19th.</p></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html
Your html has a defined style which is overriding the css on your elements. For instance, changing:
<td class="shammid" bgcolor="#b7da63" style="background: #b7da63;">
<img src="http://www.poscorp.com/emarketing/2015/images/mid-shamrock-lrg.gif" width="600" height="195">
</td>
to
<td class="shammid" bgcolor="#b7da63">
<img src="http://www.poscorp.com/emarketing/2015/images/mid-shamrock-lrg.gif" width="600" height="195">
</td>
Yields the result you're looking for.
You should also consider removing the bgcolor attribute as it has been deprecated in HTML5.