Container

The container element is useful for keeping your content neatly organized towards the center of the screen. It’s typically used in tandem with a section element. 

In this lesson, we’ll cover:

1. Anatomy of a container
2. How to add a container
3. How to create custom-width containers
4. How to adjust container padding
5. How to reuse containers
6. How to use containers, sections, and div blocks

Anatomy of a container

A container is a div block with predefined styles. It has a 940-pixel max width on larger displays to keep your content centered relative to the browser window. On smaller devices (like phones and tablets), containers extend the full width of the screen.

How to add a container

You can add a container from the Add panel > Elements tab > Layout section.

How to create custom-width containers

By default, containers are automatically responsive. But sometimes you might want a wider container instead of the default maximum width (i.e., 940 pixels).

To change the maximum width of a container:

1. Select the container on the canvas
2. Add a class to the container (e.g., “Container”)
3. Go to Style panel >  Size
4. Set the Max W (e.g., 1100 pixels)

The container will still respond to the size of your viewport but only extend to the maximum width you set.

How to style a container for large breakpoints

You can also style a container for breakpoints larger than the default, which can help your container width to be more appropriately sized for larger displays. To style your container:

1. Click the “three disclosure dots” next to the canvas base breakpoint option
2. Select a large breakpoint to add (i.e., 1280px, 1440px, or 1920px)
3. Click Create in the “Create breakpoint” modal window
4. Select your container on the canvas
5. Adjust the max width to fit the larger breakpoint

Important: Changes made in the Style panel cascade up and down from the base breakpoint, so you should always go back to the base breakpoint to continue designing your sites. Learn more about breakpoints.

How to adjust container padding

You can add padding inside a container to add space around your elements. In the example below, content is being pushed right up to the edge of the container in the mobile landscape breakpoint.

This is because the container is full-width for mobile devices, and the elements inside it have been positioned at the edge. You can add padding to give the elements some breathing room:

1. Select the container element
2. Go to Style panel > Spacing
3. Add left and right padding (e.g., 30 pixels)

This styling will cascade down to the mobile portrait breakpoint as well.

How to reuse containers

You can apply a class to your container element and reuse that class across other containers in your site. This lets you create multiple containers with consistent styling.

To apply a class to your container:

1. Select the container
2. Go to the Style panel and type a class name (e.g., “main-container”) in the Selector field
3. Press Return/Enter

Note: Changing the styling on that class affects all elements that have that class applied. Learn more about classes.

How to use containers, sections, and div blocks

In web development, containers are often situated inside of section elements. A section, by default, is full-width. You can put a container inside the section to keep elements neatly bound towards the center. Then, you can use div blocks inside containers to organize elements using layout, spacing, size, and position.

Pro tip: A section is a div block that’s full-width. A container is a div block with a default max-width.