How to use width and max width for containers

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


Topics covered in this article:

What is width used for in responsive design?

What is max width used for in responsive design?

 

What is width used for in responsive design?

 

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. This is a rigid, non-fluid width. 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 preview panel.

 

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

 

3. Click open Container.

 

4. Inside the Container, update the width.

 

 

 

What is max width used for in responsive design?

 

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 large desktop that is 1024px wide, any container could be set to a max width of 800px which would be the max width on the large 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 preview panel.

 

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

 

3. Click open Container.

 

4. Inside the Container, update the max width.

 

 

 

Have more questions? Submit a request
Powered by Zendesk