When you add elements onto your page, you will notice that most of the content spans the full width of the screen. Instead of having to style each element to have it be neatly centered, you can drop your elements in a container. Containers keep all your content in a legible, reasonable region in the center of your page.

In this lesson
  • Anatomy of a container
  • Adding a container
  • Styling the container
  • Enlarging the container

Anatomy

A container is a div block with some 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

Webflow container element

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. However, you can style a container to add more padding, for instance, 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 add 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 using custom code.

To reset the standard width of the container element:

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

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 instead 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. This will 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.