Email content max width

Support
1

Currently emails when users text or mention other users will receive emails.
Email content will display 100% of the email window.

So how to set the maximum width of emails! example 650px?

image
image1314×610 63.2 KB

I tried this but it didn’t work!

image
image841×313 12.1 KB

2 Likes
3

You can set a maximum width for emails by creating an email template that wraps the
%{email_content} tag in a table that has its max-width set with CSS. If you would like to constrain the width for emails viewed on Outlook, you also need to add a table with a fixed width that is wrapped in <!--[if mso]> tags.

Here’s a basic email template that limits the content to a maximum of 600px. If you use this template, be sure to replace the logo image URL with the URL of your site’s logo. Also replace the value of the href attribute with your site’s URL. The logo image’s alt attribute should be set to something that makes sense for your site.

:warning: Because the template include the site logo, you need to be sure to disable the apply custom styles to digest site setting. If you do not do this, summary emails sent from your site will have two logos displayed at the top of the email.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<!--[if mso]>
<style type="text/css">
    body, table, td, th, h1, h2, h3 {
        font-family: Helvetica, Arial, sans-serif !important;
    }
</style>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td style="padding: 10px 0 30px 0;">
            <!--[if gte mso 9]>
            <table width="600" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td><![endif]-->
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
                   style="max-width: 600px;border-collapse: collapse;">
                <tr>
                    <td style="padding: 20px 15px 20px 15px;">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td align="center">
                                    <a href="https://forum.example.com">
                                        <img src="https://your-site-logo-url"
                                             alt="Your site name" width="150" height="40"
                                             style="display: block;"/>
                                    </a>
                                </td>
                            </tr>

                        </table>
                    </td>
                </tr>
                <tr>
                    <td style="padding: 0 15px 0 15px;">
                        <hr style="background-color: #ddd; height: 1px; border: 1px;">
                    </td>
                </tr>
                <tr>
                    <td style="padding: 20px 15px 30px 15px; color: #153643; font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;">
                        %{email_content}
                    </td>
                </tr>
            </table>
            <!--[if gte mso 9]></td></tr></table><![endif]-->
        </td>
    </tr>
</table>

I’ve tested this with an email testing service with most popular email clients:

iPad (Retina) (iOS 13.1):

image
image780×1062 239 KB

Gmail App (Android 6.0):

image
image366×695 99.1 KB

iPhone 6 Plus:

image
image424×1047 171 KB

Outlook.com:

image
image939×844 291 KB

7 Likes
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.