How to use width and max width for containers

Learn how to use Width and Max Width in your designs.


Topics covered in this article:

General guidelines for using widths

How to use Max Width

How to use Min Width

How to use Width

 

 

General guidelines for using widths

 

Widths are available in any block container element. Use widths to restrict how wide a block can be in the design. All width fields are optional. Never feel the need to set all three width properties. If you set a maximum width, you don't need to set a minimum, and vice versa.

 

Quick overview:

  • Max Width: Flexible width; sets the largest responsive width the container will be.
  • Min Width: Flexible width; sets the smallest responsive width the container will be.
  • Width: Restrictive width; makes the element non-responsive.

 

 

 

How to use Max Width

 

Max Width is a flexible, fluid width option that determines the largest width of a container. A container will remain responsive until it reaches the max-width. For example, if an email is opened on a desktop screen that is 1024px wide, a block could be set to a max-width of 650px so it doesn't fill the entire width of the screen.

 

Valid values include:

  • none — No maximum value
  • Length value — e.g., 10px, 50%, 2em

 

Example: Restricting the largest width of an image

Set a Max Width for an image when you want to restrict the largest width of the image.

 

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

 

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

 

3. Click open Block Container.

 

4. Inside the Container, update the Max Width.

 

 

 

How to use Min Width

 

Min Width is a flexible, fluid width option that determines the minimum width of a container. A container will remain responsive until it reaches the min-width. For example, if an email is opened on a desktop screen that is 1024px wide, a block could be set to a max-width of 650px so it doesn't fill the entire width of the screen.

 

Valid values include:

  • none — No maximum value
  • Length value — e.g., 10px, 50%, 2em

 

Example: Restricting the smallest width of an image

Set a Min Width for an image when you want to restrict the smallest width of the image.

 

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

 

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

 

3. Click open Block Container.

 

4. Inside the Container, update the Min Width.

 

 

 

How to use Width

 

Width is a rigid, non-fluid width. Use with caution! Width should be used when the container needs to be restricted to a specific width, regardless of screen size. For example, if a 300px image is uploaded into a text block and you want it to stay exactly that size on both desktop and mobile, set the width to 300px.

 

Valid values include:

  • auto — Width is calculated by the browser
  • Length value — e.g., 10px, 50%, 2em

 

Example: Restricting the total width of an image block

Set a Width for an image when you want to restrict the width of the image, making it non-fluid.

 

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

 

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

 

3. Click open Block Container.

 

4. Inside the Container, update the Width.

 

 

 

 

Have more questions? Submit a request