Email HTML Issue-CodePudding

This is a confirmation email from a MailJet subscription widget. Problem is that the body goes too wide in Outlook but header is responsive and looks correct. I've tried a ton of things like fixed width, break word, etc to try and contain the body. I'm sure it is simple but I guess this is part of the learning journey! Any help is much appreciated!

 <html><body><div  style="width: 100%; max-width: 600px; background-color: white; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.35);">
    <table  style="width: 100%; background-color: black; font-family: Ubuntu, Helvetica; border-collapse: collapse;">
        <tbody><tr  style="height: 20px; line-height: 20px;"><td> </td></tr>
    </tbody></table>
    <table  style="width: 100%; font-family: Ubuntu, Helvetica; border-collapse: collapse;background-color: #e7eaef;">
            <tbody><tr style="height: 60px; line-height: 60px; width: 100%; text-align: center;"><td><div  style="font-family: Ubuntu, Helvetica; color:#7d7f8b; display: inline-block; vertical-align: middle;"><b ><font size="6">Joy Kate Designs</font></b></div></td></tr>
    </tbody></table>
    <table  style="width: 100%; background-color: white; font-family: Ubuntu, Helvetica; border-collapse: collapse;">
        <tbody><tr style="text-align: center; padding: 0 0 20px 0;">
            <td style="height: 75px; line-height: 75px; width: 100%; vertical-align: middle;">
                <span  style="font-family: Ubuntu, Helvetica; font-size: 18px; color: #333333; line-height: normal;"><b >Please Confirm Your Subscription</b>
                </span>
            </td>
        </tr>
        <tr><td style="height: 75px; line-height: 75px; width: 100%; vertical-align: middle; padding: 0 60px;"><div  style="text-align: left; color: grey; margin-bottom: 25px; line-height: normal;">Thank you very much for your subscription to our newsletter. To finalise it, please click on the button below. If you didn't ask to subscribe or you have changed your mind, simply ignore this email.</div></td></tr>
        <tr>
            <td style="padding-bottom: 15px; text-align: center;">
                <data id="start-link"></data>
                <div  style="font-family: Ubuntu, Helvetica; font-size: 13px; padding: 0px 25px; color: white; background-color: rgb(240, 104, 104); text-align: center; display: inline-block; border-radius: 3px;">
                    <div style="display: table; height: 45px; width: 100%;">
                        <div style="display: table-cell; vertical-align: middle;">
                            <div  style="font-family: Ubuntu, Helvetica; display: inline-block; vertical-align: middle;"><b >CLICK HERE TO SUBSCRIBE</b></div>
                        </div>
                    </div>
                </div>
                <data id="end-link"></data>
            </td>
        </tr>
        <tr><td style="text-align: left; height: 75px; line-height: 75px; width: 100%; vertical-align: middle; padding: 0 60px;"><div  style="display: inline-block; font-family: Ubuntu, Helvetica; text-align: left; margin-bottom: 24px; color: grey; line-height: normal;"><i  style="word-break: break all; max-width: 600px;">If you are having troubles with the button, copy/paste the following URL in your browser: [URL]</i></div></td></tr>
        <tr><td style="text-align: left; padding: 0 60px; height: 30px; line-height: 30px;"><div  style="font-family: Ubuntu, Helvetica; display: inline-block; text-align: left; color: grey; line-height: normal;">Thanks,</div></td></tr>
        <tr><td style="text-align: left; padding: 0 60px; height: 30px; line-height: 30px;"><div  style="font-family: Ubuntu, Helvetica; display: inline-block; text-align: left; color: grey; line-height: normal;"><b >Joy Kate Designs</b></div></td></tr>
    </tbody></table>
</div></body></html>

CodePudding user response：

The main problem here is that The Outlooks on Windows don’t support max-width (see Can I email for details). An easy solution is to add what’s usually referred to as a ghost table: a <table> within conditional comments specifically for Outlook.

Add the following right after the opening of your <body>:

<!--[if mso]>
<table cellspacing="0" cellpadding="0" border="0" align="center" role="presentation" style="width:600px;"><tr><td>
<![endif]-->

