Use containers to keep your content centered and legible.
The Container element is the perfect companion for a Section element. When we place a Container inside a Section, and we place elements inside the Container - the Container keeps the content neatly organized towards the center of the screen.
In this lesson:
A Container is a Div block with pre-defined styles. It comes with a 940-pixel max-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.
You can add a Container element from the Layout section in the Elements panel (A).
Then, you can place new elements or move your content into the Container.
By default, the Container element is automatically responsive. But sometimes you want a wider container instead of the default maximum width (940 pixels).
You can do this in 2 steps
Now, the Container will respond to the size of your viewport but only extend to the maximum width you set.
You can also style the Container for breakpoints larger than the default. If you want your Container width to be more appropriately sized for larger displays - you can do that in 4 steps:
As a note: always go back to the base breakpoint to continue designing your project. The reason is because of this: changes made in the Style panel cascade outwards from the base.
Changes cascade downwards towards smaller breakpoints.
And upwards towards larger breakpoints from the base breakpoint.
You can use your Container to add space around your elements. In our example, the content is being pushed right up to the edge in the mobile-landscape breakpoint.
This is because the Container is full-width for mobile devices and elements inside are at the edge. You can adjust the padding to give some nice breathing room.
To do this:
That styling will then pass down to Mobile portrait as well.
Because you already gave your Container a class (in our example, we named it “Container”), you can apply that class to other containers you add to your project.
To apply a class:
Note: A change to the styling on that class will affect all containers that have that class applied. Learn more about Classes.
Containers inside of Sections is a common hierarchy in web development
A Section, by default, is full-width. Inside the Section, you have a Container, which keeps everything inside neatly bound towards the center.
A Div block is the most basic and versatile element used when designing your project because it can be anything you want it to be. You can use Div blocks inside Containers to organize your elements using Layout, Spacing, Size, and Position styles.
Note: a Section is a Div block that’s full-width and a Container is a Div block that that has a max-width by default.
But that’s an overview of Containers in the Webflow Designer.