Container

When you add elements on your page, you'll notice most of the content spans the full width of the screen. Instead of having to style each element to keep content centered, you can drop elements in a Container.

‍

In this lesson:

1. Anatomy of a Container
2. Adding a Container
3. Styling the Container
4. Enlarging the default Container
5. Creating a custom Container using a Div block

Anatomy of a Container

A Container is a Div block with pre-defined styles. It comes with a 940px width on larger displays that keeps your content centered relative to the browser window. On smaller devices (like phones and tablets), Containers extend across the full width of the screen.

Adding a Container

You can add a Container element from the Elements panel (A) > Layout section. Then, you can add new elements or move your content into the Container.

Styling the Container

By default, a Container adapts to all breakpoints, but you can style a container with more padding, for example, on mobile breakpoints. If you adjust the padding on the mobile landscape view, the style will cascade (apply to smaller breakpoints) to the mobile portrait view as well.

Once you've styled the Container, you can use its class to apply the same styling to other Containers you add to your project.

Pro tip

To have a good website structure, follow a consistent element hierarchy. One way to do that is to add a Container inside each Section and place all the content inside the Container.

Enlarging the default Container

You can increase the size of the Container element by changing the default Container width with custom code.

To reset the standard width of a Container:

1. Go to Project settings > Custom code
2. Add the following code to your head code:
   <style>.w-container {max-width: 1170px;}</style>
3. Save

You can replace 1170px with any width you'd like. This will change the width of the Container on the desktop devices.

Need to know

This change will only affect the published version of your site. In the Designer, the width will still appear to be the default 940px. Every Container element you add to your site will use the custom width you set in the code.

Creating a custom Container using a Div block

Instead of using the default Container element from the Elements panel, you can use a standard Div block element and add styling to increase the width.

To create this custom container, follow these steps:

1. Open the Add elements panel (A) and drag a Div block onto your page
2. Create a new class: “Custom Container”
   
3. Set a max-width of 1170px
4. Set the left and right margins to auto to center the Div block

Now you can drop your elements into the new container. Whenever you need to use the same container, drop a new div block onto your page and give it the same class.