zgnky
Reputation: 11
Responsive email template Outlook displaying issue
Can someone look at the below codes and tell me what I did wrong ? I am testing the my template on litmus and everything seems perfect but when I send a test email to my outlook account the template displaying very messy. Thanks in advance. Below you can find the product table codes.
<!-- * PRODUCT TABLE * -->
<table mc:repeatable="productfourgrid" mc:variant="productfourgrid" cellpadding="0" cellspacing="0" border="0" align="center" class="producttable" width="600" bgcolor="#FFFFFF">
<!-- * TOP SPACER * -->
<tr>
<td colspan="3" height="10"></td>
</tr>
<!-- * END OF TOP SPACER * -->
<tr>
<td>
<!-- * PRODUCT 2 TABLE * -->
<table cellpadding="0" cellspacing="0" border="0" align="left" class="product" width="297">
<tr>
<td>
<!-- * PRODUCT 1 * -->
<table cellpadding="0" cellspacing="0" border="0" align="left" class="product" width="144">
<!-- * PRODUCT IMAGE HERE * -->
<tr>
<td width="5"></td>
<td align="center"><img mc:edit="productimage1" class="productimg" src="images/product1.png" alt="Image Alt Here" title="Image Title Here"/></td>
<td width="5"></td>
</tr>
<!-- * END OF PRODUCT IMAGE HERE * -->
<!-- * TOP SPACER * -->
<tr>
<td height="10"></td>
<td height="10"></td>
<td height="10"></td>
</tr>
<!-- * END OF TOP SPACER * -->
<!-- * PRODUCT DESCRIPTION HERE * -->
<tr>
<td></td>
<td mc:edit="productdescription1" align="center" style="font-size:13px; line-height:150%;"><strong>Makita:</strong> Boremaskine med slag. 12V.</td>
<td></td>
</tr>
<!-- * END OF PRODUCT DESCRIPTION HERE * -->
<!-- * TOP SPACER * -->
<tr>
<td height="5"></td>
<td height="5"></td>
<td height="5"></td>
</tr>
<!-- * END OF TOP SPACER * -->
<!-- * PRICE HERE * -->
<tr>
<td></td>
<td mc:edit="price1" align="center" style="font-size:18px;">DKK 499,00</td>
<td></td>
</tr>
<!-- * END OF PRICE HERE * -->
<!-- * TOP SPACER * -->
<tr>
<td height="5"></td>
<td height="5"></td>
<td height="5"></td>
</tr>
<!-- * END OF TOP SPACER * -->
<!-- * BUTTON HERE * -->
<tr>
<td></td>
<td align="center">
<a href="#" target="_blank"><img mc:edit="button1" src="images/button.png" alt="Button Alt Here" title="Button Title Here"/></a></td>
<td></td>
</tr>
<!-- * END OF BUTTON HERE * -->
</table>
<!-- * END OF PRODUCT 1 * -->
<!-- * PRODUCT 2 * -->
<table cellpadding="0" cellspacing="0" border="0" align="right" class="product" width="144">
<!-- * PRODUCT IMAGE HERE * -->
<tr>
<td width="5"></td>
<td align="center"><img mc:edit="productimage2" class="productimg" src="images/product2.png" alt="Image Alt Here" title="Image Title Here"/></td>
<td width="5"></td>
</tr>
<!-- * END OF PRODUCT IMAGE HERE * -->
<!-- * TOP SPACER * -->
<tr>
<td height="10"></td>
<td height="10"></td>
<td height="10"></td>
</tr>
<!-- * END OF TOP SPACER * -->
<!-- * PRODUCT DESCRIPTION HERE * -->
<tr>
<td></td>
<td mc:edit="productdescription2" align="center" style="font-size:13px; line-height:150%;"><strong>Makita:</strong> Boremaskine med slag. 12V.</td>
<td></td>
</tr>
<!-- * END OF PRODUCT DESCRIPTION HERE * -->
<!-- * TOP SPACER * -->
<tr>
<td height="5"></td>
<td height="5"></td>
<td height="5"></td>
</tr>
<!-- * END OF TOP SPACER * -->
<!-- * PRICE HERE * -->
<tr>
<td></td>
<td mc:edit="price2" align="center" style="font-size:18px;">DKK 499,00</td>
<td></td>
</tr>
<!-- * END OF PRICE HERE * -->
<!-- * TOP SPACER * -->
<tr>
<td height="5"></td>
<td height="5"></td>
<td height="5"></td>
</tr>
<!-- * END OF TOP SPACER * -->
<!-- * BUTTON HERE * -->
<tr>
<td></td>
<td align="center">
<a href="#" target="_blank"><img mc:edit="button2" src="images/button.png" alt="Button Alt Here" title="Button Title Here"/></a></td>
<td></td>
</tr>
<!-- * END OF BUTTON HERE * -->
</table>
<!-- * END OF PRODUCT 2 * -->
</td>
</tr>
</table>
<!-- * PRODUCT 2 TABLE * -->
<!-- * PRODUCT 2 TABLE * -->
<table cellpadding="0" cellspacing="0" border="0" align="right" class="product" width="297">
<tr>
<td>
<!-- * PRODUCT 3 * -->
<table cellpadding="0" cellspacing="0" border="0" align="left" class="product" width="144">
<!-- * PRODUCT IMAGE HERE * -->
<tr>
<td width="5"></td>
<td align="center"><img mc:edit="productimage3" class="productimg" src="images/product3.png" alt="Image Alt Here" title="Image Title Here"/></td>
<td width="5"></td>
</tr>
<!-- * END OF PRODUCT IMAGE HERE * -->
<!-- * TOP SPACER * -->
<tr>
<td height="10"></td>
<td height="10"></td>
<td height="10"></td>
</tr>
<!-- * END OF TOP SPACER * -->
<!-- * PRODUCT DESCRIPTION HERE * -->
<tr>
<td></td>
<td mc:edit="productdescription3" align="center" style="font-size:13px; line-height:150%;"><strong>Makita:</strong> Boremaskine med slag. 12V.</td>
<td></td>
</tr>
<!-- * END OF PRODUCT DESCRIPTION HERE * -->
<!-- * TOP SPACER * -->
<tr>
<td height="5"></td>
<td height="5"></td>
<td height="5"></td>
</tr>
<!-- * END OF TOP SPACER * -->
<!-- * PRICE HERE * -->
<tr>
<td></td>
<td mc:edit="price3" align="center" style="font-size:18px;">DKK 499,00</td>
<td></td>
</tr>
<!-- * END OF PRICE HERE * -->
<!-- * TOP SPACER * -->
<tr>
<td height="5"></td>
<td height="5"></td>
<td height="5"></td>
</tr>
<!-- * END OF TOP SPACER * -->
<!-- * BUTTON HERE * -->
<tr>
<td></td>
<td align="center">
<a href="#" target="_blank"><img mc:edit="button3" src="images/button.png" alt="Button Alt Here" title="Button Title Here"/></a></td>
<td></td>
</tr>
<!-- * END OF BUTTON HERE * -->
</table>
<!-- * END OF PRODUCT 3 * -->
<!-- * PRODUCT 4 * -->
<table cellpadding="0" cellspacing="0" border="0" align="right" class="product" width="144">
<!-- * PRODUCT IMAGE HERE * -->
<tr>
<td width="5"></td>
<td align="center"><img mc:edit="productimage4" class="productimg" src="images/product4.png" alt="Image Alt Here" title="Image Title Here"/></td>
<td width="5"></td>
</tr>
<!-- * END OF PRODUCT IMAGE HERE * -->
<!-- * TOP SPACER * -->
<tr>
<td height="10"></td>
<td height="10"></td>
<td height="10"></td>
</tr>
<!-- * END OF TOP SPACER * -->
<!-- * PRODUCT DESCRIPTION HERE * -->
<tr>
<td></td>
<td mc:edit="productdescription4" align="center" style="font-size:13px; line-height:150%;"><strong>Makita:</strong> Boremaskine med slag. 12V.</td>
<td></td>
</tr>
<!-- * END OF PRODUCT DESCRIPTION HERE * -->
<!-- * TOP SPACER * -->
<tr>
<td height="5"></td>
<td height="5"></td>
<td height="5"></td>
</tr>
<!-- * END OF TOP SPACER * -->
<!-- * PRICE HERE * -->
<tr>
<td></td>
<td mc:edit="price4" align="center" style="font-size:18px;">DKK 499,00</td>
<td></td>
</tr>
<!-- * END OF PRICE HERE * -->
<!-- * TOP SPACER * -->
<tr>
<td height="5"></td>
<td height="5"></td>
<td height="5"></td>
</tr>
<!-- * END OF TOP SPACER * -->
<!-- * BUTTON HERE * -->
<tr>
<td></td>
<td align="center">
<a href="#" target="_blank"><img mc:edit="button4" src="images/button.png" alt="Button Alt Here" title="Button Title Here"/></a></td>
<td></td>
</tr>
<!-- * END OF BUTTON HERE * -->
</table>
<!-- * END OF PRODUCT 4 * -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- * PRODUCT 2 TABLE * -->
<!-- * END OF PRODUCT TABLE * -->
Upvotes: 1
Views: 425
Answers (1)
John
Reputation: 12193
Try the following and see what fixes it:
- Set
width=""on every<td>that isn't in a row by itself. Outlook has issues with widths when not specified. - Try using table cells instead of placing the tables as siblings. I see you've allowed extra space in your table widths, but you can avoid it this way. If you need it to be responsive, from your media query you can toggle
display:block; width:100%;on the<td>'s to get them to overflow to the next line. Basic example here. - Try setting widths on your images, the default height might be causing an issue.
- Put
in all empty cells so they don't collapse.
You also don't need the colspan on the first row - I doubt that makes a difference, but good to keep it clean when debugging. Let me know how that goes.
Upvotes: 1
Related Questions
- CSS Email Template at Outlook does not display correctly
- HTML not format correctly in outlook
- HTML email template is getting messed up in outlook windows
- Responsive Email Template - Outlook 2013 Breaking Layout
- Outlook web responsive email
- Responsive Email (Outlook 2016) issues
- Problems with responsive email templates
- Email template, fine in all clients except Outlook
- Responsive email not doing its thing in Outlook
- HTML responsive email width issue in Outlook