RobinHood
Reputation: 23
Email HTML Issue
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 class="mj-w-double-optin-email" style="width: 100%; max-width: 600px; background-color: white; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.35);">
<table class="mockup-content paint-area mj-opt-in" style="width: 100%; background-color: black; font-family: Ubuntu, Helvetica; border-collapse: collapse;">
<tbody><tr class="mj-opt-in-head" style="height: 20px; line-height: 20px;"><td> </td></tr>
</tbody></table>
<table class="mockup-content paint-area" 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 class="mj-opt-in-title paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; color:#7d7f8b; display: inline-block; vertical-align: middle;"><b class="medium-b"><font size="6">Joy Kate Designs</font></b></div></td></tr>
</tbody></table>
<table class="mockup-content paint-area" 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 class="mj-opt-in-subscribe-title paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; font-size: 18px; color: #333333; line-height: normal;"><b class="medium-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 class="mj-opt-in-display-text paint-area paint-area--text Medium Medium-rich" 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 class="mj-opt-in-button mj-w-btn mockup-content paint-area" 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 class="mj-opt-in-button-content paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; vertical-align: middle;"><b class="medium-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 class="mj-opt-in-footer paint-area paint-area--text Medium Medium-rich" style="display: inline-block; font-family: Ubuntu, Helvetica; text-align: left; margin-bottom: 24px; color: grey; line-height: normal;"><i class="medium-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 class="mj-opt-in-signature-top paint-area paint-area--text Medium Medium-rich" 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 class="mj-opt-in-signature-bottom paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; text-align: left; color: grey; line-height: normal;"><b class="medium-b">Joy Kate Designs</b></div></td></tr>
</tbody></table>
</div></body></html>
Upvotes: 0
Views: 205
Answers (1)
HTeuMeuLeu
Reputation: 2811
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 class="mj-w-double-optin-email" style="width: 100%; max-width: 600px; background-color: white; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.35);">
<table class="mockup-content paint-area mj-opt-in" style="width: 100%; background-color: black; font-family: Ubuntu, Helvetica; border-collapse: collapse;">
<tbody><tr class="mj-opt-in-head" style="height: 20px; line-height: 20px;"><td> </td></tr>
</tbody></table>
<table class="mockup-content paint-area" 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 class="mj-opt-in-title paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; color:#7d7f8b; display: inline-block; vertical-align: middle;"><b class="medium-b"><font size="6">Joy Kate Designs</font></b></div></td></tr>
</tbody></table>
<table class="mockup-content paint-area" 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 class="mj-opt-in-subscribe-title paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; font-size: 18px; color: #333333; line-height: normal;"><b class="medium-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 class="mj-opt-in-display-text paint-area paint-area--text Medium Medium-rich" 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 class="mj-opt-in-button mj-w-btn mockup-content paint-area" 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 class="mj-opt-in-button-content paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; vertical-align: middle;"><b class="medium-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 class="mj-opt-in-footer paint-area paint-area--text Medium Medium-rich" style="display: inline-block; font-family: Ubuntu, Helvetica; text-align: left; margin-bottom: 24px; color: grey; line-height: normal;"><i class="medium-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 class="mj-opt-in-signature-top paint-area paint-area--text Medium Medium-rich" 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 class="mj-opt-in-signature-bottom paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; text-align: left; color: grey; line-height: normal;"><b class="medium-b">Joy Kate Designs</b></div></td></tr>
</tbody></table>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]--></body></html>
Upvotes: 1