{"id":23842,"date":"2021-02-19T12:44:52","date_gmt":"2021-02-19T11:44:52","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=23842"},"modified":"2021-04-19T12:25:52","modified_gmt":"2021-04-19T10:25:52","slug":"divi-custom-column-width-tutorial","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/divi-custom-column-width-tutorial\/","title":{"rendered":"Divi Custom Column Width Tutorial"},"content":{"rendered":"\n

Divi comes with a wide selection of column structures. However in some cases you want to create a custom column width. This is quite easy to do with just a little CSS.<\/p>\n\n\n\n

In my example I will change the column structure of this 4 column layout.<\/p>\n\n\n\n

\"Divi<\/figure><\/div>\n\n\n\n

To this:<\/p>\n\n\n\n

\"Divi<\/figure><\/div>\n\n\n\n

You can change the column structure to anything you like.<\/p>\n\n\n\n

Step 1<\/h3>\n\n\n\n

Create a section with a row and choose how many columns you want. In my case its a 4 column structure.<\/p>\n\n\n\n

Step 2<\/h3>\n\n\n\n

Open the row and then the first column and go to the advanced tab.<\/p>\n\n\n\n

In the CSS class field fill in custom-column-1<\/strong><\/p>\n\n\n\n

\"Open<\/figure><\/div>\n\n\n\n

Open the second column and fill in the class custom-column-2<\/strong><\/p>\n\n\n\n

Do the same for the other columns but change the number.<\/p>\n\n\n\n

Step 3<\/h3>\n\n\n\n

Go to Divi > Theme Options > CSS and place this snippet:<\/p>\n\n\n\n

\/* ### CUSTOM COLUMN WIDTH ### *\/\n\n@media (min-width: 981px) {\n.et_pb_column.custom-column-1 {\n\twidth: 10%;\n\tmargin-right: 5%;\n}\n\n.et_pb_column.custom-column-2 {\n\twidth: 40%;\n\tmargin-right: 5%;\t\n}\n\n.et_pb_column.custom-column-3 {\n\twidth: 17.5%;\n\tmargin-right: 5%;\t\n}\n\n.et_pb_column.custom-column-4 {\n\twidth: 17.5%;\t\n}}<\/code><\/pre>\n\n\n\n
Let me explain this snippet first and how you can adjust it for your columns.<\/p>\n\n\n\n
The highlighted area (bottom image) is a media query. The top highlighted part means that this snippet will work on devices with a minimum width of 981px. This is one of Divi’s breakpoints<\/a> from tablet to desktop. So this code will work for desktop only. This is a good thing so it will remain responsive for mobile.<\/p>\n\n\n\n
The bottom highlighted part is the closing tag for the media query. So all the CSS code inside these tags will work for devices with a minimum width of 981px.<\/p>\n\n\n\n
\"Explaining<\/figure><\/div>\n\n\n\n
If you are using for example a 3 column structure then you can remove a one-column snippet. See the highlighted part (bottom image). Be careful to not remove the media query closing tag.<\/p>\n\n\n\n
In case you are using more than 4 columns, let’s say 5 then you can copy the highlighted part and past it under the fourth column snippet but before the media query closing tag. And you need to change the number 4 to 5.<\/p>\n\n\n\n
\"Remove<\/figure><\/div>\n\n\n\n
Each column has a width and a margin-right value. The margin value is the gap between the columns. The last column does not need to have this gap.<\/p>\n\n\n\n
This part is important:<\/strong> the total amount of all column widths and margin-right values need to be 100%.<\/p>\n\n\n\n
You can change the values as you like as long they are 100% combined.<\/p>\n\n\n\n
\"Column<\/figure><\/div>\n\n\n\n
And that is how you can create a custom column width in Divi. If you have any questions please let me know in the comments.<\/p>\n\n\n\n
You Might Also Like…<\/h3>\n\n\n\n