Use containers to keep your content centered and legible.
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:
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.
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.
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.
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:
You can replace 1170px with any width you'd like. This will change the width of the Container on the desktop devices.
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:
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.
Something went wrong while submitting the form. Please contact firstname.lastname@example.org