Container
Use containers to keep your content centered and legible across breakpoints.
The container element comes with predefined styles that keep your content centered and responsive across breakpoints. Containers are typically nested inside section elements to maintain consistent structure and alignment. You can add a container from the Add panel > Structure section.
What is a container?
A container is a div block with predefined styles that help you create responsive layouts. It has a max-width of 940 pixels on desktop and 728 pixels on tablet, along with left and right auto margin to keep your content centered relative to the browser window. At smaller breakpoints, like mobile landscape and mobile portrait, the container automatically extends to fill the full width of the screen while remaining responsive.
Styling a container
When styling a container, remember that its predefined max-width prevents any custom width values from exceeding this limit. If you need to, you can adjust or remove the max-width property in the Style panel, but this may affect the responsiveness of your layout across breakpoints.
The container element uses auto margin on the left and right to center your content within the browser window. While you can adjust these margins (e.g., adding an explicit pixel value), we recommend using auto margin to maintain the container’s default behaviour of consistent, centered layouts across all screen sizes.
Important: We don’t recommend changing the display settings of a container element. Changing the display setting to flex or grid may cause unexpected spacing. Instead, we recommend adding a div block to the container and changing its display settings.
How to use containers, sections, and div blocks
When building web layouts, containers are typically nested inside section elements. Sections are full-width by default, meaning they stretch to fill the entire width of the viewport. On larger displays, this can cause content to become too wide and difficult to read. By placing a container inside a section, you can keep content centered and legible.
To further organize your content, you can nest div blocks inside containers, allowing you to control the spacing, size, and position of your elements.