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.
Related
I am new to email designing. I've an image, some text and a button in a row. When viewed on a mobile device, the image has to be static and the button need to come below the text. So the Image and the text + button has to be side by side. I've used divs and nested divs. Its working as expected on Mobile device. However, the layout is breaking on some web based mail clients such as AOL, Yahoo and Gmail. Working fine on comcast and outlook web. Not sure what I am doing wrong. Please help.
Correctly rendered on comcast web.
Incorrectly rendered on Yahoo web based mail.
Here is the code I've used :
#media screen and (max-width: 480px) {
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* What it does: Forces table cells into 1/3-width rows. */
.stack-column-half,
.stack-column-center-half {
display: inline-block !important;
width: 140px !important;
max-width: 140px !important;
direction: ltr !important;
}
/* What it does: Forces table cells into 2/3-width rows. */
.stack-column-2half,
.stack-column-center-2half {
display: inline-block !important;
width: 190px !important;
max-width: 190px !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
/* What it does: Adjust typography on small screens to improve readability */
.email-container p {
font-size: 17px !important;
}
<tr>
<!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. -->
<td dir="ltr" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px 0; background-color: #ffffff;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" style="width: 600px;">
<tr>
<td valign="top" width="200" style="width: 200px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 200px; min-width:80px; vertical-align:top; width:100%;" class="stack-column-half">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 0 10px 10px 10px;">
<img src="https://aishvaryarastogi.worldsecuresystems.com/waze-newsletter-images/Waze_Newsletter_Modules_Desktop_22.png" width="180" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 180px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; border-radius: 10px;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="400" style="width: 400px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px; " class="stack-column-2half mobile-padding1">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 0px 0; text-align: left;" class="center-on-narrow fallback-text mobile-padding1">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="400">
<tr>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding: 0 0px;" class="stack-column" align="left">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 0 20px;" class="mobile-padding1">
<h2 style="margin: 0 0 10px 0; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 18px; color: #333333; font-weight: bold;">John Smith</h2>
<p style="margin: 0 0 10px 0;">Title, title</p>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding-top:0 0px; " class="stack-column mobile-padding1">
<!-- Button : BEGIN -->
<!--[if mso]>
<v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="https://google.com/" style="height:45px;v-text-anchor:middle;width:150px;" arcsize="50%" stroke="false" fillcolor="#32C2EE">
<w:anchorlock/>
<center style="color:#333333;font-family:'Open Sans', Arial,sans-serif;font-size:15px;">Contact</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]> <!-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="float:none;" align="left">
<tr>
<td class="button-td button-td-primary" style="border-radius: 30px; background: #ffffff;">
<a class="button-a button-a-primary fallback-text" href="https://google.com/" style="background: #32C2EE; border: 0px solid #000000; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; font-weight: bold; line-height: 15px; text-decoration: none; padding: 18px 55px; color: #333333; display: block; border-radius: 30px;">Contact</a>
</td>
</tr>
</table>
<!-- <![endif]-->
<!-- Button : END -->
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- Thumbnail Left, Text Right : END -->
I had a play with your code and it seems you are missing width:100%; on the following line:
<div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px;" class="stack-column-2half mobile-padding1">
Once added, the contact link went back into the same line as John Smith and Title, title.
You can try the code below to see if it works for you. I had to add table codes around the table rows to get the rendering to work.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. -->
<td dir="ltr" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px 0; background-color: #ffffff;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" style="width: 600px;">
<tr>
<td valign="top" width="200" style="width: 200px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 200px; min-width:80px; vertical-align:top; width:100%;" class="stack-column-half">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 0 10px 10px 10px;">
<img src="https://aishvaryarastogi.worldsecuresystems.com/waze-newsletter-images/Waze_Newsletter_Modules_Desktop_22.png" width="180" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 180px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; border-radius: 10px;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="400" style="width: 400px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px;width:100%;" class="stack-column-2half mobile-padding1">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 0px 0; text-align: left;" class="center-on-narrow fallback-text mobile-padding1">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="400">
<tr>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding: 0 0px;" class="stack-column" align="left">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 0 20px;" class="mobile-padding1">
<h2 style="margin: 0 0 10px 0; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 18px; color: #333333; font-weight: bold;">John Smith</h2>
<p style="margin: 0 0 10px 0;">Title, title</p>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="middle" width="200">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding-top:0 0px; " class="stack-column mobile-padding1">
<!-- Button : BEGIN -->
<!--[if mso]>
<v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="https://google.com/" style="height:45px;v-text-anchor:middle;width:150px;" arcsize="50%" stroke="false" fillcolor="#32C2EE">
<w:anchorlock/>
<center style="color:#333333;font-family:'Open Sans', Arial,sans-serif;font-size:15px;">Contact</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]> <!-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="float:none;" align="left">
<tr>
<td class="button-td button-td-primary" style="border-radius: 30px; background: #ffffff;">
<a class="button-a button-a-primary fallback-text" href="https://google.com/" style="background: #32C2EE; border: 0px solid #000000; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; font-weight: bold; line-height: 15px; text-decoration: none; padding: 18px 55px; color: #333333; display: block; border-radius: 30px;">Contact</a>
</td>
</tr>
</table>
<!-- <![endif]-->
<!-- Button : END -->
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- Thumbnail Left, Text Right : END -->
</tbody>
</table>
thanks for helping me first of all.
I'm trying to format this email, but the link can not be put inside the container.
I do not know what properties I can use.
In html it works very well but when I see it in a mail client it does not work
<table width="650" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolr="#005daa" width="650px" bgcolor="#ffffff">
[imagen_1]
</td>
</tr>
<tr>
<td width="650" bgcolor="#FFFFFF" style="padding-right: 30px; padding-bottom: 20px; padding-left: 30px">
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #5c6670; text-align: left;">
[texto_1]
</p><br>
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #ed1b24; text-align: left; font-weight: bold">
<a style="text-decoration:none; margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #ed1b24; text-align: left; font-weight: bold"
href="https://{{ $_SERVER['HTTP_HOST'] }}/validating-email/{{$data->token}}">
CLICK HERE IN THE FOLLOWING LINK <br>TO CONFIRM YOUR MAIL
</a>
</p>
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #ed1b24; text-align: left; font-weight: bold">
and start enjoying great benefits.
</p>
</td>
</tr>
<tr>
<td>
<table width="550" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolr="#005daa" width="650px" bgcolor="#ffffff">
<a rel="nofollow" style="widh: 500px; word-break: break-all;">
https://dominio.com/confirm-email/eyJpdiI6IkhkWlp6NlVQSXcrd0R6WnVWXC9za1wvUT09IiwidmFsdWUiOiJ3WUwycEt5UFwvbU9IVnBnWDJYejNlem1MYytHcFhMSk56OFwvOGZUdmVhYzdRbUgyNEM5b0VkMlhkdlBFNGxrcGQiLCJtYWMiOiI4MmZkNjllZjI3MTNhMDhiNTU1NmRmZjhmNmFiNzljYWM3ZGY0N2UzZTFlZjA5MjlkNmY4MDc5NWY1OGYwMWRjIn0=
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
So it looks in the emails
I already try a thousand things and not one works.
you have some idea of how I can do so that the link is set and does not remain in a single line
<table width="650" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolr="#005daa" width="650px" bgcolor="#ffffff">
[imagen_1]
</td>
</tr>
<tr>
<td width="650" bgcolor="#FFFFFF" style="padding-right: 30px; padding-bottom: 20px; padding-left: 30px">
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #5c6670; text-align: left;">
[texto_1]
</p><br>
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #ed1b24; text-align: left; font-weight: bold">
<a style="text-decoration:none; margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #ed1b24; text-align: left; font-weight: bold"
href="https://{{ $_SERVER['HTTP_HOST'] }}/validating-email/{{$data->token}}">
CLICK HERE IN THE FOLLOWING LINK <br>TO CONFIRM YOUR MAIL
</a>
</p>
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #ed1b24; text-align: left; font-weight: bold">
and start enjoying great benefits.
</p>
</td>
</tr>
<tr>
<td>
<table width="550" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolr="#005daa" width="650px" bgcolor="#ffffff">
<a rel="nofollow" style="widh: 500px;">
https://dominio.com/confirm-email/eyJpdiI6IkhkWlp6NlVQSXcrd0R6WnVWXC9za1wvUT09IiwidmFsdWUiOiJ3WUwycEt5UFwvbU9IVnBnWDJYejNlem1MYytHcFhMSk56OFwvOGZUdmVhYzdRbUgyNEM5b0VkMlhkdlBFNGxrcGQiLCJtYWMiOiI4MmZkNjllZjI3MTNhMDhiNTU1NmRmZjhmNmFiNzljYWM3ZGY0N2UzZTFlZjA5MjlkNmY4MDc5NWY1OGYwMWRjIn0=
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Are you asking how to make an href work?
This is how a basic href works:
stackoverflow.com
In your case it should look like this:
<a href="https://dominio.com/confirm-email/eyJpdiI6IkhkWlp6NlVQSXcrd0R6WnVWXC9za1wvUT09IiwidmFsdWUiOiJ3WUwycEt5UFwvbU9IVnBnWDJYejNlem1MYytHcFhMSk56OFwvOGZUdmVhYzdRbUgyNEM5b0VkMlhkdlBFNGxrcGQiLCJtYWMiOiI4MmZkNjllZjI3MTNhMDhiNTU1NmRmZjhmNmFiNzljYWM3ZGY0N2UzZTFlZjA5MjlkNmY4MDc5NWY1OGYwMWRjIn0="
target="_blank" rel="nofollow" style="widh: 500px; word-break: break-all;">CLICK HERE IN THE FOLLOWING LINK<br />
TO CONFIRM YOUR MAIL<br />
and start enjoying great benefits.</a>
Or do this if you only want the url to link to the website:
<a href="https://dominio.com/confirm-email/eyJpdiI6IkhkWlp6NlVQSXcrd0R6WnVWXC9za1wvUT09IiwidmFsdWUiOiJ3WUwycEt5UFwvbU9IVnBnWDJYejNlem1MYytHcFhMSk56OFwvOGZUdmVhYzdRbUgyNEM5b0VkMlhkdlBFNGxrcGQiLCJtYWMiOiI4MmZkNjllZjI3MTNhMDhiNTU1NmRmZjhmNmFiNzljYWM3ZGY0N2UzZTFlZjA5MjlkNmY4MDc5NWY1OGYwMWRjIn0="
target="_blank">https://dominio.com/confirm-email/eyJpdiI6IkhkWlp6NlVQSXcrd0R6WnVWXC9za1wvUT09IiwidmFsdWUiOiJ3WUwycEt5UFwvbU9IVnBnWDJYejNlem1MYytHcFhMSk56OFwvOGZUdmVhYzdRbUgyNEM5b0VkMlhkdlBFNGxrcGQiLCJtYWMiOiI4MmZkNjllZjI3MTNhMDhiNTU1NmRmZjhmNmFiNzljYWM3ZGY0N2UzZTFlZjA5MjlkNmY4MDc5NWY1OGYwMWRjIn0=</a>
All of this can be on one line. I added the breaks to make it easier to see the code.
Good luck.
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.