'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!

enter image description here

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


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions