I am using nodemailer to send email messages from my server (Node.js) and currently, i'm using this generic function:
// Generic Inner Function - Send Email
exports.sendEmail = function(email, message, emailType){
if((email)&&(message)&&(emailType)){
var subject;
if(emailType == "signUp")
subject = "Welcome to my site - 🙂";
if(emailType == "forgotPass")
subject = "Recovery Password from my site - 🔑";
if(emailType == "newResult")
subject = "We have Found New Results for you - đź›’";
if(emailType == "arrivedPrice")
subject = "Product Arrived - 🏴";
if(emailType == "tonePrice")
subject = "Product Arrived tone - 🏳️";
console.log("Send Email to: "+email+" / Email Type: "+emailType);
'use strict';
const nodemailer = require('nodemailer');
// create reusable transporter object using the default SMTP transport
let transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: 'tester#gmail.com',
pass: 'test'
}
});
// setup email data with unicode symbols
let mailOptions = {
from: '"tom 🏏" <tester#gmail.com>', // sender address
to: email, // list of receivers
subject: subject, // Subject line
text: message, // plain text body
html: '<b>'+message+'</b>' // html body
};
// send mail with defined transport object
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
return console.log(error);
}
console.log('Message %s sent: %s', info.messageId, info.response);
});
}
};
Now, I was creating a new HTML messages that I want to send according to the action the user is doing and I am struggling with how to do it.
I want to use Nodemailer to do this operation and I didn't find information over the web.
Sample of the HTML message:
<!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>A Simple Responsive HTML Email</title>
<style type="text/css">
body {margin: 0; padding: 0; min-width: 100%!important;}
img {height: auto;}
.content {width: 100%; max-width: 600px;}
.header {padding: 40px 30px 20px 30px;}
.innerpadding {padding: 30px 30px 30px 30px;}
.borderbottom {border-bottom: 1px solid #f2eeed;}
.subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;}
.h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;}
.h1 {font-size: 33px; line-height: 38px; font-weight: bold;}
.h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;}
.bodycopy {font-size: 16px; line-height: 22px;}
.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
.button a {color: #ffffff; text-decoration: none;}
.footer {padding: 20px 30px 15px 30px;}
.footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;}
.footercopy a {color: #ffffff; text-decoration: underline;}
#media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
body[yahoo] .hide {display: none!important;}
body[yahoo] .buttonwrapper {background-color: transparent!important;}
body[yahoo] .button {padding: 0px!important;}
body[yahoo] .button a {background-color: #00ae9d; padding: 15px 15px 13px!important;}
body[yahoo] .unsubscribe {display: block; margin-top: 20px; padding: 10px 50px; background: #2f3942; border-radius: 5px; text-decoration: none!important; font-weight: bold;}
}
/*#media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
.col425 {width: 425px!important;}
.col380 {width: 380px!important;}
}*/
</style>
</head>
<body yahoo bgcolor="#f6f8f1">
<table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table bgcolor="#ffffff" class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#c7d8a7" class="header">
<table width="70" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="70" style="padding: 0 20px 20px 0;">
<img class="fix" src="email/logoC.png" width="70" height="70" border="0" alt="" />
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col425" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 425px;">
<tr>
<td height="70">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="subhead" style="padding: 0 0 0 3px;">
Tester
</td>
</tr>
<tr>
<td class="h1" style="padding: 5px 0 0 0;">
Chasing For You
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class="innerpadding borderbottom">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h2">
Welcome to Cricket !
</td>
</tr>
<tr>
<td class="bodycopy">
We're so happy you have joined our family!!!
<br/>
We founded Tester because we wanted to create a trustworthy app
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="innerpadding borderbottom">
<table width="115" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="115" style="padding: 0 20px 20px 0;">
<img class="fix" src="email/testimonial-bg.jpg" width="115" height="115" border="0" alt="" />
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col380" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 380px;">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bodycopy">
Tester offers a Chrome extension that lets you set a.
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0;">
<table class="buttonwrapper" bgcolor="#00ae9d" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="button" height="45">
GET THE EXTENSION
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class="innerpadding borderbottom">
<table width="115" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="115" style="padding: 0 20px 20px 0;">
<img class="fix" src="email/mobile.jpg" width="115" height="115" border="0" alt="" />
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col380" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 380px;">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bodycopy">
Tester is also offers an Android App that lets you.
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0;">
<table class="buttonwrapper" bgcolor="#00ae9d" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="button" height="45">
GET THE APP
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class="innerpadding borderbottom">
<img class="fix" src="email/coffee3.jpg" width="100%" border="0" alt="" />
</td>
</tr>
<!--
<tr>
<td class="innerpadding bodycopy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
-->
<tr>
<td class="footer" bgcolor="#44525f">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="footercopy">
® Copyright © 2017 - Designed & Developed by Cricket Team <br/>
<font color="#ffffff">Unsubscribe</font>
<span class="hide">from Test newsletter</span>
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0 0 0;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="37" style="text-align: center; padding: 0 10px 0 10px;">
<a href="http://www.facebook.com/">
<img src="email/facebook.png" width="37" height="37" alt="Facebook" border="0" />
</a>
</td>
<td width="37" style="text-align: center; padding: 0 10px 0 10px;">
<a href="http://www.twitter.com/">
<img src="email/twitter.png" width="37" height="37" alt="Twitter" border="0" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
Related
The following code has several issues when sending all Html5 newsletters I coded.
I received footer code from the client, but it seems that it doesn't work more.
Remaining parts of the newsletters works well.
I copied an empty template mail I usually use to code my htmls.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>xxxxxx/title>
<style>
ul {
list-style-position: inside;
padding-left: 0;
}
a {
color: inherit !important;
text-decoration: none !important;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.content {
width: 100%;
max-width: 600px; !important
}
/* GENERAL STYLE RESETS */
body, #bodyTable { height:100% !important; width:100% !important; margin:0 !important; padding:0 !important; }
table, td { border-collapse:collapse; }
.hyphenate {
/* Careful, this breaks the word wherever it is without a hyphen */
overflow-wrap: break-word;
word-wrap: break-word;
/* Adds a hyphen where the word breaks */
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
/*remove blue links for iOS*/
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;}
#media only screen and (max-width: 480px) {
/* MUESTRA ENLACE EN MOVIL */
.bloque{width: 100%; display: block!important; height: 40px!important; vertical-align: middle!important}
.bloque2{width: 100%; display: block!important; vertical-align: middle!important}
.bloque2 table{width: 100% !important;}
table.body {float:left;width:100% !important;padding:0;font-size:13px !important}
.ancho{width:100% !important}
.ancho2{width:100% !important;text-align:center !important}
.ancho3{width:33% !important;margin-bottom:12px !important}
.ancho3_2{width:25% !important;margin-bottom:12px !important}
.anchotlfn{width:26% !important;margin-bottom:12px !important}
.ancho4{width:98% !important}
.anchon{width:50% !important}
.separa{ padding:8px 0 !important}
.iber{margin:20px 0 0 25% !important}
.logo{width:40% !important}
.logo2{width:76% !important}
td.izqui{text-align:left !important}
.verde{width:100% !important;font-size:14px !important}
.gg{width:100% !important;font-size:18px !important}
.verde2{width:100% !important;font-size:13px !important}
.oculto{display:none !important}
.pie{line-height:auto !important;font-size:11px !important}
.pdtop{padding-top:10px!important}
.pdbot{padding-bottom:10px!important}
.pe{width:80% !important;padding-top:3px !important}
.alto{ height:10px !important;}
.centrado{text-align:center !important; padding:5px 0 20px 0 !important;}
.nopad{padding-left: 0px !important}
.izq{text-align:left !important; float:left !important}
}
</style>
</head>
<body bgcolor="#FFFFFF" style="font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#000511">
<!--[if mso]>
<table width="600" border="0" align="center" margin bgcolor="#ffffff" cellpadding="0" cellspacing="0">
<tr>
<td>
<![endif]-->
<table class="content" width="100%" border="0" align="center" bgcolor="#5c881a" cellpadding="0" cellspacing="0" style="margin: 0 auto">
<tr>
<td bgcolor="#FFFFFF"><table width="550" border="0" cellspacing="0" cellpadding="0" class="ancho">
<tr>
<td width="24"> </td>
<td width="502"><table width="75%" border="0" cellspacing="0" cellpadding="0" class="ancho" align="left">
<tr>
<td> </td>
</tr>
<tr>
<td style="color:#262626;font-size:12px;font-family:Arial,Helvetica,sans-serif">Se non riesci a visualizzare correttamente il messaggio, clicca qui</td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="15" class="ancho">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/xxx.jpg" width="100%" border="0" alt="a"></td>
</tr>
<tr>
<td><img src="img/bordo-top.gif" width="100%" border="0" style="display: block;"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="45">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="justify" style="color:#5c881a;font-size:16px;font-family:Arial,Helvetica,sans-serif; line-height: 23px; text-align: justify;">test
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="img/bordo.gif" width="100%" border="0" style="display: block;"></td>
</tr>
<tr>
<td>
<br>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr bgcolor="#5d881a">
<td width="160" height="60" valign="middle" bgcolor="#5d881a" class="bloque pdtop"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="43"><img src="img/tel.gif"></td>
<td valign="middle"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
xxx xxx xxx</td>
</tr>
</tbody>
</table>
</td>
<td width="140" height="60" valign="middle" bgcolor="#5d881a" class="bloque"
style="text-align: left; width:140px; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="43"><img src="img/sito.gif"></td>
<td valign="middle"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
<a href="" target="_blank"
style="color: #ffffff; text-decoration: none">xxxxxxxxx.it</a>
</td>
</tr>
</tbody>
</table>
</td>
<td width="255" height="60" valign="middle" bgcolor="#5d881a" class="bloque"
style="text-align: left; width:255px; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif" >
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="43"><img src="img/mail.gif"></td>
<td valign="middle"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
<a style="color: #ffffff; text-decoration: none"
href="mailto:servizioclienti#iberdrola.it">servizioclienti#xxxxxxxxx.it</a>
</td>
</tr>
</tbody>
</table>
</td>
<td height="60" width="110" valign="middle" bgcolor="#5d881a" class="bloque pdbot"
style="text-align: left; width:110px; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="46"><a href="https://www.facebook.com/xxxxxxxxx/"
target="_blank"><img src="img/fb.gif" border="0"></a></td>
<td width="46"><a href="https://twitter.com/xxxxxxxxx" target="_blank"><img
src="img/tw.gif" border="0"></a></td>
<td><a href="https://www.instagram.com/xxxxxxxxx/" target="_blank"><img
src="img/ig.gif" border="0"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr><td><img src="img/line.gif" width="100%"></td></tr>
<tr><td style="text-align: left; color:#ffffff;font-size:14px;font-family:Arial,Helvetica,sans-serif"><br><br>XXXXX</td></tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<tr>
</table>
<![endif]-->
</body>
</html>
expected mobile visualization screenshot
actual visualization when the mail is sent
Desktop visualization
The more content I add the bigger the white spaces are. I tested this theory when I started deleting sections and noticed the spacing got smaller. My email is way bigger then this btw, this is just a snippet. This sucks because there's a deadline for this tomorrow for me to submit so any help would be appreciated
<body style="Margin:0;padding:0;min-width:100%;background-color:#FFFFFF;">
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body {background-color:#dde0e1!important;}
body, table, td, p, a {font-family: sans-serif, Arial, Helvitica!important;}
</style>
<![endif]-->
<center style="width: 100%;table-layout: fixed;background-color:#FFFFFF;padding-bottom: 40px;">
<div style="max-width: 600px;background-color: #fafdfe;box-shadow: 0 0 10px rgba(0, 0, 0, .2);">
<div style="font-size: 0px;color: #953192;line-height: 1px;mso-line-height-rule:exactly;display: none;max-width: 0px;max-height: 0px;opacity: 0;overflow: hidden;mso-hide:all;">
A Follow up to our conversation
</div>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-spacing:0;">
<tr>
<td style="padding:0;">
<![endif]-->
<table align="center" style="border-collapse:collapse; table-layout:fixed; border-spacing:0;font-family: 'Raleway', Arial, sans-serif, Helvitica!important;background-color: #FFFFFF;Margin:0;padding:0;width: 100%;max-width: 600px;" role="presentation">
<!-- START LOGO -->
<tr>
<td style="padding: 0;Margin: 0;">
<table align="center" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-spacing: 0;background-color: #fafdfe;" role="presentation">
<tr>
<td style="text-align: center;">
<div>
<img style="display: block; line-height: 0;" src="http://ibb.co.com/images/Oxbryta_Main_Banner4cae03d152df13c8.jpg" width="600" border="0" alt="Fashion Nova Logo" title="Brand Logo">
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- END LOGO -->
<!-- START SHOWCASE -->
<tr>
<td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;">
<tr>
<td width="100%" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0; max-width: 600px;" role="presentation">
<tr>
<td style="padding-top:0;padding-bottom:0;width:100%;max-width:600px;text-align:center; line-height: 0;">
<div>
<img align="top" src="http://ibb.co.com/images/Showcased30db973e177738b.jpg" alt="logo" width="600" style="border-width:0;display: block; " border="0">
</div>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- SHOWCASE -->
<!-- START SHOWCASE FOOTER -->
<tr>
<td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0; background-color: #953192;">
<table width="100%" style="border-spacing:0; max-width: 600px;" role="presentation">
<td style="text-align: center; padding-top: 16px; padding-bottom: 16px; border-right: 1px solid #FFFFFF;">
<a style="text-decoration: none; font-weight: bold; font-size: 14px; color: #FFFFFF;Margin:0;padding: 0;" href="https://www.google.com">Important Safety Information</a>
</td>
<td style="text-align: center; padding-top: 16px; padding-bottom: 16px; ">
<a style="text-decoration: none; font-weight: bold; font-size: 14px; color: #FFFFFF; Margin: 0; padding: 0;" href="https://www.google.com">Full Prescribing Information</a>
</td>
</table>
</td>
</tr>
<!-- END SHOWCASE FOOTER -->
<!-- START CUSTOMER CONTENT -->
<tr>
<td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td class="padding content" style="padding-top:28px;padding-right:47px;padding-bottom:15px;padding-left:48px;width:100%;text-align:left;">
<p style="color:#000000;font-size:16px;font-weight: 500; color: #333;">Dear</p>
<p style="color:#000000;font-size:16px;font-weight: 500; color: #333;">Thank you for meeting with me to talk about Oxbryta. The materials below may help your patients as they start their treatment journey on Oxbryta.</p>
<p style="color:#000000;font-size:16px;font-weight: 500;color: #333;">You can find links to the resources we discussed below. If you have any questions, please don't hesitate to reach out.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END CUSTOMER CONTENT -->
<!-- START 1ST TWO COLUMNS ROW 1 -->
<tr>
<td style="padding-top:35px;padding-right:0;padding-bottom:15px;padding-left:0;">
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td class="two-columns" style="padding-right:0;padding-left:0;font-size:0;text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td width="280" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<![endif]-->
<table class="column" style="border-spacing:0;vertical-align:top;width:100%;max-width:280px;display:inline-block;" role="presentation">
<tr>
<td class="padding" style="padding-top: 0;padding-right: 0;padding-bottom: 20px;padding-left: 52px;">
<table class="content" style="border-spacing:0;text-align: left;" role="presentation">
<tr>
<td>
<img src="http://ibb.co.com/images/01_columnafad21be3a944f8d.jpg" width="280" alt="" style="border-width:0;width:100%;max-width:280px;height:auto;display:block;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td><td width="320" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<![endif]-->
<table class="column" style="border-spacing:0;vertical-align:top;width:100%;max-width:320px;display:inline-block;" role="presentation">
<tr>
<td class="padding" style="padding-top: 0;padding-right: 43px;padding-bottom: 0px;padding-left: 0;">
<table class="content" style="border-spacing:0;text-align: left;" role="presentation">
<tr>
<td style="padding-top: 0;padding-right: 10px;padding-bottom: 20px;padding-left: 0;">
<p style="font-size: 22px;font-weight: bold; color: #953192; Margin: 0;padding-bottom: 20px;">Getting Started on Oxbryta Brochure</p>
<p style="font-size: 15px; font-weight: 600; margin: 0; padding-bottom: 0px;">A guide to help educate your patients about Oxbryta. what to expect during the first 30 days, and points of discussion for follow-up appointments</p>
</td>
</tr>
<tr>
<td align="left" style="margin-right: 62px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-spacing:0;">
<tr>
<td align="center" style="border-radius:4px;" bgcolor="#277fd2">
<a href="https://www.google.com" target="_blank"><img src="http://ibb.co.com/images/Download_bannerdbaadb5db3d11822.jpg" alt="">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<!-- 1ST END TWO COLUMNS ROW 1 -->
All:
When I include a header navigation bar which is made up of inline jpegs in my html email, the fonts in the rest of the email render incredibly small regardless of my media queries. When I remove the header bar they render fine.
So there is something about the way that I have built the header that is causing this weird issue and I have tried every possible (in my mind) permutation and can't find a fix. Help would be much appreciated.
Here are screen shots of the mobile email with and without the header.
https://ibb.co/g1i9vH
https://ibb.co/fy8W9c
And here is my code:
<!-- Helm Email Template -->
<!DOCTYPE html>
<html>
<head>
<title>*|MC:SUBJECT|*</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">
/* 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;
}
/* MEDIA QUERIES */
#media screen and (max-width: 480px) {
.mobile-hide {
display: none !important;
}
.mobile-center {
text-align: center !important;
}
.text-resp {
font-size: 14px!important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
</style>
<body style="margin: 0 !important; padding: 0 !important; background-color: #ffffff;" bgcolor="#ffffff">
<!-- HIDDEN PREHEADER TEXT -->
<div style="display: none; font-size: 1px; color: #ffffff; line-height: 1px; font-family: Open Sans, Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus dolor aliquid omnis consequatur est deserunt, odio neque blanditiis aspernatur, mollitia ipsa distinctio, culpa fuga obcaecati!
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<!-- Start Header -->
<tr>
<td align="center" style="width: background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="red" height="30">
<tr>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width:99px;" src="https://image.ibb.co/bODCyS/header_menu_men.png" alt="Men">
</td>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width:122px;" src="https://image.ibb.co/gSEwQ7/header_menu_women.png" alt="Women">
</td>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width: 148px;" src="https://image.ibb.co/gc0357/header_logo.png" alt="Helm">
</td>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width: 123px;" src="https://image.ibb.co/iEU7Xn/header_menu_supply.png" alt="Supply">
</td>
<td align="center" style="line-height:0px;">
<img style="display:block; line-height:0px; font-size:0px; border:0px; width: 108px;" src="https://image.ibb.co/nMdedS/header_menu_sale.png" alt="Sale">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Header -->
<!-- Start Spacer -->
<tr>
<td height="40" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Section 1: Hero Image -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; text-align: center; display:block; line-height:0px; font-size:0px; border:0px; width: 100%;" src="https://image.ibb.co/iTNSXn/content_image_1.jpg" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 1: Hero Image -->
<!-- Start Section 2: Proof Point #1 Image -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; text-align: center; display:block; line-height:0px; font-size:0px; border:0px; width: 100%;" src="https://image.ibb.co/bRxrqH/helm_email_1_section_2_img_1.png" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #1 Image -->
<!-- Start Section 2: Proof Point #1 Copy -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<p class="text-resp" style="font-family:Georgia, Helvetica, Arial; font-size:16px; color:#3d3d3d; line-height:30px;" mc:edit="Paragraph">
HELM boots don’t complete your look, they make it. Every pair has been designed with simplicity in mind, making them perfect for every style and occasion.
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #1 Copy -->
<!-- Start Section 2: Proof Point #2 Image -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; text-align: center; display:block; line-height:0px; font-size:0px; border:0px; width: 100%;" src="https://image.ibb.co/b1zkjc/helm_email_1_section_2_img_2.png" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #2 Image -->
<!-- Start Section 2: Proof Point #2 Copy -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="90%" style=" width: 90%; max-width:400px;">
<tr>
<p class="text-resp" style="width: 90%; max-width:400px; font-family:Georgia, Helvetica, Arial; font-size:16px; color:#3d3d3d; line-height:30px;" mc:edit="Paragraph">
Reliable boots that look good are hard to come by. We combine a timeless aesthetic with the best materials on earth to create boots that are designed to fit your style for years to come.
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #2 Copy -->
<!-- Start Section 2: Proof Point #3 Image -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; text-align: center; display:block; line-height:0px; font-size:0px; border:0px; width: 100%;" src="https://image.ibb.co/hjN2xx/helm_email_1_section_2_img_3.png" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #3 Image -->
<!-- Start Section 2: Proof Point #3 Copy -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="90%" style=" width: 90%; max-width:400px;">
<tr>
<p class="text-resp" style="width: 90%; max-width:400px; font-family:Georgia, Helvetica, Arial; font-size:16px; color:#3d3d3d; line-height:30px;" mc:edit="Paragraph">
We want you to love your first pair of HELM boots. We offer free shipping and free exchanges until you find that perfect pair. And of course, returns are on us too.
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 2: Proof Point #3 Copy -->
<!-- Start Spacer -->
<tr>
<td height="80" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Section 3: Video -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img class="g-img" style="margin-left: auto; margin-right: auto; display:block; line-height:0px; font-size:0px; border:0px; width: 100%; max-width: 600px;" src="https://image.ibb.co/huJZCn/content_image_2.jpg" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 3: Video -->
<!-- Start Spacer -->
<tr>
<td height="40" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Section 3: Video Copy -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="90%" style=" width: 90%; max-width:400px;">
<tr>
<p class="text-resp" style="width: 90%; max-width:400px; font-family:Georgia, Helvetica, Arial; font-size:16px; color:#3d3d3d; line-height:30px;" mc:edit="Paragraph">
Some say clothes make the man, we think it’s the boots. Our boots give men confidence from the ground up, confidence to take steps they’ve never taken before.
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 3: Video Copy -->
<!-- Start Spacer -->
<tr>
<td height="80" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Section 4: Shop Muller Teak -->
<tr>
<td align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center">
<img style="margin-left: auto; margin-right: auto; display:block; line-height:0px; font-size:0px; border:0px; max-width: 450px; width: 100%" src="https://image.ibb.co/m9QZdS/content_image_3.jpg" alt="img">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Section 4: Shop Muller Teak -->
<!-- Start Spacer -->
<tr>
<td height="80" bgcolor="#ffffff"></td>
</tr>
<!-- End Spacer -->
<!-- Start Footer Jargon -->
<tr>
<td align="left" style="background-color: #ffffff;" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="90%" style=" width: 90%; max-width:400px;">
<tr>
<p style=" padding: 0 5%; width: 90%; max-width:600px; font-family:Georgia, Helvetica, Arial; font-size:14px; color:#3d3d3d; line-height:22px;" mc:edit="Paragraph">
Copyright © 2018 HELM Boots. All rights reserved.<br>You are receiving this email because you signed up at www.helmboots.com
</p>
<p style=" padding: 0 5%; width: 90%; max-width:600px; font-family:Georgia, Helvetica, Arial; font-size:14px; color:#3d3d3d; line-height:22px;" mc:edit="Paragraph">
HELM Boots<br> 1200 East 11th St. <br>Suite 101 <br>Austin, TX 78701
</p>
<p style=" padding: 0 5%; width: 90%; max-width:600px; font-family:Georgia, Helvetica, Arial; font-size:14px; color:#3d3d3d; line-height:22px;" mc:edit="Paragraph">
<a style="text-decoration: none; color: #3d3d3d;" href="*|UNSUB|*">Unsubscribe from this list</a> <a style="text-decoration: none; color: #3d3d3d;" href="#">Update subscription preferences</a>
</p>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- End Footer Jargon -->
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
I have a text table and an image table split into two columns on desktop. The image is set to only show on desktop, and not mobile. I need the text table to stay left-aligned on desktop, but center on the page on mobile, with the text remaining left-aligned for both displays.
Here’s what I’ve tried so far:
Adding spacer bars to each side of the text box to push it to the center, but then it was squeezing the box and extending it vertically since the width is fixed. I tried removing the fixed width property and using a fluid, percentage-based width, but then that caused the 2-column layout to break in desktop.
Using media queries to create a totally separate block that only populates on mobile. This worked well for most of the email clients, but for some reason, outlook wasn’t hiding the “mobile block” and so both of them were showing up and breaking the layout.
Using a fluid, percentage-based margin CSS property on the box. I ran into the “squeezing” issue here again, like with attempt #1.
Using a media query to add different amount of padding to the sides of the box to push it to the front. Again, rain into the squeezing issue like with attempts #1 and #3.
Using a media query with the CSS “Text-align” property instead of the HTML “align” property. This also broke the two column layout in desktop.
Nesting the table in another table, and playing with the alignment of both of the involved tables. This didn’t change anything, except breaking the two-column layout when one of the tables wasn’t left-aligned.
Here's my code:
<style type="text/css">
body {
margin: 0 !important;
padding: 0 !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0px;
mso-table-rspace: 0px;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.em_grey a {
color: #797979 !important;
text-decoration: none !important;
}
span.MsoHyperlink {
mso-style-priority: 99;
color: inherit;
}
span.MsoHyperlinkFollowed {
mso-style-priority: 99;
color: inherit;
}
/*Stylesheed for the devices width between 481px to 599px*/
#media only screen and (min-width:481px) and (max-width:599px) {
.em_wrapper {
width: 100% !important;
}
.em_aside {
padding: 0px 17px !important; /*Update the values as required*/
}
.em_aside1 {
padding: 0px 20px!important; /*Update the values as required*/
}
.em_hide {
overflow:hidden !important;
float:left !important;
display:none !important;
line-height:0px !important;
mso-hide: all !important;
}
.em_hide_desktop {
overflow: visible !important;
float: none !important;
display: block !important;
line-height:100% !important;
max-height:100% !important;
}
.em_left {
text-align: left !important;
}
.em_height {
height: 20px !important;
font-size: 1px !important;
line-height: 1px !important;
}
.em_height30 {
height: 30px !important;
}
.em_width26 {
width: 26px !important;
}
.em_padtop {
padding-top: 40px !important;
}
..em_mobile_center {
align-content: center !important;
text-align: center !important;
}
}
/*Stylesheed for the devices width between 0px to 480px*/
#media only screen and (max-width:480px) {
.em_wrapper {
width: 100% !important;
}
.em_aside {
padding: 10px 17px !important; /*Update the values as required*/
}
.em_aside1 {
padding: 0px 20px !important; /*Update the values as required*/
}
.em_hide {
overflow:hidden !important;
float:left !important;
display:none !important;
line-height:0px !important;
mso-hide: all !important;
}
.em_hide_desktop {
overflow: visible !important;
float: none !important;
display: block !important;
line-height:100% !important;
max-height:100% !important;
}
.em_left {
text-align: left !important;
}
.em_height {
height: 20px !important;
font-size: 1px !important;
line-height: 1px !important;
}
.em_height30 {
height: 30px !important;
}
.em_width26 {
width: 26px !important;
}
.em_padtop {
padding-top: 40px !important;
}
}
</style><!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="margin:0px; padding:0px;" bgcolor="#ffffff">
<!--Full width table start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center" valign="top"><table width="600" border="0" align="center" class="em_wrapper" cellpadding="0" cellspacing="0" style="table-layout:fixed; width:600px;">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:600px;">
<tbody>
<tr>
<td valign="top" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:600px;">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="343" align="left">
<tr>
<td class="em_aside1" style="padding: 20px 20px">
<table cellpadding="0" cellspacing="0" border="0" style="border:1px solid #ffffff">
<tr>
<p style="mso-table-lspace:0; mso-table-rspace:0;"><td bgcolor="#ffffff" valign="top" align="left" class="em_center_mobile em_grey" style="padding:0px 0px 0px 0px; font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:14px; line-height:24px; color:#BCBCBC;"><em>My wife and I were out of town when the doorbell ringing feature popped up on my app. I answered through the two-way talk and a suspicious man asked if this was a certain address. I told him that it wasn't. He noticed the voice was coming from a doorbell camera and abruptly stated thank you and left. The next day I read on our neighborhood's watch blog that there was a man going around breaking in if people weren't home. I'm so glad that we have this system, otherwise I feel like we would have been his next victim. <br />
</em><br /></td></p></tr>
<tr><td bgcolor="#ffffff" valign="top" align="right" class="em_grey" style="padding:0px 0px 0px 0px; font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:14px; line-height:24px; color:#BCBCBC;"><em>– Frank, TX</td></tr>
</table>
</td>
</tr>
</table>
<table class="em_hide" align="right" cellpadding="0" cellspacing="0" border="0" style="border:1px solid #ffffff;">
<tr>
<td height="20" class="em_hide_desktop" style="display:none; overflow: hidden; line-height: 0px; float:left; mso-hide:all;">
<img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/spacer.gif" width="1" height="1" alt="" style="display:block;" border="0" />
</td>
</tr>
<tr>
<td height="52"> </td></tr>
<tr>
<p style="mso-table-lspace:0; mso-table-rspace:0;"><td valign="center" align="right" class="em_hide em_aside1" width="246">
<img src="https://wwwassets.s3.amazonaws.com/global/email/My%20Story%202018/2.14%20Send%20Image.jpg" width="244" height="275">
</td></p>
</tr>
</table>
</td>
</tr>
Check the code below. I added 100% width to the left table on mobile only.
#media(max-width: 599px) {
.leftText {
width: 100%;
}
}
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>My Story</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0 " />
<meta name="format-detection" content="telephone=no" />
<style type="text/css">
body {
margin: 0 !important;
padding: 0 !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0px;
mso-table-rspace: 0px;
}
td,
a,
span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.em_grey a {
color: #797979 !important;
text-decoration: none !important;
}
span.MsoHyperlink {
mso-style-priority: 99;
color: inherit;
}
span.MsoHyperlinkFollowed {
mso-style-priority: 99;
color: inherit;
}
/*Stylesheed for the devices width between 481px to 599px*/
#media only screen and (min-width:481px) and (max-width:599px) {
.em_wrapper {
width: 100% !important;
}
.em_aside {
padding: 0px 17px !important;
/*Update the values as required*/
}
.em_aside1 {
padding: 0px 20px!important;
/*Update the values as required*/
}
.em_hide {
overflow: hidden !important;
float: left !important;
display: none !important;
line-height: 0px !important;
mso-hide: all !important;
}
.em_hide_desktop {
overflow: visible !important;
float: none !important;
display: block !important;
line-height: 100% !important;
max-height: 100% !important;
}
.em_left {
text-align: left !important;
}
.em_height {
height: 20px !important;
font-size: 1px !important;
line-height: 1px !important;
}
.em_height30 {
height: 30px !important;
}
.em_width26 {
width: 26px !important;
}
.em_padtop {
padding-top: 40px !important;
}
..em_mobile_center {
align-content: center !important;
text-align: center !important;
}
}
/*Stylesheed for the devices width between 0px to 480px*/
#media only screen and (max-width:480px) {
.em_wrapper {
width: 100% !important;
}
.em_aside {
padding: 10px 17px !important;
/*Update the values as required*/
}
.em_aside1 {
padding: 0px 20px !important;
/*Update the values as required*/
}
.em_hide {
overflow: hidden !important;
float: left !important;
display: none !important;
line-height: 0px !important;
mso-hide: all !important;
}
.em_hide_desktop {
overflow: visible !important;
float: none !important;
display: block !important;
line-height: 100% !important;
max-height: 100% !important;
}
.em_left {
text-align: left !important;
}
.em_height {
height: 20px !important;
font-size: 1px !important;
line-height: 1px !important;
}
.em_height30 {
height: 30px !important;
}
.em_width26 {
width: 26px !important;
}
.em_padtop {
padding-top: 40px !important;
}
}
</style>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="margin:0px; padding:0px;" bgcolor="#ffffff">
<!--Full width table start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center" valign="top">
<table width="600" border="0" align="center" class="em_wrapper" cellpadding="0" cellspacing="0" style="table-layout:fixed; width:600px;">
<!--=== HEADER SECTION === -->
<tr>
<td valign="top">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FF9C5A" style="width:600px;" class="em_wrapper">
<tbody>
<tr>
<td height="16" style="font-size:1px; line-height:1px; height:16px;"> </td>
</tr>
<tr>
<td valign="top" style="padding:0px 42px;" class="em_aside">
<table width="516" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:516px;">
<tbody>
<tr>
<td valign="top" align="center" width="117">
<a target="_blank" style="text-decoration:none;"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/story_logo.jpg" alt="MyStory" width="117" height="29" style="display:block; font-family:Arial, sans-serif; font-size:18px; line-height:22px; color:#ffffff; font-weight:bold;"
border="0" /></a>
</td>
<td> </td>
<td valign="middle" align="right">
<table border="0" cellspacing="0" cellpadding="0" align="right">
<tbody>
<tr>
<td valign="middle" align="center" width="14" style="font-size:0px; line-height:0px;">
<a href="mailto:"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/mail.jpg" width="20" height="14" alt="mail" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#ffffff;"
border="0" /></a>
</td>
<td width="7" style="font-size:0px; line-height:0px;"></td>
<td valign="middle" align="right" style="font-family:'Int Circular PPT', Gotham, Arial, sans-serif, sans-serif; font-size:14px; line-height:17px; color:#ffffff;">Submit a story</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="15" style="font-size:1px; line-height:1px; height:15px;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--=== //HEADER SECTION === -->
<!--=== BODY SECTION === -->
<tr>
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:600px;">
<tbody>
<tr>
<td valign="top" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:600px;">
<tbody>
<tr>
<td height="40" style="height:40px;" class="em_height30"> </td>
</tr>
<tr>
<td valign="top" align="center"></td>
</tr>
<tr>
<td valign="top" align="center" class="em_aside1" style="padding:0px 20px 0px 40px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:500px;">
<tbody>
<tr>
<td valign="top" align="center">
<table width="127" border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper" style="width:127px;">
<tbody>
<tr>
<td valign="top" align="center"><img src="https://wwwassets.s3.amazonaws.com/global/email/MyStory_logo_127x131.jpg" width="127" height="131" alt="" style="display:block; font-family:Arial, sans-serif; font-size:18px; line-height:22px; color:#ffffff; font-weight:bold;"
border="0" /></td>
</tr>
</tbody>
</table>
<table width="360" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:360px;">
<tbody>
<!--[if gte mso 9]>
<!-->
<tr>
<td class="em_hide" height="40" style="font-size:0px"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/spacer.gif" width="1" height="40" alt="" style="display:block; font-size:0px;" border="0" />
</td>
</tr>
<![endif]-->
<!--[if gte mso 9]>
<tr>
<td height="20"><img src="https://wwwassets.s3.amazonaws.com/global/email/wms%202017/spacer.gif" width="1" height="1" alt="" style="display:block; font-size:0px;" border="0" />
</td>
</tr>
<!--[endif]-->
<tr>
<td height="20" class="em_hide_desktop" style="display:none; overflow: hidden; line-height: 0px; float:left; mso-hide:all;">
<img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/spacer.gif" width="1" height="1" alt="" style="display:block;" border="0" />
</td>
</tr>
<tr>
<td align="center">
<table class="em_hide" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" style="font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:22px; line-height:26px; color:#F5A623;">Your efforts at Vivint make all the difference in customers' experiences</td>
</tr>
</table>
<table class="em_hide_desktop" style="display:none; overflow:hidden; float:left; mso-hide:all; line-height:0px; font-size:0px;" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:22px; line-height:26px; color:#F5A623;">Your efforts at Vivint make all the difference in customers' experiences</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="6" style="font-size:1px; line-height:1px; height:6px;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="20" class="em_hide_desktop" style="display:none; overflow:hidden; float:left; line-height:0px; mso-hide:all;"> </td>
</tr>
<tr>
<td>
<table class="leftText" cellpadding="0" cellspacing="0" border="0" width="343" align="left">
<tr>
<td class="em_aside1" style="padding: 20px 20px">
<table cellpadding="0" cellspacing="0" border="0" style="border:1px solid #ffffff">
<tr>
<p style="mso-table-lspace:0; mso-table-rspace:0;">
<td bgcolor="#ffffff" valign="top" align="left" class="em_center_mobile em_grey" style="padding:0px 0px 0px 0px; font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:14px; line-height:24px; color:#BCBCBC;"><em>My wife and I were out of town when the doorbell ringing feature popped up on my app. I answered through the two-way talk and a suspicious man asked if this was a certain address. I told him that it wasn't. He noticed the voice was coming from a doorbell camera and abruptly stated thank you and left. The next day I read on our neighborhood's watch blog that there was a man going around breaking in if people weren't home. I'm so glad that we have this system, otherwise I feel like we would have been his next victim. <br />
</em>
<br />
</td>
</p>
</tr>
<tr>
<td bgcolor="#ffffff" valign="top" align="right" class="em_grey" style="padding:0px 0px 0px 0px; font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:14px; line-height:24px; color:#BCBCBC;"><em>– Frank, TX</td></tr>
</table>
</td>
</tr>
</table>
<table class="em_hide" align="right" cellpadding="0" cellspacing="0" border="0" style="border:1px solid #ffffff;">
<tr>
<td height="20" class="em_hide_desktop" style="display:none; overflow: hidden; line-height: 0px; float:left; mso-hide:all;">
<img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/spacer.gif" width="1" height="1" alt="" style="display:block;" border="0" />
</td>
</tr>
<tr>
<td height="52"> </td></tr>
<tr>
<p style="mso-table-lspace:0; mso-table-rspace:0;"><td valign="center" align="right" class="em_hide em_aside1" width="246">
<img src="https://wwwassets.s3.amazonaws.com/global/email/My%20Story%202018/2.14%20Send%20Image.jpg" width="244" height="275">
</td></p>
</tr>
</table>
</td>
</tr>
<tr>
<td class="em_hide_desktop"height="20" style="height:20px; display:none; overflow;hidden; float:left; line-height:0px; mso-hide:all;"> </td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
<!----Begin Submit a story----->
<tr>
<td valign="top"><table bgcolor="#ff9c5a"width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:600px;">
<tbody>
<tr>
<td height="40" style="height:40px;"> </td>
</tr>
<tr>
<td valign="top" align="center" style="padding:0px 15px; font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:22px; line-height:28px; color:#ffffff;">Do you have a customer story to share?</td>
</tr>
<tr>
<td height="38" style="height:38px;" class="em_height30"> </td>
</tr>
<tr>
<td valign="top" align="center" style="font-size:0px; line-height:0px;"><table width="200" border="0" cellspacing="0" cellpadding="0" align="center" style="width:200px;">
<tbody>
<tr>
<td height="1" style="font-size:0px; line-height:0px; height:1px;" bgcolor="#ffffff"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/spacer.gif" width="1" height="1" alt="" style="display:block;" border="0" /></td>
</tr>
<tr>
<td valign="top" align="center" style="font-size:0px; line-height:0px;"><table width="200" border="0" cellspacing="0" cellpadding="0" align="center" style="width:200px;">
<tbody>
<tr>
<td width="1" style="width:1px;" bgcolor="#ffffff"></td>
<td height="38" align="center" valign="middle" style="height:38px;font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:20px; color:#ffffff;">Submit a story</td>
<td width="1" style="width:1px;" bgcolor="#ffffff"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="1" style="font-size:0px; line-height:0px; height:1px;" bgcolor="#ffffff"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/spacer.gif" width="1" height="1" alt="" style="display:block;" border="0" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="40" style="height:40px;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<!---- End Submit a story section------->
<!-----Begin My Story Mission------>
<tr>
<td valign="top" bgcolor="#ffffff"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:600px;">
<tbody>
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:600px;">
<tbody>
<tr>
<td height="40" style="height:40px;"> </td>
</tr>
<tr>
<td valign="top" align="center" style="font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:16px; line-height:26px; color:#ff9c5a;">My Story Mission</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="left" class="em_white" style="padding:0px 50px; font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:14px; line-height:24px; color:#ff9c5a;">Vivint’s success comes from the amazing people who take care
of our customers at every hour of every day. We applaud these
interactions through My Story—showing the daily difference
we make in customers’ homes, families, and lives.</td>
</tr>
<tr>
<td height="26" style="height:26px;"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="200" border="0" cellspacing="0" cellpadding="0" align="center" style="width:200px;">
<tbody>
<tr>
<td height="1" style="font-size:0px; line-height:0px; height:1px;" bgcolor="#ff9c5a"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/spacer.gif" width="1" height="1" alt="" style="display:block;" border="0" /></td>
</tr>
<tr>
<td valign="top" align="center"><table width="200" border="0" cellspacing="0" cellpadding="0" align="center" style="width:200px;">
<tbody>
<tr>
<td width="1" style="width:1px;" bgcolor="#ff9c5a"></td>
<td height="38" align="center" valign="middle" style="height:38px;font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:16px; color:#ff9c5a;">See more stories</td>
<td width="1" style="width:1px;" bgcolor="#ff9c5a"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="1" style="font-size:0px; line-height:0px; height:1px;" bgcolor="#ff9c5a"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/spacer.gif" width="1" height="1" alt="" style="display:block;" border="0" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="40" style="height:40px;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!----End My Story Mission------>
<!--=== //BODY SECTION === -->
<!--=== FOOTER SECTION === -->
<tr>
<td align="center" bgcolor="#d0d2d2" style="padding:0px 24px;" class="em_aside"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:552px;">
<tbody>
<tr>
<td height="31" style="height:31px;" class="em_height"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:552px;">
<tbody>
<tr>
<td valign="top" align="center"><table width="128" border="0" cellspacing="0" cellpadding="0" align="right" class="em_wrapper" style="width:128px;">
<tbody>
<tr>
<td valign="top" align="center"><table width="128" border="0" cellspacing="0" cellpadding="0" align="center" style="width:128px;">
<tbody>
<tr>
<td valign="middle" align="center" width="18" style="font-size:0px; line-height:0px; width:18px;"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/fb.jpg" width="18" height="18" alt="fb" style="font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#859eb0; display:block;" border="0" /></td>
<td width="17" style="font-size:0px; line-height:0px; width:17px;"> </td>
<td valign="middle" align="center" width="21" style="font-size:0px; line-height:0px; width:21px;"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/twitter.jpg" width="21" height="18" alt="fb" style="font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#859eb0; display:block;" border="0" /></td>
<td width="17" style="font-size:0px; line-height:0px; width:17px;"> </td>
<td valign="middle" align="center" width="18" style="font-size:0px; line-height:0px; width:18px;"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/insta.jpg" width="18" height="18" alt="fb" style="font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#859eb0; display:block;" border="0" /></td>
<td width="17" style="font-size:0px; line-height:0px; width:17px;"> </td>
<td valign="middle" align="center" width="20" style="font-size:0px; line-height:0px; width:20px;"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/yt.jpg" width="20" height="14" alt="fb" style="font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#859eb0; display:block;" border="0" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><table border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper">
<tbody>
<tr>
<td valign="top"><table border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td height="2" style="font-size:1px; line-height:1px; height:2px;" class="em_height"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/spacer.gif" width="1" height="1" alt="" style="display:block;" border="0" /></td>
</tr>
<tr>
<td valign="top" align="center" style="font-size:0px; line-height:0px;"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/img_2.jpg" width="135" height="14" alt="vivint.SmartHome" style="font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#ffffff; display:block;" border="0" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="31" style="height:31px;" class="em_height"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--=== //FOOTER SECTION === -->
</table></td>
</tr>
</table>
<!--Full width table End-->
<!--Increase/decrease the number of ( ) as per the template width-->
<div class="em_hide" style="white-space:nowrap;font:20px courier;color:#d0d2d2;"> </div>
</body>
</html>
<custom name="opencounter" type="tracking">
I am trying to build a two column layout for a newsletter, but for some reason my columns are sometimes vertically aligning to the centre?
In some versions of outlook it works but others not?
Any idea how I can fix this?
<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="telephone=no" name="format-detection" />
<title>EMAIL NEWSLETTER</title>
<style type="text/css">
body {
-webkit-text-size-adjust: 100%!important;
-ms-text-size-adjust: 100%!important;
-webkit-font-smoothing: antialiased!important
}
img {
border: 0!important;
outline: none!important;
}
p {
margin: 0!important;
padding: 0!important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0;
mso-table-rspace: 0;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
span.MsoHyperlink {
mso-style-priority: 99;
color: inherit
}
span.MsoHyperlinkFollowed {
mso-style-priority: 99;
color: inherit;
}
.em_white a {
text-decoration: none;
color: #ffffff;
}
.em_white_und a {
text-decoration: underline;
color: #ffffff;
}
.em_orange a {
text-decoration: none;
color: #EC8026;
}
.em_orange1 a {
text-decoration: none;
color: #e44c16;
}
.em_marun a {
text-decoration: none;
color: #1e8faa;
}
.em_marun1 a {
text-decoration: none;
color: #1E8FAA;
}
.em_yellow a {
text-decoration: none;
color: #f5ebd7;
}
#media screen and (min-width:601px) {
.container {
width: 600px!important;
}
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">table{border-collapse:collapse!important!important}</style>
<![endif]-->
</head>
<body style="margin:0;padding:0">
<table style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center"><table class="container" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;">
<tr>
<td><table style="max-width:600px" width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table class="container" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;" bgcolor="#1E8FAA">
<tr>
<td bgcolor="#1E8FAA" valign="top" style="border-spacing:0;Margin:0 auto;width:100%;max-width:582px"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><!--[if (gte mso 9)|(IE)]><table width="582" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="max-width:582px" align="center">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="line-height:0px;font-size:0px"> </td>
</tr>
<tr>
<td class="two-column" valign="top" style="text-align:left;font-size:0" dir="rtl"><!--[if (gte mso 9)|(IE)]><table width="100%" dir="rtl"><tr><td width="188"><![endif]-->
<div class="column" style="width:100%;max-width:188px;display:inline-block;vertical-align:top;text-align:left" dir="ltr">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="column">
<tr>
<td valign="top" class="em_hide"><table width="100%" border="0" cellspacing="0" style="max-width:198px;" cellpadding="0" align="right" class="column">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td><table style="max-width:198px;" border="0" cellspacing="0" cellpadding="0" align="left" class="column">
<tr>
<td width="10"> </td>
<td mc:edit="text_2" class="em_center" height="42" valign="middle" align="left" style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:11px; line-height:15px; color:#ffffff;background-color:#1E8FAA;"><multiline style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:11px; line-height:15px; color:#ffffff;background-color:#1E8FAA;"><span class="em_white">Email not displaying properly? </span></multiline>
<br />
<span class="em_white_und">
<webversion style="text-decoration:underline;color:#ffffff;"><span class="em_white_und" style="text-decoration:underline;color:#ffffff;">View it in your browser.</span></webversion>
</span></td>
<td width="10"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="20" style="line-height:1px;font-size:1px"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="384"><![endif]-->
<div class="column" style="width:100%;max-width:384px;display:inline-block;vertical-align:top;text-align:left" dir="ltr">
<table width="100%" style="max-width:384px" cellpadding="0" align="center" cellspacing="0" border="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10" class="em_hide"> </td>
<td width="152" align="center" valign="top"><img editable="true" src="/images/logo.jpg" width="152" alt="logo" style="display:block;font-family:Georgia, 'Times New Roman', Times, serif;font-size:14px;color:#ffffff;font-weight:bold;line-height:20px;max-width:152px;" border="0" /></td>
<td width="222" class="em_hide"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="20" style="line-height:1px;font-size:1px"> </td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" valign="top"><repeater>
<layout label="Gallery">
<table style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center"><table class="container" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;">
<tr>
<td><table style="max-width:600px" width="100%" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
<tr>
<td><!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;" bgcolor="#ffffff">
<tr>
<td width="5" class="em_hide"> </td>
<td class="two-column" valign="top" style="text-align:center;font-size:0"><!--[if (gte mso 9)|(IE)]><table width="100%"><tr><td width="295"><![endif]-->
<div class="column" style="width:100%;max-width:295px;display:inline-block;vertical-align:top;text-align:center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="column">
<tr>
<td width="5" class="em_hide"> </td>
<td align="center" valign="top" class="em_side_space"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top"><img editable="true" src="http://placehold.it/350x250" width="285" alt="GALLERY ARTICLE 1" style="display:block;font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:15px; line-height:30px; color:#000000;font-weight:bold;max-width:285px;" border="0" class="em_full_width" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#1E8FAA" style="background-color:#1E8FAA;"><table width="100%" style="max-width:285px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"> </td>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;"><span class="em_yellow">
<multiline style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</multiline>
</span></td>
</tr>
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="10"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="18" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="5" class="em_hide"> </td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="295"><![endif]-->
<div class="column" style="width:100%;max-width:295px;display:inline-block;vertical-align:top;text-align:center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="column">
<tr>
<td width="5" class="em_hide"> </td>
<td align="center" valign="top" class="em_side_space"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top"><img editable="true" src="http://placehold.it/350x250" width="285" alt="GALLERY ARTICLE 2" style="display:block;font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:15px; line-height:30px; color:#000000;font-weight:bold;max-width:285px;" border="0" class="em_full_width" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#1E8FAA" style="background-color:#1E8FAA;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"> </td>
<td valign="top"><table width="100%" style="max-width:285px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;"><span class="em_yellow">
<multiline style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</multiline>
</span></td>
</tr>
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="10"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="18" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="5" class="em_hide"> </td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
<td width="5" class="em_hide"> </td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</layout>
</repeater></td>
</tr>
</table>
</body>
</html>
By setting a height for the element your trying to valign it should work.
I fixed it with:
<!--[if (gte mso 9)|(IE)]><table width="100%"><tr><td width="295" valign="top"><![endif]-->