How to Resize a Column Width in Divi Builder

To make it easy for you to set the layout when creating a page or theme builder template, Divi Builder offers columns you can make use of. You can add columns on a row (read our previous article to learn more about row in Divi Builder). Divi Builder itself offers 20 column structures which you can use according to your needs. Each column structure consists of a certain number of columns, with different predefined widths. Unlike, say Elementor, Divi Builder offers no built-in feature to resize the column width. To resize a column width in Divi Builder, you need to add CSS code.

In this article, we will show you how to resize a column width in Divi Builder. We have a row with three columns as follows.

As you can see, each column has the same width. We will resize the widths to get a composition like the following:

• The width of the column 1: 25%
• The width of the column 2: 50%
• The width of the column 3: 25%

By the way, in the example above, we set the gutter width to 1. This setting removes the space between each column on a row. To set the gutter width, you can open the row settings panel by clicking the gear icon on the green handle. On the row settings panel, go to the Design tab and open the Sizing block. Enable the Use Custom Gutter With option and set the gutter with on the Gutter Width option.

To start resizing the column widths, open the row settings panel as you have just done above. On the Content tab, you can see the columns on the row. On the top is the first row (leftmost) while on the bottom is the last row (rightmost).

To resize the width of column one, you can open the column settings panel by clicking the gear icon on column one.

Once the panel switches to the column settings panel (from row settings panel), go to the Advanced tab and open the Custom CSS block. Paste the following CSS code to the Main Element field.

width: 25%!important;

If you want to set a precise width in pixel, you can also use the pixel unit (px) instead of percent.

You can repeat the steps above to resize the widths of other columns. Here is the result.