Introduction
You can adjust the container’s size and behavior by navigating to the Layout tab > Container section.
To learn about styling the container, click here.
Adjusting a container’s size
You can define the container’s height and width using the following controls:
Content Width
The Content Width option controls whether the elements in the container will be boxed, or take up the entire width of the container.
Boxed Container
If Boxed is selected, the contained elements will appear in a box that takes up only a portion of the container itself. You can define the size of this box using the Width slider, located under the Content Width option.
Note: This is the default setting when creating new containers.
Full Width container
If Full Width is selected, the contained elements will take the entire size of the container with no margin.
Note: By default, Boxed and Full width containers will stretch on the available space according to their placement in the layout. If the container is a parent, it will occupy the full viewport width. If the container is nested in a parent container, the nested will take the full parent’s content width.
Boxed vs. Full Width
| If | Use |
| You want to adjust the width of the content inside the container but not the container’s width | Boxed, and adjust the container’s content width using the Width control. |
| You want to adjust the container’s width but not the container’s content width | Full Width, and adjust the container’s width using the Width control. |
| You want to adjust the container’s width and the container’s content width | Full Width, adjust the container’s width using the Width control, and adjust the container’s content width with padding in the Advanced tab. |
Width
Control the container’s width or the container’s content width in pixels (PX), percentage (% ), or Viewport Width (VW).
This control applies a different effect depending on whether Content Width is set on Boxed or Full Width.
When Content Width is Boxed
When Content Width is set to Boxed, the Width control allows adjusting the width of the content inside the container (the box).
When Content Width is Full-Width
When Content Width is set to Full-Width, the Width control allows adjusting the width of the container itself.
| When Content Width is set to… | Width will |
|---|---|
| Boxed | Control the size of the box inside the container |
| Full Width | Control the size of the container itself |
Minimum Height
The Minimum Height slider controls the minimum height of the container’s content in pixels (PX) or in Viewport Height (VH).
Note: Setting the value of Min Height to 100VH would set the container height to the viewport height. This setting can be set individually for responsive layouts.
Adjusting the Container’s Behavior
You can define the container’s behavior using the following controls:
Overflow
The Overflow option controls if the content of a container does not fit within the viewport, should the overflowed content be hidden, or visible, causing horizontal scrolling.
Default
Default allows the overflow of items outside the container.
Hidden
Hidden hides the overflowing items. The overflowing items are not accessible.
Auto
Auto creates a scrollbar when content overflows to keep the items accessible. This setting allows for swiping across the content in mobile views.
HTML Tag
Wrap an entire container from the dropdown menu by selecting the most appropriate HTML tag for your container.
Note: HTML Tags are essential for SEOs. As the container is defined higher in the DOM hierarchy, the easier and more important its content is regarded by search engines.
This setting can be set individually for responsive layouts.
Tip: You can make a container clickable by selecting the “a” HTML tag.