How to Widen a Column in Elementor

Elementor gives you two methods for adjusting column width, and which one you use depends on how precise you need to be:

• Drag method: Hover over the right edge of the column until a blue drag handle appears, then drag left or right. Elementor automatically adjusts adjacent columns to keep the total at 100%. Fast for visual layouts where exact numbers don’t matter.
• Layout tab method: Click the column to select it, go to the Layout tab in the left panel, and set a specific percentage in the Column Width field. Use this when you need to match exact proportions, for example, a 70/30 or 60/40 split.

In both cases, Elementor keeps the total column width at 100% within the section. If you resize one column, the others automatically shrink or expand to compensate, unless you unlink them manually (covered in Method 2).

This is the fastest way to resize a column and works well when you’re adjusting by eye:

1. Open the page in Elementor and click anywhere on the canvas to deselect any widgets.
2. Hover your cursor over the right edge of the column you want to widen. A blue vertical line with a drag handle appears.
3. Click and drag the handle to the right to widen the column, or to the left to narrow it.
4. Release when the column is the width you want. The adjacent column automatically adjusts.
5. Click Update to save.

If your section has more than two columns, widening one column will shrink the column immediately to its right. To free a specific column from this auto-adjustment, use the Layout tab method instead.

To get to any page in Elementor, log in to your WordPress backend, navigate to the page you want to edit, and click Edit with Elementor.

Use this method when you need a precise column width percentage — for example, a 70/30 content-sidebar layout:

1. Open the page in the Elementor editor.
2. Click on the column you want to resize. Make sure the Column is selected (not a widget inside it — look for “Column” in the breadcrumb bar at the bottom of the screen).
3. In the left panel, go to the Layout tab.
4. Find the Column Width field (shown as a percentage). Click it and type in the exact width you want — for example, 70 for 70%.
5. Press Enter. Elementor updates the column width and adjusts the remaining column(s) to fill the rest of the section.
6. Click Update to save.

Note: If you have more than two columns and want to set all their widths independently without Elementor auto-adjusting, set each width one at a time, working from largest to smallest. Elementor always tries to keep the total at 100% — so start with the widest column and work your way down.

After widening a column on desktop, always check how it looks on mobile. A 70% column that looks great on a 1440px screen can dominate on mobile in a way you didn’t intend.

1. In the Elementor editor, click the Responsive Mode icon at the bottom of the screen (the tablet/phone icon).
2. Switch to Tablet and then Mobile view.
3. On mobile, Elementor stacks columns vertically by default — so a two-column section becomes a single column. This is usually correct behavior.
4. If the column order looks wrong on mobile (for example, a sidebar appearing before the main content), right-click the column and choose Reverse Columns in the mobile layout settings.
5. You can also set a different column width specifically for tablet or mobile by switching to that device mode before changing the Layout tab width — Elementor tracks responsive overrides per device.

If there are overflow issues where content is cut off or a horizontal scrollbar appears, check that no column’s total width exceeds 100%. Open each column’s Layout tab to verify the percentages add up correctly.