How to Change Section Height Elementor

By default, Elementor sections are only as tall as the content inside them. If you drop a heading and a paragraph into a section, the section will be exactly tall enough to hold those elements, with no extra space. This is called the Default height setting, and it makes sense for content-heavy sections where you want the height to adjust automatically as you add or remove elements.

Elementor offers three height modes in the Layout tab:

• Default: The section height is controlled entirely by its content. No minimum is enforced. Use this for blog content sections, text-heavy rows, and any section where the content itself should determine the height.
• Fit to Screen: The section expands to fill 100% of the browser viewport height. Use this for hero sections at the top of a page, full-screen landing sections, and anywhere you want the section to fill the visible screen before the user scrolls.
• Min Height: You set a minimum height in pixels or VH units. The section will be at least that tall, but can grow taller if the content exceeds the minimum. Use this for CTA sections, feature rows, and card grids where you want visual consistency without trapping overflow content.

A common mistake is applying Fit to Screen to sections other than the first section on a page. On a services page, for example, giving every section full viewport height forces users to scroll through large empty areas. Reserve Fit to Screen for hero sections only, and use Min Height for everything else that needs a defined floor.

Another common error is setting a Min Height that’s smaller than the actual content. For example, setting a 300px minimum on a section that contains 500px worth of content doesn’t cause any layout problems, but the setting also does nothing visible. The section will always be 500px or taller regardless. Min Height only has a visible effect when the content is shorter than the value you set.

On mobile, Fit to Screen behaves based on the mobile viewport height, which can produce unexpected results on phones with short screens or browser chrome. If a full-screen hero looks too cramped on mobile, switch to a fixed Min Height value at the Tablet or Mobile breakpoint instead. Elementor’s responsive controls let you override the height setting per device, so you aren’t locked into one mode across all screen sizes.

If you’re using Flexbox Containers (Elementor’s newer layout system), the same three height options appear in the Layout tab under the Height dropdown. The behavior is identical to classic sections.

Before you can change the height setting, you need to select the correct element. In Elementor, clicking inside a section can select different things depending on where you click: the section itself, a column inside it, or a widget inside a column. The height setting lives on the section level, not on a column or widget.

To select a section:

• Hover over the section in the editor. A blue or grey outline appears around the section boundary.
• Click the section handle, which is the small icon that appears at the top-left corner of the section (it looks like a grid of dots or a drag handle, depending on your Elementor version). Clicking this handle selects the section directly.
• Alternatively, click anywhere in the section’s empty area (not on a widget), then check the panel on the left. The top of the panel should read the section name or show the section icon. If it reads a widget name like Heading or Text Editor, you’ve selected the wrong element.

When a section is correctly selected, the left panel switches to the Edit Section panel (or Edit Container if you’re using Flexbox Containers). You’ll see three tabs at the top: Layout, Style, and Advanced. The height setting is in the Layout tab.

A quick way to confirm you’ve selected the right level is to look at the breadcrumb at the bottom of the Elementor canvas. It shows the hierarchy: Section > Column > Widget. If the breadcrumb shows a widget name, click the section label in the breadcrumb to jump directly to the section level.

If you’re working with Flexbox Containers, the selection process is the same, but the element is called a Container rather than a Section. The handle still appears at the top-left, and clicking it opens the Edit Container panel with the same Layout tab and Height dropdown. One difference: Flexbox Containers can be nested, so double-check you’ve selected the outer container (the one that spans the full page width) rather than an inner container inside it.

In the settings panel, make sure you’re on the Layout tab. Find the Height option — it defaults to “Default.”

To set Full Height (Fit to Screen):
Click the Height dropdown and select Fit to Screen. The section immediately fills the full browser viewport height. No additional value is needed.

To set a Minimum Height:
Select Min Height from the Height dropdown. A height field and unit selector appear below it:

• Enter a value in px (pixels) for a fixed minimum height, e.g. 500px
• Switch to vh (viewport height) for a responsive minimum, e.g. 60vh = 60% of the screen height

A slider also appears for quick visual adjustments without typing a number.

Tip: VH units are generally better than pixels for responsive design — they scale proportionally on mobile without you needing to set separate mobile breakpoints.

When you’re happy with the height setting, click Update at the bottom of the Elementor editor to save the page. The change takes effect immediately and is visible in the live preview.

If you need to match the same height across multiple sections — for example, to keep a row of feature cards all the same size — edit each section individually and enter the same Min Height value. Elementor doesn’t have a global section height setting, but using the same value consistently gives you a uniform result.

Advanced: CSS override
For more precise control, you can apply custom CSS at the section level via Advanced > Custom CSS in the section panel. For example:

min-height: 400px; max-height: 800px;

This sets both a floor and a ceiling for the section height — something the built-in controls don’t support directly.