Centering a cell with left-aligned text on mobile only - html

Question

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>

Answer 1

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">