I have been helping a friend of mine by editing his HTML code. I am also still a newbie so I am not sure what is going on in terms of tags and structure.
It seems unecessairly complicated but I was wondering whether the following piece of code for two tables could be put side-by-side instead of appearing one above the other?
<html>
<head></head>
<body>
<table group_name="Small left image box 2" style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="center" class="" bgcolor="#ffffff">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:10px;" class="padding"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="10" height="1" border="0"></td>
<td style="padding: 0px; vertical-align:top; width:580px;" class="padded" align="center">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top;"><img style="margin: 0px; padding: 0px; display: block; height: 5px;" src="http://static.contactlab.it/spacer.gif" width="1" height="5" border="0"></td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:580px;" class="padded" align="center">
<table class="two-col" style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:580px;">
<table class="columns" style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none; width:580px;" border="0" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top;">
<table block_name="Left Column" style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="left" class="">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:188px;" class="column">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="left">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:180px;" class="padded"><img style="margin: 0px; padding: 0px; display: block; height: 10px;" src="http://static.contactlab.it/spacer.gif" width="1" height="10" border="0"></td>
</tr>
</tbody>
</table>
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="left" height="282">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:288px;" class="column" align="left" height="282">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" class="" item_name="Text">
<tbody>
<tr>
<td colspan="5" style="padding: 0px; vertical-align:top; width:280px;" class="padded"><img style="margin: 0px; padding: 0px; display: block; height: 7px;" src="http://static.contactlab.it/spacer.gif" width="1" height="7" border="0"></td>
</tr>
<tr>
<td colspan="5" style="padding: 0px; vertical-align:top; width:280px;" class="padded"><img style="margin: 0px; padding: 0px; display: block; height: 2px;" src="http://static.contactlab.it/spacer.gif" width="1" height="2" border="0"></td>
</tr>
<tr bgcolor="#ffffff">
<td style="padding: 0px; vertical-align:top; width:2px;"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="2" height="1" border="0"></td>
<td style="padding: 0px; vertical-align:top; width:10px;"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="10" height="1" border="0"></td>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal"><img style="margin: 0px; padding: 0px; display: block; height: 20px;" src="http://static.contactlab.it/spacer.gif" width="1" height="20" border="0"></td>
</tr>
<tr>
<td style="padding: 10px; vertical-align:top; width:280px;" class="padded" align="center">
<img src="http://static.contactlab.it/maison_contactLab/pb/20160505/images/img4_280.jpg" width="280" height="282" alt="Alt Text" style="margin:0px; padding:0px; display:inline;" border="0">
</td>
</tr>
<tr>
<td tiny_name="Title" style="padding: 0px; vertical-align:top; width:256px; font-family: Arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#595959;" class="padded-internal" align="center">
LOREM IPSUM
<br>DOLOR
</td>
</tr>
<tr tiny_name="Divider Image" class="<!-- tiny{onlydesktop}[type=mobile] -->onlydesktop">
<td style="padding: 0px; width:280px; font-size:0; line-height:1px; height: 1px; vertical-align: top" class="padded" align="center">
<img style="font-size:0; margin: 0px; padding: 0px; display: inline;" src="http://static.contactlab.it/maison_contactLab/pb/20160505/images/line_black.png" width="121" height="30" border="0" alt="Alt Text" class="">
</td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:180px;" class="padded"><img style="margin: 0px; padding: 0px; display: block; height: 10px;" src="http://static.contactlab.it/spacer.gif" width="1" height="10" border="0"></td>
</tr>
<!-- /tiny -->
<tr>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal"><img style="margin: 0px; padding: 0px; display: block; height: 10px;" src="http://static.contactlab.it/spacer.gif" width="1" height="10" border="0"></td>
</tr>
<tr>
<td tiny_name="Text" style="padding: 0px; vertical-align:top; width:256px; font-family: Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#595959;" class="padded-internal" align="center">
Lorem ipsum dolor sit amet,<br> consectetur adipisici elit, <br> tempor inc idunt ut labore et dolore magna aliqua.
</td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal"><img style="margin: 0px; padding: 0px; display: block; height: 20px;" src="http://static.contactlab.it/spacer.gif" width="1" height="20" border="0"></td>
</tr>
<tr>
<td width="20" style="padding: 0px; vertical-align:top;"><img style="margin: 0px; padding: 0px; display: block; width: 20px; height: 30px;" src="http://static.contactlab.it/spacer.gif" width="20" height="30" border="0"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal"><img style="margin: 0px; padding: 0px; display: block; height: 30px;" src="http://static.contactlab.it/spacer.gif" width="1" height="30" border="0"></td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 0px; vertical-align:top; width:10px;"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="10" height="1" border="0"></td>
<td style="padding: 0px; vertical-align:top; width:2px;"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="2" height="1" border="0"></td>
</tr>
<tr>
<td colspan="5" style="padding: 0px; vertical-align:top; width:280px;" class="padded"><img style="margin: 0px; padding: 0px; display: block; height: 2px;" src="http://static.contactlab.it/spacer.gif" width="1" height="2" border="0"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;vertical-align:top;" >
<![endif]-->
<table block_name="Right Column" style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="right" class="">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:580px;" class="padded" align="center" height="282">
<table class="two-col" style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:580px;">
<table class="columns" style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none; width:580px;" border="0" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top;">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="left" height="282">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:288px;" class="column" align="left" height="282">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" class="" item_name="Text">
<tbody>
<tr>
<td colspan="5" style="padding: 0px; vertical-align:top; width:280px;" class="padded"><img style="margin: 0px; padding: 0px; display: block; height: 7px;" src="http://static.contactlab.it/spacer.gif" width="1" height="7" border="0"></td>
</tr>
<tr bgcolor="#ffffff">
<td style="padding: 0px; vertical-align:top; width:10px;"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="10" height="1" border="0"></td>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal"><img style="margin: 0px; padding: 0px; display: block; height: 20px;" src="http://static.contactlab.it/spacer.gif" width="1" height="20" border="0"></td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:280px;" class="padded" align="center">
<a href="#" target="_blank"><img src="http://static.contactlab.it/maison_contactLab/pb/20160505/images/img4_280.jpg" width="280" height="282" alt="Alt Text" style="margin:0px; padding:0px; display:inline;"
border="0"></a>
</td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:180px;" class="padded"><img style="margin: 0px; padding: 0px; display: block; height: 10px;" src="http://static.contactlab.it/spacer.gif" width="1" height="10" border="0"></td>
</tr>
<!-- /tiny -->
<tr>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal"><img style="margin: 0px; padding: 0px; display: block; height: 10px;" src="http://static.contactlab.it/spacer.gif" width="1" height="10" border="0"></td>
</tr>
<tr>
<td tiny_name="Text" style="padding: 0px; vertical-align:top; width:256px; font-family: Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#595959;" class="padded-internal" align="left">
Lorem ipsum dolor sit amet, consectetur adipisici elit, tempor inc <br> idunt ut labore et dolore <br> magna aliqua.
</td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal"><img style="margin: 0px; padding: 0px; display: block; height: 20px;" src="http://static.contactlab.it/spacer.gif" width="1" height="20" border="0"></td>
</tr>
<tr tiny_name="Call to action">
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal" align="left">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" bgcolor="#353535">
<tbody>
<tr>
<td width="20" style="padding: 0px; vertical-align:top;"><img style="margin: 0px; padding: 0px; display: block; width: 20px; height: 30px;" src="http://static.contactlab.it/spacer.gif" width="20" height="30" border="0"></td>
<td style="padding: 0px; vertical-align:middle; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; color:#ffffff;" class="button" align="center">
<a href="#" target="_blank" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; color:#ffffff; text-decoration: none;">
LOREM SIT
</a>
</td>
<td width="20" style="padding: 0px; vertical-align:top;"><img style="margin: 0px; padding: 0px; display: block; width: 20px; height: 30px;" src="http://static.contactlab.it/spacer.gif" width="20" height="30" border="0"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal"><img style="margin: 0px; padding: 0px; display: block; height: 30px;" src="http://static.contactlab.it/spacer.gif" width="1" height="30" border="0"></td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 0px; vertical-align:top; width:10px;"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="10" height="1" border="0"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;vertical-align:top;" >
<![endif]-->
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" align="right" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:288px;" class="column" align="right">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" class="" item_name="Image">
<tbody>
<tr>
<td style="padding: 0px; vertical-align:top; width:280px;" class="padded"><img style="margin: 0px; padding: 0px; display: block; height: 10px;" src="http://static.contactlab.it/spacer.gif" width="1" height="10" border="0"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 0px; vertical-align:top; width:10px;" class="padding"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="10" height="1" border="0"></td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:10px;" class="padding"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="10" height="1" border="0"></td>
<td style="padding: 0px; vertical-align:top; width:580px;" class="padded"><img style="margin: 0px; padding: 0px; display: block; height: 10px;" src="http://static.contactlab.it/spacer.gif" width="1" height="10" border="0"></td>
<td style="padding: 0px; vertical-align:top; width:10px;" class="padding"><img style="margin: 0px; padding: 0px; display: block;" src="http://static.contactlab.it/img/spacer.gif" width="10" height="1" border="0"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Don't use table tag repeats, use screen grid system.
You can divide screen using columns.
Please use following code. just copy and paste.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tbody>
<tr>
<td style="padding: 10px; vertical-align:top; width:280px;" class="padded" align="center">
<img src="http://static.contactlab.it/maison_contactLab/pb/20160505/images/img4_280.jpg" width="280" height="282" alt="Alt Text" style="margin:0px; padding:0px; display:inline;" border="0">
</td>
</tr>
<tr>
<td tiny_name="Title" style="padding: 0px; vertical-align:top; width:256px; font-family: Arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#595959;" class="padded-internal" align="center">
LOREM IPSUM
<br>DOLOR
</td>
</tr>
<tr tiny_name="Divider Image" class="<!-- tiny{onlydesktop}[type=mobile] -->onlydesktop">
<td style="padding: 0px; width:280px; font-size:0; line-height:1px; height: 1px; vertical-align: top" class="padded" align="center">
<img style="font-size:0; margin: 0px; padding: 0px; display: inline;" src="http://static.contactlab.it/maison_contactLab/pb/20160505/images/line_black.png" width="121" height="30" border="0" alt="Alt Text" class="">
</td>
</tr>
<tr>
<td tiny_name="Text" style="padding: 0px; vertical-align:top; width:256px; font-family: Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#595959;" class="padded-internal" align="center">
Lorem ipsum dolor sit amet,<br> consectetur adipisici elit, <br> tempor inc idunt ut labore et dolore magna aliqua.
</td>
</tr>
<tr>
<td style="padding: 0px; vertical-align:top; width:256px;" class="padded-internal"><img style="margin: 0px; padding: 0px; display: block; height: 20px;" src="http://static.contactlab.it/spacer.gif" width="1" height="20" border="0"></td>
</tr>
<tr>
<td width="20" style="padding: 0px; vertical-align:top;"><img style="margin: 0px; padding: 0px; display: block; width: 20px; height: 30px;" src="http://static.contactlab.it/spacer.gif" width="20" height="30" border="0"></td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-6">
<table style="border-collapse:collapse; border-spacing:0; -webkit-text-size-adjust:none;" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tbody>
<tr>
<td style="padding: 10px; vertical-align:top; width:280px;" class="padded" align="center">
<img src="http://static.contactlab.it/maison_contactLab/pb/20160505/images/img4_280.jpg" width="280" height="282" alt="Alt Text" style="margin:0px; padding:0px; display:inline;" border="0">
</td>
</tr>
<tr>
<td tiny_name="Title" style="padding: 0px; vertical-align:top; width:256px; font-family: Arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#595959;" class="padded-internal" align="center">
LOREM IPSUM
<br>DOLOR
</td>
</tr>
<tr tiny_name="Divider Image" class="<!-- tiny{onlydesktop}[type=mobile] -->onlydesktop">
<td style="padding: 0px; width:280px; font-size:0; line-height:1px; height: 1px; vertical-align: top" class="padded" align="center">
<img style="font-size:0; margin: 0px; padding: 0px; display: inline;" src="http://static.contactlab.it/maison_contactLab/pb/20160505/images/line_black.png" width="121" height="30" border="0" alt="Alt Text" class="">
</td>
</tr>
<!-- /tiny -->
<tr>
<td tiny_name="Text" style="padding: 0px; vertical-align:top; width:256px; font-family: Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#595959;" class="padded-internal" align="center">
Lorem ipsum dolor sit amet,<br> consectetur adipisici elit, <br> tempor inc idunt ut labore et dolore magna aliqua.
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Try to learn CSS.
Related
I'm trying to create a email sign. and I thought I did it but in mobile nested tables rows have extra whitespace, how can I remove it?
What I Wrote:
<table class="tg" border="0" cellspacing="0" cellpadding="0" width="813" height="146" style="display:block; border-collapse: collapse; border:hidden; max-height:156px; max-width:813px">
<thead>
<tr>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="">
<a href="https://www.isverenim.com">
<img style="margin: 0px; border: 0px; padding: 0px; display: block;" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/a.png" width="250" height="146">
</a>
</td>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="">
<img style="margin: 0px; border: 0px; padding: 0px; display: block;" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/b.png" width="154" height="146">
</td>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="">
<a href="https://www.bariserdem.com"><img style="margin: 0px; border: 0px; padding: 0px; display: block;" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/c.png" width="232" height="146">
</td>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="">
<img style="margin: 0px; border: 0px; padding: 0px; display: block;" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/d.png" width="71" height="146">
</td>
<td>
<table style="display:block; border-collapse: collapse; border:hidden;" border="0" cellspacing="0" cellpadding="0" width="106" height="146">
<thead>
<tr>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="" width="106" height="51">
<img style="vertical-align: middle; border-spacing: 0; min-height: 54px;" valign="middle" alt="companyname logo" aria-hidden="true" border="0" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/e1.png" width="106" height="51">
</td>
</tr>
<tr>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="" width="106" height="27">
<a href="https://www.linkedin.com"><img style="vertical-align: middle; border-spacing: 0; min-height: 54px;" valign="middle" alt="companyname logo" aria-hidden="true" border="0" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/e2.png" width="106" height="27">
</td>
</tr>
<tr>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="" width="106" height="27">
<a href="https://www.twitter.com"><img style="vertical-align: middle; border-spacing: 0; min-height: 54px;" valign="middle" alt="companyname logo" aria-hidden="true" border="0" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/e3.png" width="106" height="27">
</td>
</tr>
<tr>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="" width="106" height="41">
<img style="vertical-align: middle; border-spacing: 0; min-height: 54px;" valign="middle" alt="companyname logo" aria-hidden="true" border="0" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/e4.png" width="106" height="41">
</td>
</tr>
</thead>
</table>
</td>
</tr>
</thead>
I'm trying to align this text and button but I can't manage to do it. I want them to be on the same row no matter the length of the text.
If you need the CSS styling please let me know.
<div style="float: left; width: 100%;" class="sapMktBlock">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" bgcolor="#FFFFFF">
<tbody>
<tr>
<td style="font-size: 0px;" class="nomob"> </td>
<td width="640" align="center" style="width: 640px; min-width: 640px;" class="wrapto100pc">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" class="wrapto100pc">
<tbody>
<tr>
<td align="center" style="">
<table bgcolor="#f5f5f5" cellpadding="0" cellspacing="0" border="0" style="min-width: 100%;" width="100%" role="presentation">
<tbody>
<tr>
<td align="center" valign="middle" style="padding: 0px 0px 0px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="font-size: 0; direction: ltr;">
<!--[if (gte mso 9)|(IE)]><table border="0" cellspacing="0" cellpadding="0" width="100%" dir="ltr"><tr><td valign="middle"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr>
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> DONE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> Lorem ipsum, lorem ipsum </td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td align="center" valign="middle" style="font-size:0;"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr>
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> STOPE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum </td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="font-size: 0px;" class="nomob"> </td>
</tr>
</tbody>
</table>
</div>
I think for your requirement we would need to make some changes in the structure of your table. we need to keep button and text in the same and with different s.
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" bgcolor="#FFFFFF">
<tbody>
<tr>
<td style="font-size: 0px;" class="nomob"> </td>
<td width="640" align="center" style="width: 640px; min-width: 640px;" class="wrapto100pc">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" class="wrapto100pc">
<tbody>
<tr>
<td align="center" style="">
<table bgcolor="#f5f5f5" cellpadding="0" cellspacing="0" border="0" style="min-width: 100%;" width="100%" role="presentation">
<tbody>
<tr>
<td align="center" valign="middle" style="padding: 0px 0px 0px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="font-size: 0; direction: ltr;">
<!--[if (gte mso 9)|(IE)]><table border="0" cellspacing="0" cellpadding="0" width="100%" dir="ltr"><tr><td valign="middle"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr width="320" style="max-width:320px">
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="320" align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr width="320">
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> DONE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td width="160" align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> Lorem ipsum, lorem ipsum Lorem ipsum, lorem ipsum Lorem ipsum, lorem ipsum </td>
<td width="160" align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td align="center" valign="middle" style="font-size:0;"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr>
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> STOPE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum </td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="font-size: 0px;" class="nomob"> </td>
</tr>
</tbody>
Try above snippet. It might work for you. I have made few changes in structure of table.
I'm formatting a table on 2 rows with 3 images but the 2nd image in each row keeps dipping down and hugging to the wrong direction. I'm not sure what's causing it.
This is for an email and I'm just trying to pick apart some of the template to better fit my needs, thus all that inline CSS.. The responsiveColumn class is just for a media query just an fyi.
<!-- 2nd Image -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="34%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 5px; padding-bottom: 20px; padding-left: 5px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td>
<p style="text-align: center;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div></td></tr>
</tbody></table></td>
I put it in jsfiddle so you can see it more clearly. You'll see how the 2nd image in each row just dips down and moves to the left opposed to keeping everything evenly on one line
https://jsfiddle.net/9f5c2zh6/1/
Remove the padding-top
<td style="padding-top: 20px;padding-right: 5px;padding-bottom: 20px;padding-left: 5px;background-color: #ffffff;color: #000000;" valign="top" bgcolor="#ffffff">
This is why we avoid inline styles because it's difficult to debug, However after some fiddling around, i found some problems
First: certain p elements have the following styles, And some others don't
p {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding: 0;
}
Second: certain td elements have the following styles, And some others don't
td {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #000000;
}
The fix is to add the missing styles to where they belongs so everything is aligned nicely together
td {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #000000;
}
p {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding: 0;
}
<tr>
<td width="100%" valign="top" style="color: #000000;">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<!-- 1st Image -->
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 20px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150">
</p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 2nd Image -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="34%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 5px; padding-bottom: 20px; padding-left: 5px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td>
<p style="text-align: center;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 3rd Image -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 0px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div style="" class="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="float: right; border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- end 3 column section -->
<!-- 3 column section -->
<tr>
<td width="100%" valign="top" style="color: #000000;">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<!-- 1st Image on 2nd row -->
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 20px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 2nd Image on 2nd row -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="34%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 5px; padding-bottom: 20px; padding-left: 5px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td>
<p style="text-align: center;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 3rd Image on 2nd row -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 0px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div style="" class="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="float: right; border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
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 have an issue with excess padding appearing around either the table or image on mobile with a HTML email signature and I'm unable to find the solution.
I must of tried every single solution I have researched including:
Adding display:block to the image
Adding a line-height: 1px to the td
Adding font-size: 0; to the td
Making sure every section had padding: 0; and margin: 0;
Adding cellpadding="0" and cellspacing="0" to all tables, tr and td elements
Adding width and height to the table and td (which didn't have any effect)
Adding float: left and align="left"
Adding table-layout:fixed;
Adding border: 0; border-spacing: 0; and border-collapse; on elements
The issue seems to appear on Samsung and iPhone devices that I have tested.
Any new suggestions would be appreciated.
The image that specifically has extra spacing is here:
<table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="180">
<tr style="padding: 0; margin: 0;">
<td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important;"></td>
</tr>
</table>
How here is the entire code as I have two tables side by side which may be the cause of the issue:
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: #00001b;
text-decoration: underline;
}
table {
padding: 0;
margin: 0;
display: block;
}
</style>
</head>
<body>
<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="367" cellspacing="0">
<tr style="padding: 0; margin: 0;">
<td cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0;" border="0" height="10">
<table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="180">
<tr style="padding: 0; margin: 0;">
<td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important; padding: 0; margin: 0;"></td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace:0pt;mso-table-rspace:0pt; margin: 0; padding: 0 0 7px 0; line-height:1px; font-size:0; float:left;">
<tr>
<td cellpadding="0" cellspacing="0" width="165" style="text-align: left;">
<strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br />
<span style="font-size: 11px; line-height: 100%;"><em>Job Title / GIA GG, BA</em></span><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<p style="font-size: 11px; line-height: 160%; margin: 10px 0;">
<strong>T:</strong> 00000000 |
<strong>W:</strong> www.website.com.au<br /> Street Address | City | State Postcode</p>
<p style="margin:6px 0;"><img src="facebook.png" alt="Facebook" width="28" height="28"> <img src="instagram.png" alt="Instagram" width="28" height="28"></p>
</td>
</tr>
</table>
</body>
</html>
<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="345" cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top">
<table align="left" cellpadding="0" cellspacing="0" border="0" width="180">
<tr>
<td valign="bottom" cellpadding="0" cellspacing="0"><img src="logo.png" width="180" height="100" alt="" style="display: block"></td>
</tr>
</table>
</td>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="165">
<tr>
<td style="text-align: left;padding:0 0 0 25px;">
<strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br />
<span style="font-size: 11px; line-height: 100%;"><em>Job Title / GIA GG, BA</em></span><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<p style="font-size: 11px; line-height: 160%; margin: 10px 0;">
<strong>T:</strong> 00000000 |
<strong>W:</strong> www.website.com.au<br /> Street Address | City | State Postcode</p>
<p style="margin:6px 0;"><img src="facebook.png" alt="Facebook" width="28" height="28"> <img src="instagram.png" alt="Instagram" width="28" height="28"></p>
</td>
</tr>
</table>
You may want to add a </td><td> between your two tables. I've also moved the 25px padding to the left of the copy, rather than the image. (I've assumed the img dimensions here). This looked ok on my EoA previews, if it doesn't help could you post a screenshot of your issue?
Code it like an email! Try the hybrid method! This method allows you to cater for outlook email clients and the use of divs means you dont have to worry about the extra gaps.
<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="367" cellspacing="0">
<tr style="padding: 0; margin: 0;">
<td style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px; width: 367px;">
<!--[if (gte mso 9)|(IE)]>
<table width="367" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="180">
<![endif]-->
<div style="width: 180px; display: inline-block; vertical-align: top;">
<table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="100%">
<tr style="padding: 0; margin: 0;">
<td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important; padding: 0; margin: 0;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="180">
<![endif]-->
<div style="width: 180px; display: inline-block; vertical-align: top;">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace:0pt;mso-table-rspace:0pt; margin: 0; padding: 0 0 7px 0; line-height:1px; font-size:0; float:left;" width="100%">
<tr>
<td cellpadding="0" cellspacing="0" width="165" style="text-align: left;">
<strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br />
<span style="font-size: 11px; line-height: 100%;"><em>Job Title / GIA GG, BA</em></span><br />
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<p style="font-size: 11px; line-height: 160%; margin: 10px 0;">
<strong>T:</strong> 00000000 |
<strong>W:</strong> www.website.com.au<br /> Street Address | City | State Postcode</p>
<p style="margin:6px 0;"><img src="facebook.png" alt="Facebook" width="28" height="28"> <img src="instagram.png" alt="Instagram" width="28" height="28"></p>
</td>
</tr>
</table>
Let me know if this method works for you.