How to Widen a Column in Elementor

Elementor gives you two ways to control column width in a traditional Section layout: dragging the divider between columns, or typing an exact percentage in the Layout tab. Both methods work on the same underlying rule: all columns in a section must add up to 100%. Widen one column and the others shrink automatically to compensate.

Which method you choose depends on what you need. Dragging is faster for rough adjustments and gives you a visual preview as you move. The Layout tab is better when you need a precise width, like a 66/33 split or a specific pixel-equivalent percentage. Both are covered step by step below.

Note: if you are working in Elementor’s newer Flexbox Container system (available from v3.6 onward), column width works differently. See the Elementor Containers section below if your panel shows “Container” instead of “Section” and “Column.”

The drag method is the quickest way to resize a column when you have a rough target in mind and want to see the change live on the canvas.

1. Open your page in Elementor. Log in to your WordPress backend, go to Pages or Posts, and click Edit with Elementor on the page you want to modify.
2. Hover over the column edge. Move your cursor to the right or left border of the column you want to widen. A vertical drag handle (a double-arrow icon) will appear between the two columns.
3. Click and drag. Hold the mouse button and drag left or right. Elementor shows the current percentage as you drag, so you can see exactly where you land.
4. Release to confirm. Let go of the mouse button when you hit the width you want. The adjacent column shrinks to fill the remaining space.
5. Save the page. Click Update or Publish to make the change live.

Tip: If the drag handle does not appear, you are probably hovering over a widget rather than the column border itself. Click away from any widget first, or use the breadcrumb navigator at the bottom of the Elementor panel to select the Column element directly.

When you need a specific column width, such as exactly 66%, 75%, or 40%, use the Layout tab instead of dragging. This method gives you precise control and is less prone to accidentally landing on the wrong value.

1. Click the column you want to resize. A blue outline appears around it. If you are having trouble selecting the column rather than a widget inside it, use the breadcrumb bar at the bottom of the editor to click “Column.”
2. Open the Layout tab. In the left-hand panel, click the Layout tab (the grid icon). You will see a “Column Width” field showing the current percentage.
3. Enter your target percentage. Type the value you want and press Enter. Elementor adjusts the other columns in the section to compensate.
4. Check the adjacent columns. Click each remaining column and confirm their widths still add up to 100%. If something looks off, adjust them one at a time.
5. Save the page. Click Update or Publish.

Working with multiple columns: When a section has three or more columns, set the widest column first, then work down to the narrowest. This reduces the chances of hitting a constraint where a column cannot shrink far enough to accommodate a very wide neighbor.

Common column splits and their percentages:

• 50/50: 50% and 50%
• 66/33: 66.67% and 33.33%
• 75/25: 75% and 25%
• 60/20/20: 60%, 20%, 20%

Changing column widths on desktop does not automatically mean the layout looks right on mobile. Elementor stacks columns vertically on small screens by default, but there are cases where content overflows, columns do not stack in the right order, or text becomes too cramped. Always check the responsive view before publishing.

1. Switch to Responsive Mode. In the Elementor editor, click the responsive icon (a phone or tablet icon) at the bottom of the panel. Select Mobile or Tablet view.
2. Review the stacking order. On mobile, Elementor stacks columns top to bottom in the order they appear left to right on desktop. If your sidebar column is on the right on desktop, it appears below the main content on mobile. You can reverse this in the Section’s Layout settings using “Reverse Columns” for mobile.
3. Look for overflow. Wide images, tables, or fixed-width elements inside a column can cause horizontal scroll on mobile even when the column percentage is set correctly. Check each widget inside the resized column.
4. Set mobile-specific widths if needed. Elementor’s responsive controls allow you to override the column width for tablet and mobile separately. Click the device icon next to the Column Width field in the Layout tab to set a different value for each breakpoint.

On mobile, most column layouts should be 100% width so content stacks cleanly. Reserve side-by-side column layouts for tablet and desktop unless you have a specific reason for two columns on a small screen.

Elementor 3.6 introduced a new layout system called Flexbox Containers, and as of Elementor 3.16, the Container is the default layout element. If you have updated Elementor recently and your panel shows “Container” in the breadcrumb rather than “Section” and “Column,” you are working in the Container system, and column width behaves differently.

In the traditional system, you have a Section containing Columns. In the Container system, you have a Container containing child Containers (or widgets directly). There are no dedicated “column” elements. Instead, each child Container acts like a column, and its width is controlled by flexbox properties.

How to Resize a Child Container (the Flexbox Way)

1. Click the child Container you want to resize. Make sure the breadcrumb shows “Container,” not a widget inside it.
2. Open the Layout tab. You will see a “Width” field (not “Column Width”). By default it may be set to a percentage or to “Default.”
3. Set the width directly. Enter a percentage, such as 66%, in the Width field. Unlike the traditional system, the remaining child containers do not automatically resize, so you will need to adjust each one manually.
4. Check Flex Grow and Flex Shrink. These settings control whether a container expands to fill available space or shrinks when space is tight. Setting Flex Grow to 1 on a child container lets it fill the remaining width after fixed-width siblings have been sized.

Which System Are You Using?

If you are unsure whether you are in the traditional Section/Column system or the new Container system, look at the Add New Element panel. In the Container system, the basic building block is labeled “Container.” In the traditional system, you add a “Section” first, then columns appear inside it. You can also check Elementor’s settings under Elementor > Settings > Features to see whether Flexbox Container is enabled.

Column resizing in Elementor is usually straightforward, but a few common issues trip up even experienced WordPress developers. Here is what to check when something is not working the way you expect.

The Drag Handle Is Not Showing

If you hover between two columns and no drag handle appears, the most likely cause is that you are hovering over a widget inside the column rather than the column border itself. Widgets capture mouse events, so the column handle never gets triggered.

• Click on an empty area of the canvas outside any widget to deselect everything, then try hovering over the column border again.
• Use the breadcrumb navigator at the bottom of the Elementor editor. Click on any widget, then click “Column” in the breadcrumb path to select the column directly.

The Column Will Not Go Wider Than a Certain Percentage

If you are dragging or entering a value and the column stops at an unexpected maximum, one of the other columns in the section has hit its minimum width. Elementor will not let a column shrink below a minimum (typically around 10%), which caps how wide its neighbor can grow.

• Check every column in the section. Click each one, open the Layout tab, and look at its current width. Find whichever column is already near its minimum.
• If you have a gap or padding on the section, that space is subtracted from the 100% total. A section with a 20px column gap effectively has less than 100% available for columns.

All Columns Show Equal Widths and Will Not Change

When you add multiple columns to a section at once, Elementor divides the space equally. To break out of equal widths: click one column and go to its Layout tab, then manually type a new percentage in the Column Width field. Elementor will recalculate the remaining columns. Once at least one column has a custom width, dragging becomes much more predictable.

Column Width Resets After Saving

If you set a column width, save the page, and find it has reverted, this is usually a caching issue rather than an Elementor bug. Clear your WordPress object cache, any page caching plugin (WP Rocket, W3 Total Cache, LiteSpeed, etc.), and your server-level cache if applicable. Then reload the editor and check again.