Re: Outlook Email Not Rendering Correctly

Re: Outlook Email Not Rendering Correctly

And last thing, max-width is an unsupported CSS, all your tables that use max-width won't work in Outlook. For example, you really need to use an attribute width="500" combined to an inline CSS style="margin:0px auto; width:500px;". The margin:0px auto will center the table in Yahoo. That table will determine the width of your email. You also add a class for resizing your table to 100% on mobile.

Then, all the full-width tables inside that main table can use width 100%.

I'll give you an example of how all my template begin with:

<body bgcolor="${BgEmailColor}" style="width:100%!important; min-width:100%!important; margin:0!important; padding:0!important;">

<table role="presentation" width="100%" bgcolor="${BgEmailColor}" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0px auto; width:100%!important; min-width:100%!important;">
<tr>
<td class="h0" style="padding-top:${Top50pxSpacer00}px; padding-bottom:${Top50pxSpacer00}px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="700" class="tableCollapse" align="center" style="margin:0px auto; width:700px;">
<tr>
<td class="mktoContainer" id="MainContainer" align="center" valign="top">

*** ALL YOUR MODULES HERE ***

</td>
</tr>
</table>
</td>
</tr>
</table>

</body>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Outlook Email Not Rendering Correctly

@media only screen and (max-width:700px) {
table.tableCollapse {width:100%!important;}
}
</style>
James_Walsh
Level 3

Re: Outlook Email Not Rendering Correctly

Thanks for your help Eric. I will give this a try and pass along to my developer.