I got problem with my email signature. It's not quite responsive. Responsive just for window resize but not for tool's developer chrome
here's files from dropbox
www.dropbox.com/sh/z09rlwphzdbzq5c/AABZu1NZCPZ_EEFOUzeAX3JZa?dl=0
.background{
background: url("https://image.ibb.co/cse3Jb/bg_car.png") center no-repeat;
}
div[class="wide-version-of-table"] { display:block; }
div[class="narrow-version-of-table"] { display:none; }
body { padding:0 !important; margin:0 !important; display:block !important; width:100% !important; background:#ffffff; -webkit-text-size-adjust:none }
#media only screen and (max-device-width: 500px), only screen and (max-width:500px) /* The maximum width for the mobile device version. */
{
div[class="wide-version-of-table"] { display:none; }
div[class="narrow-version-of-table"] { display:block; }
span[class='content-width-img'] img { width: 100% !important; height: auto !important; max-width: 480px !important; }
}
#media only screen and (max-device-width: 800px), only screen and (max-width: 800px) {
table[class='w320'] {
width: 100% !important;
}
th[class='column'] { float: left !important; width: 100% !important; display: block !important; }
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>CarSPA Email</title>
</head>
<body class="body" style="padding:0 !important; margin:0 !important; display:block !important; width:100% !important; background:#ffffff; -webkit-text-size-adjust:none">
<div class="wide-version-of-table">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th valign="top" align="center">
<table width="800" border="0" cellspacing="0" cellpadding="0" class="w320">
<tr>
<th>
<div >
<table cellpadding="0" cellspacing="0" border="0" style="font-size:12px; font-family: Arial; line-height: 17px;background: url(bg-car.png) right no-repeat;" width="100%">
<tr>
<td class="column">
<img src="https://image.ibb.co/cosCBw/zdjecie_01.png" style="padding-left: 5px;" alt="CarSPA - Właściciel"/>
</td>
<td class="column" width="90%" valign="top" style="padding-top: 30px;padding-bottom: 10px;padding-left: 20px;">
<p style="font-size:15px; font-weight: bold; color:#454545; margin: 0px; margin-bottom: 10px;">
Karol Nowak<br/>
<span style="font-weight: normal;">właściciel</span></p>
<p style="padding-top: 12px;font-size:15px;"><span style="font-weight: bold">cars warsaw</span><br/>
tel.kom. +48 555 555 555<br/>
email: emailadres<br/>
</p>
<p style="padding-top: 12px;font-size:15px;">
ul. Frontzka 2<br/>
77-577 Poland
</p>
</td>
<td class="column"align="right" style="position: relative; padding-right: 5px;">
<!--<img src="bg-car.png" alt="CarSpa - email"/>-->
<span><img src="https://image.ibb.co/cNkcdb/carspa_logo.png" alt="CarSpa - logo" style="margin-bottom: 13px;margin-top: 25px;"/>
</span>
<span><img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Facebook" style=""/>
</span>
<span><img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Instagram" style="padding: 0px 10px;"/>
</span>
<span><img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Youtube" style="padding-right: 0px"/>
</span>
</td>
</tr>
</table>
</div>
</th>
</tr>
</table>
</th>
</tr>
</table>
</div>
<div class="narrow-version-of-table">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th valign="top" align="center">
<table width="800" border="0" cellspacing="0" cellpadding="0" class="w320">
<tr>
<th>
<div >
<table cellpadding="0" cellspacing="0" border="0" style="font-size:12px; font-family: Arial; line-height: 17px;background: url(bg-car.png) right no-repeat;" width="100%">
<tr>
<td class="column">
<img src="zdjecie-01.png" style="padding-left: 5px;" alt="CarSPA - Właściciel"/>
</td>
<td class="column" width="90%" valign="top" style="padding-top: 30px;padding-bottom: 10px;padding-left: 20px;">
<p style="font-size:15px; font-weight: bold; color:#454545; margin: 0px; margin-bottom: 10px;">
Piotr Zawisza<br/>
<span style="font-weight: normal;">właściciel</span></p>
<p style="padding-top: 12px;font-size:15px;"><span style="font-weight: bold">CarSPA Gdynia</span><br/>
tel.kom. +48 505 505 999<br/>
email: piotr.zawisza#car-spa.pl<br/>
</p>
<p style="padding-top: 12px;font-size:15px;">
ul. Stryjska 11<br/>
81-507 Gdynia
</p>
</td>
</tr>
<tr>
<td class="column"align="right" style="position: relative;">
<!--<img src="bg-car.png" alt="CarSpa - email"/>-->
<span style="margin-left: 100%;">
<a href=""><img src="carspa-logo.png" alt="CarSpa - Logo" style="margin-bottom: 13px;margin-top: 25px;"/>
</a>
<span style="margin-left: 100%">
<img src="icon-fb.png" alt="CarSpa - Facebook" style=""/>
<img src="icon-ig.png" alt="CarSpa - Instagram" style="padding: 0px 10px;"/>
<img src="icon-yt.png" alt="CarSpa - Youtube" style="padding-right: 0px"/>
</span>
</span>
</td>
</tr>
</table>
</div>
</th>
</tr>
</table>
</th>
</tr>
</table>
</div>
</body>
</html>
https://codepen.io/zaraki12345/pen/RxOoZe
#media screen and (max-width: 768px), screen and (max-device-width: 768px) {
table[class="responsive_table"] {
width:100% !important;
}
table[class="responsive_table"] td {
height: auto !important;
}
table[id="emailContainer"] {
max-width: 600px !important;
width: 95% !important;
}
}
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" width="650" id="emailContainer">
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" width="100%" class="emasilBody">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="200" class="responsiveTable" align="left">
<tr>
<td align="center">
<img src="https://image.ibb.co/cosCBw/zdjecie_01.png" style="padding-left: 5px;" alt="CarSPA - Właściciel"/>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="200" class="responsiveTable" align="left">
<tr>
<td align="center">
<p style="font-size:15px; font-weight: bold; color:#454545; margin: 0px; margin-bottom: 10px;">Karol Nowak<br/><span style="font-weight:normal;">właściciel</span></p>
<p style="padding-top: 12px;font-size:15px;"><span style="font-weight: bold">cars warsaw</span><br/>tel.kom. +48 555 555 555<br/> email: emailadres</p>
<p style="padding-top: 12px;font-size:15px;">ul. Frontzka 2<br/>77-577 Poland</p>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="200" class="responsiveTable" align="left">
<tr>
<td align="center">
<p style="margin-top:0;"><img src="https://image.ibb.co/cNkcdb/carspa_logo.png" alt="CarSpa - logo" style="margin-bottom: 13px;"/>
</p>
<p><img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Facebook" /><img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Instagram" style="padding: 0px 10px;"/><img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Instagram" style="padding: 0px 10px;"/>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Related
I have an HTML email template that renders very well on all mail clients except the Outlook Desktop application. In the Outlook client, the image, as well as the table elements, are blown up in terms of size leading to a terribly formatted email being displayed. How should I address this issue so that it at least renders well on the Outlook desktop client? I am aware of using conditional logic to add dynamic pixel values depending on what client will be rendering the template but I need to know what styling changes I should make to make Outlook's rendering engine display the template properly. Below is the HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Click Source</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<style>
*{margin: 0; padding: 0;}
body{font-family: 'Montserrat', sans-serif;margin: 0; padding: 0;}
#media(max-width:767px){
h3{font-size: .75em !important;}
p{font-size: 10px !important;}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="max-width:600px; width: 100%; margin: 0 auto;">
<tr>
<td align="center" valign="top" id="bodyCell">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="top" valign="top">
<img src="https://clicksource.uk/static/images/head.jpg" alt="" style="width: 650px;"/>
</td>
</tr>
<tr>
<td valign="top" align="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 60%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #f5f5ef; padding: 12px; padding-left: 5px; padding-top: 45px;">
<tr>
<td style="width: 30%;">
<img src="https://clicksource.uk/static/images/mobile.jpg" alt="" style="width: 150px"/>
</td>
<td style="width: 50%; text-align: center;">
<h3 style="color: #a25140; font-size: 1.6em; font-weight: 800; margin: 0 0 10px 0;">GET ON THE
TOP 3 OF
GOOGLE
</h3>
<p style="color: #000; font-size: 13px; line-height: 1.5; font-weight: 500;">Hello, {{first_name}} {{last_name}}. It's essential to be at the top
of Google search results. If
your business isn't there,
you're losing potential
customers to your
competitors already in the
top 3.
</p>
</td>
</tr>
</table>
</td>
<td style="width: 40%; background: #f5f5ef;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #f5f5ef;">
<tr>
<td>
<img src="https://clicksource.uk/static/images/location.jpg" alt="" style="width: 250px;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 55%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #fff; padding: 20px 0 10px 0; text-align: center;" >
<tr>
<td style="width: 100%; text-align: center; padding: 15px;">
<h3 style="color: #a25140; font-size: 1.6em; font-weight: 800; margin: 0 0 15px 0;">GET YOUR BUSINESS
SHOWN ON GOOGLE
</h3>
<p style="color: #000; font-size: 13px; line-height: 1.5; font-weight: 500; margin: 0; padding: 0 15px;">Google Business Profile is another
crucial element for getting your
business in front of new customers! The
Google business platform allows
business owners greater control over
their information on Google search
results, specifically for their physical
location and service areas.
</p>
</td>
</tr>
</table>
</td>
<td style="width: 45%; padding-right: 10px;align-items: center;" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="text-align: center;">
<img src="https://clicksource.uk/static/images/local-seo-email-video-ph.PNG" alt="Promo vid" width="250px" height="132px"><br>
CLICKSOURCE.CO.UK
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="background: #0C2840; background-size: cover; background-position: center center">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="30" cellspacing="0" width="100%" style="align-items: center;">
<tr>
<td valign="top" style="padding: 15px; width: 20%;">
<img src="https://clicksource.uk/static/images/footer-icon-logo.png" alt="" style="width: 100px;"/>
</td>
<td valign="top" style="text-align: center; padding: 15px; width: 60%;">
<img src="https://clicksource.uk/static/images/footer-logo.jpg" alt="" style="width: 120px;"/>
<ul style="text-align: center; padding: 0; margin: 0;">
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/call.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> 020 3832 2400 </li>
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/website.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> www.clicksource.co.uk</li>
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/email.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> Hello#clicksource.co.uk</li>
<li style="display: inline-block; list-style: none;color:#fff; font-size: 10px;"><img src="https://clicksource.uk/static/images/location-icon.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> Cuffley Place, Sopers Road, EN6 4SG</li>
</ul>
</td>
<td valign="top" style="width: 20%;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I have a problem.
I'm using Node.JS nodemailer.
const url = `${url}`;
var mailOptions = {
from: 'stackoverflow',
to: email,
subject: 'test',
html: 'Please click this email to confirm your email: ${url}`'
};
The HTML is quite long. So I would have to link each line with
'Line1' +
'Line2' +
and unfortunately the uplines are shown an error see: align = 'center'
Is there a way to embed this HTML file simply and easily?
And if I can include the file separately I have created a variable and this should then be displayed in HTML. How would that work?
Can I somehow embed the file differently than directly in the code? I appreciate help!
This is my html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[SUBJECT]</title>
<style type="text/css">
body {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin:0 !important;
width: 100% !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
.tableContent img {
border: 0 !important;
display: block !important;
outline: none !important;
}
a{
color:#382F2E;
}
p, h1{
color:#382F2E;
margin:0;
}
p{
text-align:left;
color:#999999;
font-size:14px;
font-weight:normal;
line-height:19px;
}
a.link1{
color:#382F2E;
}
a.link2{
font-size:16px;
text-decoration:none;
color:#ffffff;
}
h2{
text-align:left;
color:#222222;
font-size:19px;
font-weight:normal;
}
div,p,ul,h1{
margin:0;
}
.bgBody{
background: #ffffff;
}
.bgItem{
background: #ffffff;
}
#media only screen and (max-width:480px)
{
table[class="MainContainer"], td[class="cell"]
{
width: 100% !important;
height:auto !important;
}
td[class="specbundle"]
{
width:100% !important;
float:left !important;
font-size:13px !important;
line-height:17px !important;
display:block !important;
padding-bottom:15px !important;
}
td[class="spechide"]
{
display:none !important;
}
img[class="banner"]
{
width: 100% !important;
height: auto !important;
}
td[class="left_pad"]
{
padding-left:15px !important;
padding-right:15px !important;
}
}
#media only screen and (max-width:540px)
{
table[class="MainContainer"], td[class="cell"]
{
width: 100% !important;
height:auto !important;
}
td[class="specbundle"]
{
width:100% !important;
float:left !important;
font-size:13px !important;
line-height:17px !important;
display:block !important;
padding-bottom:15px !important;
}
td[class="spechide"]
{
display:none !important;
}
img[class="banner"]
{
width: 100% !important;
height: auto !important;
}
.font {
font-size:18px !important;
line-height:22px !important;
}
.font1 {
font-size:18px !important;
line-height:22px !important;
}
}
</style>
<script type="colorScheme" class="swatch active">
{
"name":"Default",
"bgBody":"ffffff",
"link":"382F2E",
"color":"999999",
"bgItem":"ffffff",
"title":"222222"
}
</script>
</head>
<body paddingwidth="0" paddingheight="0" style="padding-top: 0; padding-bottom: 0; padding-top: 0; padding-bottom: 0; background-repeat: repeat; width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;" offset="0" toppadding="0" leftpadding="0">
<table bgcolor="#ffffff" width="100%" border="0" cellspacing="0" cellpadding="0" class="tableContent" align="center" style='font-family:Helvetica, Arial,serif;'>
<tbody>
<tr>
<td><table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" class="MainContainer">
<tbody>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="40"> </td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<!-- =============================== Header ====================================== -->
<tr>
<td height='75' class="spechide"></td>
<!-- =============================== Body ====================================== -->
</tr>
<tr>
<td class='movableContentContainer ' valign='top'>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="35"></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" align="center" class="specbundle"><div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<p style='text-align:center;margin:0;font-family:Georgia,Time,sans-serif;font-size:26px;color:#222222;'><span class="specbundle2"><span class="font1">Welcome to </span></span></p>
</div>
</div></td>
<td valign="top" class="specbundle"><div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<p style='text-align:center;margin:0;font-family:Georgia,Time,sans-serif;font-size:26px;color:#DC2828;'><span class="font">[CLIENTS.COMPANY_NAME]</span> </p>
</div>
</div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign='top' align='center'>
<div class="contentEditableContainer contentImageEditable">
<div class="contentEditable">
<img src="images/line.png" width='251' height='43' alt='' data-default="placeholder" data-max-width="560">
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td height='55'></td></tr>
<tr>
<td align='left'>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<h2 >Will this be your welcome email?</h2>
</div>
</div>
</td>
</tr>
<tr><td height='15'> </td></tr>
<tr>
<td align='left'>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<p >
Here’s what you can say: Thanks again for signing up to the newsletter! You’re all set up, and will be getting the emails once per week. Meanwhile, you can check out our <a target='_blank' href='#' class='link1' >Getting Started</a> section to get the most out of your new account.
<br>
<br>
Have questions? Get in touch with us via Facebook or Twitter, or email our support team.
<br>
<br>
Cheers,
<br>
<span style='color:#222222;'>Peter Parker</span>
</p>
</div>
</div>
</td>
</tr>
<tr><td height='55'></td></tr>
<tr>
<td align='center'>
<table>
<tr>
<td align='center' bgcolor='#1A54BA' style='background:#DC2828; padding:15px 18px;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;'>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<a target='_blank' href='#' class='link2' style='color:#ffffff;'>Activate your Account</a>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height='20'></td></tr>
</table>
</div>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height='65'>
</tr>
<tr>
<td style='border-bottom:1px solid #DDDDDD;'></td>
</tr>
<tr><td height='25'></td></tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" class="specbundle"><div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<p style='text-align:left;color:#CCCCCC;font-size:12px;font-weight:normal;line-height:20px;'>
<span style='font-weight:bold;'>[CLIENTS.COMPANY_NAME]</span>
<br>
[CLIENTS.ADDRESS]
<br>
<a target='_blank' href="[FORWARD]">Forward to a friend</a><br>
<a target="_blank" class='link1' class='color:#382F2E;' href="[UNSUBSCRIBE]">Unsubscribe</a>
<br>
<a target='_blank' class='link1' class='color:#382F2E;' href="[SHOWEMAIL]">Show this email in your browser</a>
</p>
</div>
</div></td>
<td valign="top" width="30" class="specbundle"> </td>
<td valign="top" class="specbundle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign='top' width='52'>
<div class="contentEditableContainer contentFacebookEditable">
<div class="contentEditable">
<a target='_blank' href="#"><img src="images/facebook.png" width='52' height='53' alt='facebook icon' data-default="placeholder" data-max-width="52" data-customIcon="true"></a>
</div>
</div>
</td>
<td valign="top" width="16"> </td>
<td valign='top' width='52'>
<div class="contentEditableContainer contentTwitterEditable">
<div class="contentEditable">
<a target='_blank' href="#"><img src="images/twitter.png" width='52' height='53' alt='twitter icon' data-default="placeholder" data-max-width="52" data-customIcon="true"></a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr><td height='88'></td></tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" width="40"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
You could simply keep your template-html in a file and use an arbitrary js-templating library (e.g. ejs) to parse the template data and render its html. Something like this should help you get started:
In your app.js do the following:
const fs = require('fs');
const eis = require('ejs');
const template = fs.readFileSync("/path/to/your/template.ejs");
const templateData = { url: `${url}`, otherDataYouNeedToSetInTemplate: "here" };
const renderedHtml = ejs.render(template, templateData};
const mailOptions = {
from: 'stackoverflow',
to: email,
subject: 'test',
html: renderedHtml
};
Then in your template.ejs you can access the properties from templateData and set its values in the html:
<!DOCTYPE html>
<html>
....
Please click this email to confirm your email: <%= url %>`
....
</html>
I'm having trouble getting an email blast to hide and display the h2 and ul tags. It works just fine in outlook and in most browser but on the iphone the display:block attribute is not respected. I also tried wrapping the content in a div tag and the attributes were ignored. Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WalkGreen™ Capabilities</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
#media (max-width: 767px) {
h2[class=hidden-xs], ul[class=hidden-xs] {
display: none !important;
}
}
/* Media Query for mobile */
#media screen and (max-width: 480px) {
h2[class=visible-xs], ul[class=visible-xs] {
display: block !important;
}
p[class=align-center]{text-align:left !important;}
/* This resizes tables and images to be 100% wide with a proportionate width */
table[class=emailwrap], img[class=emailwrap]{width:100% !important; height:auto !important;}
h2[class=mobile-pad]{padding-left:8px !important; padding-right:8px !important;}
img[class=logo-sm]{width:35%;}
img[class=img-mob]{width:90% !important; height:auto !important;}
img[class=mbl-icon]{width: 32px !important; height:32px !important;}
td[class=mbl-pad-1]{padding-left:16px !important; padding-right:16px !important;}
td[class=mbl-pad-2]{padding-left:16px !important; padding-right:16px !important; text-align:left !important;}
td[class=mbl-pad-3]{padding-top:16px;}
td[class=border-off]{border-bottom:0 !important;}
a[class=mbl-button]{webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding-top:10px !important; padding-right:10px !important; padding-bottom:10px !important; padding-left: 10px !important; font-size:18px !important;}
/* Hide stuff on mobiles */
table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}
td[class=emailcolsplit]{width:100%!important; float:left!important;}
a[class=emailmobbutton]{display:block !important;font-size:14px !important; font-weight:bold !important; padding:6px 4px 8px 4px !important; line-height:18px !important; background:#dddddd !important; border-radius:5px !important; margin:10px auto;width:70%; text-align:center; color:#111 !important; text-decoration:none; text-shadow:#fff 1px 0 0 ;}
/* This resizes body text for mobiles */
ul[class=emailbodytext],span[class=emailbodytext],a[class=emailbodytext] ,p[class=emailbodytext]{font-size:16px !important; line-height:21px !important;padding-right:16px !important;}
h2[class=emailh2],span[class=emailh2],a[class=emailh2]{font-size:22px !important; line-height:26px !important;}
td[class="mbl-header"]{padding-right:8px !important; padding-left:8px !important;}
}
</style>
</head>
<body style="background-color:#FFF;">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<!-- top disclaimer -->
<table class="emailnomob" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:10px; text-align:center; padding-top:8px; padding-right:8px; padding-bottom:8px; padding-left:8px; color:#999">
<span>TROUBLE SEEING SOMETHING? </span><a style="color:#999;" href="#">VIEW IT ONLINE</a> OR <a style="color:#999;" href="*|UNSUB|*">UNSUBSCRIBE</a>
</td>
</tr>
</table>
<!-- content begins -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td>
<!-- top banner -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<img class="emailwrap" src="images/top-banner2.gif" alt="Exotic Hardwood Decking, Rainscreen and Fencing" />
</td>
</tr>
</table>
<!-- 3 column content -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="mbl-pad-3">
<img src="images/products.gif" alt="Products" />
<h2 class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">Decking</h2>
<ul class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Angelyn <br/> (1” x 5.5”) (7/8” x 5.5”)<br/> </li>
<li>Cumaru <br/> (1” x 5.5”) (1” x 3.5”) (7/8” x 5.5”)<br/> </li>
<li>Espresso Garapa <br/> (7/8” x 5.5”)<br/> </li>
<li>Gold Garapa <br/> (1” x 5.5”) (7/8” x 5.5”)<br/> </li>
<li>Tigerwood <br/> (1” x 3.5”)<br/> </li>
</ul>
<h2 class="visible-xs" style="font-size:18px; font-family: Arial, sans-serif; display:none;"><span class="emailh2">Rainscreen & Siding</span></h2>
<ul class="visible-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px; display:none;">
<li class="emailbodytext">Profiling for any hidden siding fastener system</li>
</ul>
<h2 class="visible-xs" style="font-size:18px; font-family: Arial, sans-serif; display:none;"><span class="emailh2">Fencing</span></h2>
<ul class="visible-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px; display:none">
<li class="emailbodytext">Fence Boards</li>
</ul>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="images/milling.gif" alt="Milling" />
<h2 class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">Custom Milling</h2>
<ul class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Tongue & Groove</li>
<li>Siding Profiles</li>
<li>Edge Grooving for hidden fastening systems</li>
<li>Anti skid decking</li>
</ul>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="images/delivery.gif" alt="Delivery" />
<h2 class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">Options</h2>
<ul class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Large Volumes</li>
<li>LTL</li>
<li>Full Container or Trucks</li>
<li>Contractor Packs</li>
<li>Special Orders</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 2 column content -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<h2 class="hidden-xs" style="font-size:18px; font-family: Arial, sans-serif;">Rainscreen & Siding</h2>
<ul class="hidden-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Profiling for any hidden siding fastener system</li>
</ul>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<h2 class="hidden-xs" style="font-size:18px; font-family: Arial, sans-serif;">Fencing</h2>
<ul class="hidden-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Fence Boards</li>
</ul>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><p class="align-center" style="text-align:right; margin-top:0; margin-bottom:0;"><img src="images/logos.gif" alt="US Greenbuilding Council, Rainforest Alliance, FSC Certificate" /></p></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- species heading -->
<table style="background-color:#4982a5;" cellpadding="0" cellspacing="0" width="100%" align="center" >
<tr>
<td align="center">
<img src="images/species.gif" alt="Species" />
</td>
</tr>
</table>
<!-- species thumbnails -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/angelyn.jpg "width="110" height="119" alt="Angelyn" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Angelyn</h2>
</table>
</td>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/cumaru.jpg "width="110" height="119" alt="Cumaru" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Cumaru</h2>
</table>
</td>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/garapa.jpg "width="110" height="119" alt="Gold Garapa" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Gold Garapa</h2>
</table>
</td>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/espresso-garapa.jpg "width="110" height="119" alt="Espresso Garapa" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Espresso Garapa</h2>
</table>
</td>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/tigerwood.jpg "width="110" height="119" alt="Tigerwood" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Tigerwood</h2>
</table>
</td>
</tr>
</table>
<!-- species content -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<h2 class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">We Have Over 500,000 Lineal Ft. of stock on the ground at all times, ready for prompt shipment! </h2>
<p class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">WalkGreen™ maintains a philosophy of stewardship, product quality and client satisfaction by preserving forest ecology and forest-dependent communities while supporting responsible and legal forestry. WalkGreen™ remains competitively priced by holding the largest inventory of FSC® Exotic Hardwood Decking and Rainscreen in North America. </p>
<h2 class="emailh2"style="font-size:18px; font-family: Arial, sans-serif;">General Wood Specifications</h2>
<p class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">All wood is Export A grade, three side clear with minor defect down side. Kiln Dried to 12-15% moisture content. S4S E4E unless milled to specification. Random length 7-18 ft, odds and evens. 100% FSC® Certified</p>
</td>
</tr>
</table>
<!-- contact info -->
<table class="emailwrap" style="background-color:#fff; border-bottom: solid 1px #ccc;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td class="emailcolsplit" width="475" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top:12px; padding-bottom:12px;">
<h2 class="emailh2" style="font-size:15px; font-family: Arial, sans-serif; margin-top:0; margin-bottom:0;">Text</h2>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="125" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top:12px; padding-bottom:12px;">
<a style="margin-top:0; margin-bottom:0;" href="#"> <img src="images/facebook.gif" alt="Like us on Facebook" /></a>
<a style="margin-top:0; margin-bottom:0;" href="#"> <img src="images/web-graphic.gif" alt="WalkGreen Products Website" /></a>
<a style="margin-top:0; margin-bottom:0;" href="#"><img src="images/mail.gif" alt="Contact Us" /></a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- footer -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td class="emailcolsplit" width="250" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top:20px; padding-bottom:20px; padding-right:20px;">
<img src="images/walkgreen.gif" alt="WalkGreen Products" />
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="350" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top:20px; padding-bottom:20px;">
<p style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#999;">IF YOU NO LONGER WISH TO RECEIVE EMAILS PLEASE <a style="color:#999;" href="*|UNSUB|*">UNSUBSCRIBE</a><br/>
© 2015 WALKGREEN™ PRODUCTS, ALL RIGHTS RESERVED</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Bad Media Queries
You have bad queries. i.e. an iphone6 plus is max-device-width : 736px, therefore not satisfying the latter query! See media-queries-for-standard-devices.
If you wish to fix this issue, you must first define what size is xs. It's not enough just to say ALL mobile phones, as some mobile phones have VERY big screen and look like tablets! Iphone 6 Plus is a prime example of a big phone.
If I understand this correctly:
hidden-xs should hide the h2 only for below a certain screen width and visible for the rest
visible-xs should show the h2 only for below a certain screen width and hidden for the rest
e.g. If you define xs as a screen width <= 767px then your CSS should be:
#media screen and (max-width: 767px) {
/* styles for screen width <= 767px */
h2[class=hidden-xs], ul[class=hidden-xs] {
display: none;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: block;
}
}
#media screen and (min-width: 768px) {
/* screen width >= 768px */
h2[class=hidden-xs], ul[class=hidden-xs] {
display: block;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: none;
}
}
or simplified to (mobile-first approach):
h2[class=hidden-xs], ul[class=hidden-xs] {
display: none;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: block;
}
#media screen and (min-width: 768px) {
/* styles for screen width >= 768px */
h2[class=hidden-xs], ul[class=hidden-xs] {
display: block;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: none;
}
}
or desktop first approach
h2[class=hidden-xs], ul[class=hidden-xs] {
display: block;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: none;
}
#media screen and (max-width: 767px) {
/* styles for screen width <= 767px */
h2[class=hidden-xs], ul[class=hidden-xs] {
display: none;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: block;
}
}
Note: the !important is likely unnecessary
You could try creating a class to hide elements that will not show on a phone
#media only screen and (min-width: 320px) and (max-width: 768px){
.hide_phone{display: none;}
}
I have the following HTML:
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#C5C5C5">
<tr>
<td style="padding:10px 0">
<table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="left" class="center" style="padding:0px 0px 0 10px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><img width="230" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628618/image01_et7dqm.jpg" alt="" border="0" style="border-radius: 4px; width: 230px; display: block;" class="deviceWidth" /></p>
</td>
</tr>
</table>
<table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td style="font-size: 13px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:20px 0 20px 15px">
<table>
<tr>
<td valign="top" style="padding:0 10px 15px 0">
<img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/6.jpg" alt="" border="0" align="left" />
</td>
<td valign="middle" style="padding:0 10px 10px 0">Two column - text right
</td>
</tr>
</table>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0;padding:5px">
SOME TEXT ABOUT SOMETHING YET TO BE CONFIRMED
<br/><br/>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End 2 Column Images - text left -->
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td align="right">
<a href="#"><img width="20" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628617/triangle_C5C5C5_ks8sg2.jpg" alt="" border="0" style="border-radius: 0px; width: 20px; display: block;" class="deviceWidth" />
</td>
</tr>
</table>
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#E1E1E1">
<tr>
<td style="padding:10px 0">
<table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="left" class="center" style="padding:0px 0px 0 10px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><img width="230" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628616/image1.jpg" alt="" border="0" style="border-radius: 4px; width: 230px; display: block;" class="deviceWidth" /></p>
</td>
</tr>
</table>
<table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td style="font-size: 13px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:20px 0 20px 15px">
<table>
<tr>
<td valign="top" style="padding:0 10px 15px 0">
<img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/6.jpg" alt="" border="0" align="left" />
</td>
<td valign="middle" style="padding:0 10px 10px 0">Two column - text right
</td>
</tr>
</table>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0;padding:5px">
SOME TEXT YET TO BE CONFRMED
<br/><br/>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
which renders as follows
As you can see at the bottom I have a triangle which I'm trying to position so it overflows on to the next box, unfortunately I can not for the life of me get it to sit correctly, i.e the white space between the dark shade and lighter shade of gray to dis-appear can someone give me a hand please the end result is to look like this :
First of all it is recommended not to use tables for formatting page sections. In this case you can set the Parent of triangle as a relative positioned element with height of 0px and position triangle as absolute element. So:
<div class="deviceWidth" style="width:580px;position:relative;height:0;margin-right:auto;margin-left:auto;">
<img width="20" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628617/triangle_C5C5C5_ks8sg2.jpg" alt="" style="border:0;position:absolute;top:0;right:20px;border-radius: 0px; width: 20px;" class="deviceWidth">
</div>
also please note that :
remove the display:block from image
set border:0 inside styles not as a separate attribute
I have added margin-right:auto and margin-left:-auto to align div in center of screen
I'm designing an email campaign template for a client and running into an issue. Trying to set my mobile styles to font-size:100% important!; but there seems to be a sizing issue here. The only things affected are #requiredFooterText td, leadline td, #full td, and #paragraphText. It simply doesn't resize for mobile and I need it to 14px. Picture 1 is what I have and Picture 2 is what I want.
Picture 1 -
Picture 2 -
I've tried to force the the font-size out of percentages as well to 24 px instead of 14px. However, it cuts out mobile hero and footer image in the process.
Hopefully I've explained myself well enough. Code is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style data="noinline">
.appleLink a,
.appleLink {
color:#777777 !important;
text-decoration:none !important;
}
.appleLinkGray a,
.appleLinkGray {
color:#777777 !important;
text-decoration:none !important;
}
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
.aBn {
border-bottom: 0;
}
div #mainWrapper {width:100% !important;
table-layout:fixed !important;
}
body {
margin:0; !important
padding:0; !important
}
/* MOBILE STYLES */
#media only screen and (max-device-width: 480px) {
body[yahoo=yes] {
margin: 0 !important;
padding: 0 !important;
}
table[class=mobileHide],
td[class=mobileHide],
span[class=mobileHide] {
display: none !important;
}
div[class=mobileShow] {
display: block !important;
max-height: none !important;
}
table[class=mobileShow] {
display: table !important;
max-height: none !important;
}
a[class=mobileShow] {
display: inline !important;
max-height: none !important;
}
img[class=mobileShow] {
display: block !important;
max-height: none !important;
}
table[id=mainWrapper],
table[id=main],
table[id=headerWrapper],
table[id=leadlineWrapper],
table[id=heroMobile],
table[id=messageWrapper],
table[id=footerMobile]
div[id=logo] {
margin:0 auto !important;
width:100% !important;
}
table[id=heroMobile] img
table[id=footerMobile] img {
display: block !important;
height:auto !important;
width:100% !important;
}
td[id=requiredFooterText]
td[id=leadline]
div[id=paragraphText] {
font-size:100% !important;
}
td[id=full] {
display:block;
width:100%;
font-size:100% !important;
}
img[class=icon] {
width:180px;
height:160px;
margin-bottom:20px;
}
}
/* end MOBILE STYLES*/
</style>
<style>
/* DESKTOP STYLES */
.appleLink a,
.appleLink {
color:#555555 !important;
text-decoration:none !important;
}
.appleLinkGray a,
.appleLinkGray {
color:#555555 !important;
text-decoration:none !important;
}
.mobileShow,
.mobileShow img {
display: none !important;
max-height: 0;
}
img {
display:block;
border:0;
}
p {
margin:0;
padding:0;
display:inline;
}
table {
margin: 0 auto;
}
table td {
border-collapse:collapse;
}
#paragraphText {
color: #000000;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
}
#mainWrapper {
background: #dadada;
}
#main {
background: #ffffff;
}
#leadlineWrapper {
background: #333333;
}
#leadline {
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 1.25;
padding-bottom: 14px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
}
#messageBody {
padding:20px;
}
#messageBody a {
color: #d46128;
}
#bulletlist td {
vertical-align:top;
color: #000000;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
}
#logo {
background-color:#333333;
margin: 0 auto;
width:600px;
padding-top:20px;
padding-bottom:20px;
}
#requiredFooterText {
color: #555555;
font-family: Arial, sans-serif;
font-size: 10px;
line-height: 1.25;
padding-top: 30px;
text-align: center;
margin:0;
}
/* end DESKTOP STYLES*/
</style>
</head>
<body yahoo="yes" style="-webkit-text-size-adjust:none; margin: 0; padding:0;" bgcolor="#dadada">
<table id="mainWrapper" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<table id="headerWrapper" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table id="leadlineWrapper" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td class="ec_item" id="leadline">Get a premier education on Florida's Gulf Coast.</td>
</tr>
</table><!-- /#leadlineWrapper -->
</td>
</tr>
</table><!-- /#headerWrapper -->
<table id="main" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr>
<td class="ec_item" id="heroWrapper">
<table class="mobileHide" id="heroDesktop" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a href="cta" target="_blank">
<img src="" width="600" height="419" border="0" style="color: #262626; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table>
<!-- /#heroDesktop -->
<div class="mobileShow">
<table class="mobileShow" id="heroMobile" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a class="mobileShow" href="cta" target="_blank">
<img class="mobileShow" src="" width="320" height="226" border="0" style="color: #333333; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table><!-- /#heroMobile -->
</div>
</td>
</tr><!-- /hero -->
<tr>
<td id="messageContainer">
<table id="messageWrapper" width="590" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td style="text-transform: none;" id="messageBody">
<div class="ec_item" id="paragraphText">
<div width="100%" height="15"><img src="" /></div>
{First_name},<br /><br />
When you step onto the <strong>Blank</strong> campus, you know you've arrived somewhere special. In fact, we're one of only 40 schools featured in the book <em>Colleges That Change Lives</em>.
<div width="100%" height="15"><img src="" /></div>
<div width="100%" height="15"><img src="" /></div>
</div>
<table dir="rtl" id="bulletlist" width="100%">
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>188 acres of waterfront campus</strong> give you unlimited access to the living laboratory of the Gulf of Mexico. We offer an exhilarating academic experience and constantly strive toward inspiring you to THINK<strong>OUT</strong>SIDE.</p>
</td>
<td width="1%" id="full"><img src="" /></td>
<td width="1%" dir="ltr" id="full" class="ec_item">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet1 -->
<tr>
<td width="100%" height="15"></td>
</tr><!-- /spacing -->
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>40 majors and 45 minors</strong> allow you to pursue a range of interests. You can even self-design your own major.</p>
</td>
<td width="1%" id="full"><img src="" /></td>
<td width="1%" dir="ltr" id="full" class="ec_item">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet2 -->
<tr>
<td width="100%" height="15"></td>
</tr><!-- /spacing -->
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>96 percent of students</strong> receive some sort of financial aid, and individual merit scholarships of up to $19,000 are available.</p>
</td>
<td width="1%" dir="ltr" id="full"><img src="" /></td>
<td width="1%" dir="ltr" id="full" class="ec_item">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet3 -->
<tr>
<td width="100%" height="15" class="ec_item"></td>
</tr><!-- /spacing -->
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>Autumn Term</strong> is an immersive three-week experience led by an expert faculty mentor. Opening with the Ceremony of Lights, your first academic course is a special opportunity to transition to college-level learning while becoming a strong member of the community.</p>
</td>
<td width="1%" id="full" class="ec_item"><img src="" /></td>
<td width="1%" dir="ltr" class="ec_item" id="full">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet4 -->
</table>
<div class="ec_item" id="paragraphText">
<div width="100%" height="15"><img src="" /></div>
<div width="100%" height="15"><img src="" /></div>
<strong><u>Confirm your information</u></strong> to find out more ways encourages you to THINK<strong>OUT</strong>SIDE.
</div>
<div width="100%" height="15"><img src="" /></div>
</td><!-- /#messageBody -->
</tr>
</table><!-- /#messageWrapper -->
</td>
</tr>
<tr>
<td class="ec_item" id="footerContainer">
<table class="mobileHide" id="footerDesktop" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a href="cta" target="_blank">
<img src="" width="600" height="155" border="0" style="color: #262626; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table>
<!-- /#footerDesktop -->
<div class="mobileShow">
<table class="mobileShow" id="footerMobile" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a class="mobileShow" href="cta" target="_blank">
<img class="mobileShow" src="" width="320" height="144" border="0" style="color: #9c3022; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table>
<!-- /#footerMobile -->
</div>
</td>
</tr>
<tr>
<td>
<div class="ec_item" id="logo" align="center">
<a href="">
<img height="49" width="160" style="margin:20px;" src="" style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;" alt="" /></a>
</div>
</td>
</tr>
</tbody>
</table><!-- /#main -->
<table id="requiredFooter" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td id="requiredFooterText">
This message was sent to <span style="color:#333333;">{EMAIL}</span> by <span style="color:#333333;">{FROM_EMAIL}</span>.<br /><br />
=
We received your contact information from {CONTACT_SOURCE}.<br /><span style="color:#333333;">Unsubscribe</span> from future email communications from Office of Admission.<br /><br /><br />
</td>
</tr>
</table><!-- /#requiredFooter -->
</td>
</tr>
</table><!-- /#mainWrapper -->
</body>
</html>
What about css media queries?
As a reference https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries and
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can not have 2 style in your header.
When it is to an email template, I would advise you to make everything inline style and the things that need to be different on the phone must be in header #media, with a !important on. as shown in the example.
Hope it helps
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
#media only screen and (max-width: 480px) {
.paragraphText p {
font-size: 24px !important;
}
}
</style>
</head>
<body>
<div class="paragraphText">
<p style="color: #000000; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.5;"> Confirm your information</p>
</div>
</body>
</html>