I am having rendering issues in Outlook 2016 & 2013, it's adding about 20px padding to the bottom of my entire 700px container table. I have applied styling of border-collapse: collapse; mso-margin-bottom-alt:0; to all tables which normally fixes this kind of thing but I'm still having the same issues.
<table class="container" cellpadding="0" cellspacing="0" role="presentation" width="700" style="border-collapse: collapse; mso-margin-bottom-alt:0;">
<tr>
<td bgcolor="#1E1464" align="left"><table style="border-collapse: collapse; mso-margin-bottom-alt:0;" cellpadding="0" cellspacing="0" role="presentation" width="100%" align="center">
<tr>
<td class="col"><table style="border-collapse: collapse; mso-margin-bottom-alt:0;" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr style="display:table; width:100%!important;">
<th class="hide-sm" align="center" width="30px" height="30px" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt;"> </th>
<th class="col full-width-sm" align="center" width="430" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt; vertical-align:top;"><table class="full-width-sm" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border-collapse: collapse;">
<tr>
<td class="hide-sm" style="line-height:1px; font-size:1px; padding-top:15px;"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:15px;"> </td>
</tr>
<tr>
<td class="banner-padding-mobile" style="color:#ffffff; font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:24px; line-height:34px; text-align:center;">Lorem ipsum dolor sit</td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:20px;"> </td>
</tr>
<tr>
<td class="banner-padding-mobile" style="color:#ffffff; font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:18px; line-height:28px; text-align:left; font-weight: 300;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi diam nulla, porttitor sagittis erat et, egestas tincidunt arcu. Maecenas ultrices velit velit. Interdum et malesuada fames ac ante ipsum primis.</td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:20px;"> </td>
</tr>
<tr>
<td class="align-sm-center" style="line-height: 40px;"><table style="border-collapse: collapse; mso-margin-bottom-alt:0;"cellpadding="0" cellspacing="0" role="presentation" align="center">
<tr>
<th bgcolor="#23a050" style="border-radius: 30px; line-height: 100%; mso-padding-alt: 5px 30px 10px;"><a href="" target="_blank" style="font-family: 'Campton', Helvetica, Arial, sans-serif; color: #FFFFFF; display: block; font-size: 16px; line-height: 14pt; padding: 14px 26px; text-decoration: none;">Download now ❯</a></th>
<th class="hide-sm" align="center" height="30px" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt; padding-left: 20px;"> </th>
<th class="hide-sm" bgcolor="#ffffff" style="border-radius: 30px; line-height: 100%; mso-padding-alt: 5px 30px 10px;"> <a href="" target="_blank" style="font-family: 'Campton', Helvetica, Arial, sans-serif; color: #3241F5; display: block; font-size: 16px; line-height: 14pt; padding: 14px 26px; text-decoration: none;">More information ❯</a></th>
</tr>
</table></td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:40px;"> </td>
</tr>
</table></th>
<th class="hide-sm" align="center" width="30px" height="30px" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt;"> </th>
<th class="col" align="center" width="210" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt; vertical-align:top;"><table class="full-width-sm" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border-collapse: collapse; mso-margin-bottom-alt:0;">
<tr>
<td class="hide-sm" align="center"><img class="img_full_width" style="display:block; height:auto; outline:none; border:0; margin: 0; text-decoration:none; font-family: 'Campton', arial, sans-serif; font-size:20px; line-height:1.5; color:blue; text-align:center; margin:0;" src="images/banner-image.jpg" width="210" height="auto" alt=""></td>
</tr>
<tr style="display:table; width:100%!important">
<th> <!-- end of desktop view here -->
<!--[if !mso]><!-->
<!--desktop hide starts-->
<div class="show-sm align-sm-center" style="display: none; font-size: 0; max-height: 0; line-height: 0; mso-hide: all; width:0; overflow:hidden;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-margin-bottom-alt:0;">
<tr>
<td style="line-height:1px; font-size:1px; text-align:center; font-weight:600;"><img src="images/hero.jpg" alt="" width="100%" height="auto" class="img_full_width" style="display:block; height:auto; outline:none; border:0; text-decoration:none; font-family: sans-serif; font-size:20px; line-height:1.5; color:white; text-align:center;" /></td>
</tr>
</table>
</div>
<!--desktop hide ends-->
<!--<![endif]--> </th>
</tr>
</table></th>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
Any help would be hugely appreciated!
The main problem seems to come from the last part of your code where you’re hiding content from Outlook (
<th> <!-- end of desktop view here -->). You're hiding the content inside the<th>, but that still leaves an empty<th>for Outlook, thus creating this 20px or so empty cell visible. In order to fix this, you can move the conditional comment outside of the entire row you want to hide from Outlook. Here's an example:Also, in this current form, your code will cause problem in the Outlooks on Windows rendering at 120dpi. Here’s a great ressource explaining how to fix this. In short:
<html xmlns:o="urn:schemas-microsoft-com:office:office">.widthattribute in HTML with its equivalent in CSS.Here's a full code example based on your code:
And here’s a test link on Email on Acid. (Here's a test of your code for comparison.)