To customize the width of any Column inside Divi, we need to keep in mind a few things:
The size of each Column depends on the Gutter size - the default value is 3 - which means each Column will have a space of
5.5%.The size of each Column also depends on the column layout a Row has.
Example:
The Row's column layout is set to be 2 Columns with the default Guter size. That means each Column will have a width of 47.25%. The value is calculated as follows:
(Row's Width - (Number of columns - 1 * Gutter width)) / Number of columns.
The Row's width is always considered to be 100%. So, in the above example, each column width will be:
2 Columns layout:
(100 - (2 - 1 * 5.5))/2 = 47.25%3 Columns layout:
(100 - (3 - 1 * 5.5))/3 = 29.6667%
Customize the default column's width
Open the Row's settings
Open the Column's setting (for which we need to change the width)
Go to Advanced Tab → Custom CSS → Module Elements → Main Element.
Add the following CSS rule:
width: 47.25%;
Note: In the example above, I set the width of a column to be the same as that of a column inside a two-column layout. Make sure to adjust the width to fit your needs.
Example:
The goal is to have a two-column layout, where the first Column is 70% and the second Column's width is the remaining space.
Insert a Row in the layout.
Choose the Row's layout to be 2 columns.
Open the settings of the first Column and go to Advanced Tab → Custom CSS → Module Elements → Main Element.
Set the
widthto70 - 5.5- because the gutter width default value is5.5%- that means the actual width for the first column will be:64.5%
Open the settings of the second Column and go to Advanced Tab → Custom CSS → Module Elements → Main Element.
Set the
widthto30%.
Ensure that for each
widthproperties the!importantflag is being used to override the default columnwidth.
The result:
Pro tip: Always keep in mind the size of the gutter (the space between columns) when calculating the correct width value of each Row.