help center

On this page

Set a Flexbox Container’s size and behavior

Last Update: June 24, 2024
Image of the Container menu.
Content Width and Min Height container options.

Containers allow you to quickly arrange and modify website widgets and create templates. Once saved, you can apply these templates across your website, saving you valuable time and creating style continuity across all pages.

When working with containers it’s important to know how to set the container’s size. You can adjust a container’s size and behavior by selecting the container and navigating to the Layout tab. In this section you can:

  • Change the container size
  • Adjust the container’s behavior

Adjusting container sizes

To adjust a Container’s size: 

  1. Select the Container 
  2. Navigate to the Layout tab 
  3. Go to the Container section 
Image of the Container menu.
Content Width and Min Height container options.

Content Width allows you to select either Boxed or Full Width from the dropdown. You can adjust the width of both Boxed and Full Width containers, but they behave differently regarding the content inside the container :

BoxedFull Width
Use if you want to adjust the width of the content inside the container but not the width of the container.When you adjust the container width, the content will adjust to the container width. You can also adjust adjust the container’s content width with padding and margins

Min Height allows you to set the minimum height of the container. This can be useful for ensuring text or objects are visible on mobile layouts.  

You can adjust both the height and width of the container using pixels, percentages or viewport height and width. Select whichever you want to use at the top right of each option. 

Item options

Image of Item options.
Item behavior within a Container can be modified in the Items section.

Below the size options discussed above, you can also define how items behave. This includes item direction, justification, alignment, gaps between items, and wrapping.   

Adjusting container behavior

You can adjust a Container’s behavior using the Overflow and HTML tag options.

Overflow

Image of the Additional Options menu.
Additional Options menu.

Overflow determines how the Container should handle content when it exceeds the Container size. 

Default: Items that exceed the Container size are visible.

Image of container set to Default.
Container set to Default.

Hidden: Only items within the Container are visible. Beyond the Container boundary, they’re hidden.

Image of container set to Hidden.
Container set to Hidden.

Auto: Only items within the Container boundary are visible. The scroll bar is added, which enables you to find and see items hidden within the Container.  

Image of container set to Auto.
Container set to Auto.

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 SEO. The higher the Container is defined in the DOM hierarchy, the more important search engines consider the content.

You’ll have to set HTML Tags individually for responsive layouts.

Tip: You can make a Container clickable by selecting the “a” HTML tag. 

Final words 

Flexbox Containers give you the ability to layout content with greater flexibility, modify layouts quickly, and create containers templates to achieve design continuity. Now that you know how to adjust the size and behavior of the Container, a good next step would be to learn about how to arrange the elements inside a container.  

To get the most out of Elementor, check out the Elementor Academy for helpful learning resources. If you come across any issues or need help, please contact our Support Center.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article