How do I use width and max width for containers? (Modern Editor)

What's the difference between width and max width in containers? There's a difference! In general you don't need to touch these fields in your Modern Editor email template. But, you may find a need depending on your design. Let's review what each can be used for in your email design. 


Topics covered in this article:

What is width used for in the email template

What is max width used for in the email template

 

What is width used for in the email template?

Width should only be set on a container when you want to set the actual width to a specific size, regardless of responsiveness. For example, if a 300px image is uploaded into a text area and you want that image to stay this size on both desktop and mobile, set the width to 300px. Width can be set for any block area, just adjust the container styles.

 

Example, restricting the total width of an image block

You can set widths for images when you want to restrict the largest width of the image. Use with caution! This sets a restrictive width on the block making it not fluid.

 

1. Click on your image block area from the email preview panel.

ME_imageblock_editandpreview.PNG

 

 

2. Click on Styles to edit styles for 'This block'.

ME_imageblock_styles_thisblock.PNG

 

 

3. Click open Container.

ME_imageblock_styles_container.PNG

 

 

4. Inside the Container, update the width.

 

 

 

 

What is max width used for in the email template?

Max width should only be set on a container when you want to restrict the largest width of the image. Max width is best when you want to maintain the fluid nature of the container until a specific width is reached. For example, if the email was opened on a desktop and was display at 1024px wide, any container could be set to a max width of say 800px which would be the max width on the desktop display.

 

Example, restricting the largest width of an image

You can set max widths for images when you want to restrict the largest width of the image.

 

1. Click on your image block area from the email preview panel.

ME_imageblock_editandpreview.PNG

 

 

2. Click on Styles to edit styles for 'This block'.

ME_imageblock_styles_thisblock.PNG

 

 

3. Click open Container.

ME_imageblock_styles_container.PNG

 

 

4. Inside the Container, update the max width.

Have more questions? Submit a request
Powered by Zendesk