BLACK
Upto 80% OFF
Limited time sale
FRIDAY

Ends in

Days
Hours
Minutes
Seconds
Columns Width Adjustment

Control Columns Sections Width (%, pixel, calc) in Elementor

Share This Post...

In Elementor page builder you can add multiple sections on your page to create a website. There are many default structures of the section width, like 100%, 50%, 25%, 20% width, and many more. The structure is, the section contains columns with different widths. Lets now see how to Control Columns Sections Width in WordPress.

What if a user wants to create a custom width for a column?

Well Elementor has the solution, you can select a column and under layout >> column width >> give it a width size (in%).

Using the custom width option you can customize the size of column width (in %), but what if you need to change the width in terms of px?

Unlike CSS you cannot use the px method for column width in Elementor, so is it not possible? 

Thanks to the developers out there who are working constantly to create elementor experience better for the user. You can use “oohboi steroid”,  this is one of the free plugins to create custom width using any CSS acceptable value like px, em, etc.

Let us now demonstrate: 

Assume that we have 2 columns in a section and we have to give the first column 100px width and remaining to the second column.

If we try to do it in the traditional way on elementor, there will be lots of issues with it, But by using this plugin we can easily do it using a simple formula.

Control Columns Sections Width
Control Columns Sections Width image 2

The first column has a width of 100px and to use the remaining width to full we have used this formula.

Formula concept: 

PHP
Width of 2nd column = Total width - Width of first column

Wrap up: 

Easily use CSS values to elementor column width using this plugin.

Share This Post...
Table of Content
Control Section & Column Widths in Elementor
Master layout control by setting section and column widths using %, px, or CSS calc in Elementor. This guide helps you create precise, responsive designs with ease.
Days
Hours
Minutes
Seconds
Translation Addons Bundle
Annual Subscription For 1 Website
$x
$x
/ 1 Year
0% Discount Applied
Renew Yearly

1 year subscription of plugin updates and premium support.

POPULAR
Translation Addons Bundle
Lifetime Subscription For 1 Website
$x
$x
/ One Time
0% Discount Applied

Pay once and get lifetime plugin updates and premium support.

🔥 Limited-Time Discount Offer! Ending in:
Days
Hours
Minutes
Seconds
Money Back Guarantee
0 Days
Active Installs
0 +
5 Star Reviews
0 +
wait... we have a special
Bundle Discount for You!
UP TO
80%
DISCOUNT
Hurry! This limited-time deal will end soon.
28800