仅在移动设备上将具有左对齐文本的单元格居中

时间:2018-01-12 21:50:35

标签: html css

我有一个文本表和一个图像表,在桌面上分成两列。图像设置为仅在桌面上显示,而不是在移动设备上显示。我需要文本表在桌面上保持左对齐,但在移动页面的中心位置,文本保持左对齐以用于两个显示。

这是我到目前为止所尝试的内容:

  1. 在文本框的每一侧添加间隔条​​以将其推到中心,但是由于宽度是固定的,因此它正在挤压盒子并垂直延伸。我尝试删除固定宽度属性并使用基于百分比的流体宽度,但随后导致2列布局在桌面中断开。
  2. 使用媒体查询创建一个仅在移动设备上填充的完全独立的块。这适用于大多数电子邮件客户端,但出于某种原因,outlook并未隐藏“移动块”,因此它们都出现并打破了布局。
  3. 在框中使用基于百分比的流动边距CSS属性。我再次遇到了“挤压”问题,就像尝试#1一样。
  4. 使用媒体查询在框的两侧添加不同数量的填充以将其推到前面。再次,像尝试#1和#3一样下雨进入挤压问题。
  5. 使用CSS“Text-align”属性的媒体查询,而不是HTML“align”属性。这也打破了桌面中的两个列布局。
  6. 将表嵌套在另一个表中,并使用两个相关表的对齐方式进行播放。这并没有改变任何东西,除了在其中一个表没有左对齐时打破两列布局。
  7. 这是我的代码:

    <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>&ndash; 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">&nbsp;</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>
    

1 个答案:

答案 0 :(得分:0)

检查以下代码。我只在移动设备上向左侧桌子添加了100%的宽度。

@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;">&nbsp;</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>&nbsp;</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;"><a href="mailto:mystory@vivint.com" target="_blank" style="text-decoration:none; color:#ffffff;">Submit a story</a></td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr>
                      <td height="15" style="font-size:1px; line-height:1px; height:15px;">&nbsp;</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">&nbsp;</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;">&nbsp;</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;">&nbsp;</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>&ndash; 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">&nbsp;</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;">&nbsp;</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;">&nbsp;</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">&nbsp;</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;"><a href="mailto:mystory@vivint.com" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:38px;">Submit a story</a></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;">&nbsp;</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;">&nbsp;</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>&nbsp;</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&rsquo;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&mdash;showing the daily difference
        we make in customers&rsquo; homes, families, and lives.</td>
    </tr>
    <tr>
      <td height="26" style="height:26px;">&nbsp;</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;"><a href="https://www.youtube.com/playlist?list=PLXi2X_Y_O2pDe3xCYIGcgBzcSd1n3NX5Q" target="_blank" style="text-decoration:none; color:#ff9c5a; display:block; line-height:38px;">See more stories</a></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;">&nbsp;</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">&nbsp;</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;"><a href="http://www.facebook.com/vivinthome" target="_blank" style="text-decoration:none;"><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" /></a></td>
      <td width="17" style="font-size:0px; line-height:0px; width:17px;">&nbsp;</td>
      <td valign="middle" align="center" width="21" style="font-size:0px; line-height:0px; width:21px;"><a href="http://www.twitter.com/vivinthome" target="_blank" style="text-decoration:none;"><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" /></a></td>
      <td width="17" style="font-size:0px; line-height:0px; width:17px;">&nbsp;</td>
      <td valign="middle" align="center" width="18" style="font-size:0px; line-height:0px; width:18px;"><a href="https://www.instagram.com/vivinthome/" target="_blank" style="text-decoration:none;"><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" /></a></td>
      <td width="17" style="font-size:0px; line-height:0px; width:17px;">&nbsp;</td>
     <td valign="middle" align="center" width="20" style="font-size:0px; line-height:0px; width:20px;"><a href="http://www.youtube.com/vivinthome" target="_blank" style="text-decoration:none;"><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" /></a></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;"><a href="https://www.vivint.com/" target="_blank" style="text-decoration:none;"><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" /></a></td>
    </tr>
  </tbody>
</table>
</td>
    </tr>
  </tbody>
</table>

</td>
    </tr>
  </tbody>
</table>
</td>
    </tr>
    <tr>
     <td height="31" style="height:31px;" class="em_height">&nbsp;</td>
    </tr>
  </tbody>
</table>
</td>
        </tr>
        <!--=== //FOOTER SECTION === -->
      </table></td>
  </tr>
</table>
<!--Full width table End--> 

<!--Increase/decrease the number of (&nbsp;) as per the template width-->
<div class="em_hide" style="white-space:nowrap;font:20px courier;color:#d0d2d2;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</body>
</html>
<custom name="opencounter" type="tracking">