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
The size of each Column also depends on the column layout a Row has.
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:
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.
70 - 5.5- because the gutter width default value is
5.5%- that means the actual width for the first column will be:
Open the settings of the second Column and go to Advanced Tab → Custom CSS → Module Elements → Main Element.
Ensure that for each
!importantflag is being used to override the default column