# Email content max width

**URL:** https://meta.discourse.org/t/email-content-max-width/137069
**Category:** Support
**Created:** [December 26, 2019, 6:58am UTC](https://meta.discourse.org/t/email-content-max-width/137069 "2019-12-26T06:58:38Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Bcat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bcat/32/163148_2.png) [@Bcat](https://meta.discourse.org/u/Bcat)
#### Post date: [December 26, 2019, 6:58am UTC](https://meta.discourse.org/t/email-content-max-width/137069/1 "2019-12-26T06:58:38Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/a/b/abd959c7981f8763ec9baa07abdf0da9eb5f28dc.png)

I tried this but it didn’t work!

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/e/1e427fa569e04bc7514e151c90d7bb19dbc5131e.png)

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [December 28, 2019, 3:38am UTC](https://meta.discourse.org/t/email-content-max-width/137069/3 "2019-12-28T03:38:04Z")

</div>

> [@Bcat](#):
>
> So how to set the maximum width of emails! example 650px?

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.

> ⚠ 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.

```html
<!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](https://global.discourse-cdn.com/meta/original/3X/6/5/65c6d5490c9d0ae3d9e3562c4d1eb5358d49ab2b.jpeg)

Gmail App (Android 6.0):

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/7/771e28424d5fa666c864cf65518e541653873340.jpeg)

iPhone 6 Plus:

 ![image](https://global.discourse-cdn.com/meta/original/3X/9/c/9c21972ab675dc7a641016ea14cca09211528e6c.jpeg)

[Outlook.com](http://Outlook.com):

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/9/c953fe4eb8c067c33fe402fee30d40db4c5c6282.jpeg)

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [January 27, 2020, 3:38am UTC](https://meta.discourse.org/t/email-content-max-width/137069/4 "2020-01-27T03:38:09Z")

</div>

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