Changing email width in templates

Summary

The functionality to change the email width in EasyEditor is not yet available for templates under the 'Start from scratch' and 'Mobile email. Rebooted.' sections of the 'Free templates' library. The reason for this is that we have encountered issues when doing so with certain email clients for these templates (mainly Gmail on Android).

However, within a certain set of parameters, it is possible to alter this manually, though doing so may prove awkward in an existing campaign.

We also urge you strongly to test your campaign thoroughly prior to sending.

Preparation

The best way to achieve changing email width is to create a new campaign using one of the 'Start from scratch' templates.

If you are trying to modify an existing template, then you may have problems getting all the existing blocks to update to the new size. The best way of updating a block is to move it somewhere else in the campaign, and then move it back again. When moving a block, the editor will update that block, and all blocks nested within it.

Overriding the email width styles

To override the email width styles, create a new <style> block below all the other <style> blocks in your campaign that look like this:

<style ee-render="inline">
  .full-email-width, .email-width, .row { max-width: 660px; }
</style>

Once you have done this, you can change the 660px to what you need.

Limits

You may well find that there are limits to what values work here. At the time of writing, anything less than 620px will not work, and there have been varying results with values of 700px or greater.

The issues with narrow widths are browser-compatibility ones within EasyEditor itself, but the issues with larger values are directly related to how the email will render on different mobile devices.

So, as always, please test (preferably using something like our Litmus-powered inbox testing tool) before you send your campaign.

Have more questions? Submit a request

Comments

  • Avatar

    Thanks for this.

    With the resolutions of smartphone's constantly changing what is dotmailer's recommendation for the ideal width of an email?

  • Avatar

    Jon,

    All our new templates are 660px wide. With a default padding on left and right of 20px, this takes the actual content width down to 620px.

    We have found this seems to work best for most devices. As per the above, if we go much wider, or narrower, some of the code that makes the email responsive seems to break on certain email clients!

    Hope that helps!

    Rik

  • Avatar

    Hi Rik,

    Thanks that's useful to know.

    Regards

    Jon

  • Avatar

    This would have been helpful to know in advance, or even have the *new* email width displayed on the page - our banner images are 600px to fit our emails. We've had no end of problems with templates suddenly corrupting etc. So I started from scratch to create another one, only to find big margins where I don't want them and our images are now too short.
    A bit of warning would have been useful!