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 Layout section of the Elements Panel (A). 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 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 container

There are two ways to increase the size of the Webflow container:

  • Change the default container width using custom code
  • Create a custom container using a div block

Using custom code

To reset the standard width of the container element:

  1. Go to the Custom Code tab in your Project Settings
  2. Add the following code to your Head Code:<style>.w-container {max-width: 1170px;}</style>
  3. Click Save 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.

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 Elements Panel (A) and drag a div block onto your page
  2. In the Style Panel (S) click into the selector field
  3. Type in a new class name “Custom Container” and hit enter
  4. Set a max-width of 1170px
  5. Click on the left margin and right margin values and set the value to auto. This will center the div block
  6. 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.