Adjusting the Container’s Size and Behavior

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 the 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.

Boxed Container – Backend
Boxed Container – Frontend

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.

Full-Width Container – Backend
Full-Width Container – Frontend

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

IfUse
You want to adjust the width of the content inside the container but not the container’s widthBoxed, 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 widthFull Width, and adjust the container’s width using the Width control.
You want to adjust the container’s width and the container’s content widthFull 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).

Adjusting the Width slider when Content Width is Boxed

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.

Adjusting the Width slider when Content Width is Full-Width
When Content Width is set to…Width will
BoxedControl the size of the box inside the container
Full WidthControl 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. 

Share it on social networks

Share on facebook
Share on twitter
Share on linkedin
Share on email
Was this article helpful?

Related content

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page