Re: Outlook Email Not Rendering Correctly

Éric_Vaillancou · ‎01-23-2020

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Éric_Vaillancou · ‎01-23-2020

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

James_Walsh · ‎01-23-2020

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