And add the following right before the closing of your </body>:

<!--[if mso]>
</td></tr></table>
<![endif]-->

It also looks like the generated URL at the end of your email (seen in your screenshot but not in your code) is forcing your layout to expand. To prevent this, you can force the text to break on multiple lines by adding word-break:break-all; word-wrap:break-word; in the style of the maching <td>.

Here’s a full code example fixing these two issues (tested on Email on Acid):

 <html><body>
<!--[if mso]>
<table cellspacing="0" cellpadding="0" border="0" align="center" role="presentation" style="width:600px;"><tr><td>
<![endif]-->
    <div  style="width: 100%; max-width: 600px; background-color: white; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.35);">
    <table  style="width: 100%; background-color: black; font-family: Ubuntu, Helvetica; border-collapse: collapse;">
        <tbody><tr  style="height: 20px; line-height: 20px;"><td> </td></tr>
    </tbody></table>
    <table  style="width: 100%; font-family: Ubuntu, Helvetica; border-collapse: collapse;background-color: #e7eaef;">
            <tbody><tr style="height: 60px; line-height: 60px; width: 100%; text-align: center;"><td><div  style="font-family: Ubuntu, Helvetica; color:#7d7f8b; display: inline-block; vertical-align: middle;"><b ><font size="6">Joy Kate Designs</font></b></div></td></tr>
    </tbody></table>
    <table  style="width: 100%; background-color: white; font-family: Ubuntu, Helvetica; border-collapse: collapse;">
        <tbody><tr style="text-align: center; padding: 0 0 20px 0;">
            <td style="height: 75px; line-height: 75px; width: 100%; vertical-align: middle;">
                <span  style="font-family: Ubuntu, Helvetica; font-size: 18px; color: #333333; line-height: normal;"><b >Please Confirm Your Subscription</b>
                </span>
            </td>
        </tr>
        <tr><td style="height: 75px; line-height: 75px; width: 100%; vertical-align: middle; padding: 0 60px;"><div  style="text-align: left; color: grey; margin-bottom: 25px; line-height: normal;">Thank you very much for your subscription to our newsletter. To finalise it, please click on the button below. If you didn't ask to subscribe or you have changed your mind, simply ignore this email.</div></td></tr>
        <tr>
            <td style="padding-bottom: 15px; text-align: center;">
                <data id="start-link"></data>
                <div  style="font-family: Ubuntu, Helvetica; font-size: 13px; padding: 0px 25px; color: white; background-color: rgb(240, 104, 104); text-align: center; display: inline-block; border-radius: 3px;">
                    <div style="display: table; height: 45px; width: 100%;">
                        <div style="display: table-cell; vertical-align: middle;">
                            <div  style="font-family: Ubuntu, Helvetica; display: inline-block; vertical-align: middle;"><b >CLICK HERE TO SUBSCRIBE</b></div>
                        </div>
                    </div>
                </div>
                <data id="end-link"></data>
            </td>
        </tr>
        <tr><td style="text-align: left; height: 75px; line-height: 75px; width: 100%; vertical-align: middle; padding: 0 60px; word-break:break-all; word-wrap:break-word;"><div  style="display: inline-block; font-family: Ubuntu, Helvetica; text-align: left; margin-bottom: 24px; color: grey; line-height: normal;"><i  style="word-break: break all; max-width: 600px;">If you are having troubles with the button, copy/paste the following URL in your browser: [URL]</i></div></td></tr>
        <tr><td style="text-align: left; padding: 0 60px; height: 30px; line-height: 30px;"><div  style="font-family: Ubuntu, Helvetica; display: inline-block; text-align: left; color: grey; line-height: normal;">Thanks,</div></td></tr>
        <tr><td style="text-align: left; padding: 0 60px; height: 30px; line-height: 30px;"><div  style="font-family: Ubuntu, Helvetica; display: inline-block; text-align: left; color: grey; line-height: normal;"><b >Joy Kate Designs</b></div></td></tr>
    </tbody></table>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]--></body></html>