Can You Resize Divi Columns? Yes! It’s Easy Too!
The Divi Builder is incredible and we absolutely love it. But I recently was trying to create a header on my personal religious blog and wanted to be able to resize Divi column widths. I knew there were no solutions to this within the Divi Builder, so I came up with my own clever system and it works extremely well! This tutorial will help you do this too, and I hope you love it enough to share it around with others!
▶️ Please watch the video above to get all the exciting details! 👆
Why Do We Need Resizeable Divi Columns?
I know that other popular page builders have resizeable columns, but I never thought it was necessary until Divi 4.0 came out and I started playing around with the header area on my personal blog website. Notice that the header columns here do not match anything default in Divi. Pretty cool, huh? I’ll be showing you exactly how I did this later on in the tutorial.
Divi Comes with A nice Selection of Column Options
I set up an example here with 4 columns set to 1/4 each, but there are many more column layouts in Divi. All of those will work with this tutorial, so it doesn’t matter what column layout you are using.
Here’s a quick visual on how Divi works by default
I set up an example here with 4 columns set to 1/4 each, but there are many more column layouts in Divi. All of those will work with this tutorial, so it doesn’t matter what column layout you are using.
So We Need More Options…But What About All The Extra Coding?
You won’t need any special code snippets and CSS classes that get confusing and messy. Instead, I’m going to show you how to do this right in the Divi Builder!
I wanted to make a solution that was easy for others to use and avoid confusing CSS media queries and custom classes. Good news…it couldn’t be easier!
I am very happy to say that I have a solution that is easy and very versatile.
Here’s How To Resize Divi Column Widths
Step #1. Adjust Your Row Settings
Before we begin the main part of the tutorial, you need to make sure your row has a few settings in place first.
- Make sure the row Width and row Max-Width are both set to 100%;
- Be sure the row has a Custom Gutter Width toggled on and set to 1.
Step #2. Choose The Best Divi Column Structure
The most important thing here is to select the correct number of columns. Don’t worry about the width of each column yet. If you look at my example below, you can see that I chose 4 columns, all at 1/4 each. So by default, each of those was 25% wide.
Step #3. Do Some Math
Since we have set the row width to 100%, it makes sense that all the columns within that row need to equal 100%. Anything less won’t be wide enough, and anything more will bump to a new line and look awful. You can use any percentage width you want, but always be sure it equals 100% exactly.
Step #4. Paste One Line of CSS
The last step is to override the default width. We can resize the Divi column widths by using some CSS to force the columns to any size we desire. Simply copy the CSS code snippet below and paste it in each column. Go to the Row settings, then go into each column to the Advanced Tab>Custom CSS>Main Element.
width: 10%!important;
Obviously, you will need to change the 10% to suit your needs.
Be sure to past this in each column and change the numbers so that altogether they equal 100%.
Adjusting for Tablet and Phone
In case you missed it, you can now set CSS to apply to desktop, tablet, or phone within the builder. Be sure to check your tablet and mobile when you are resizing columns! If you forget to change the columns back to 25% each for example, they will look very bad. You may probably want to change the width of each column to 50% or 100% on the phone. NOTE: Stay tuned for another post on mobile columns stacking order and width coming here to the blog very soon!
FYI: Do It With Divi Responsive Helper!
Why work so hard? You can do this easily with a setting in our Divi Responsive Helper plugin!
Example: How I Chose To Resize Divi Column Widths In My Blog Header
I’m going to show you an example of what I created to help you see what was needed and what I used. Here is a screenshot from my personal blog site. Notice how the header has 4 columns, and yet they do not match any of the standard column layouts available in Divi. The only thing I could do to get the layout I wanted was to resize the Divi column widths to something that worked. It took some trial and error to get the right percentages, but I’m happy with how it turned out.
- I started with 4 columns set to 1/4 each.
- In the row sizing, I set the row with and max-width to 100%.
- While I was there I changed the gutter to 1.
- In the first column with the logo, I set the width to 10%.
- The second column with the menu is larger, so I set the width to 65%.
- In the third column with the button, I set the width to 10%.
- Lastly, in the fourth column with the social follow, I set the width to 15%.
This is just one example. You can resize Divi column widths with as many columns as you want and in any increment. I’d love to see what you come up with, so please share in the comments!
Do It With A Setting!
Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!
Hello, you are mentioning that this is a feature in Responsive Helper, but I cannot find that feature anywhere. I also looked into the documentation, also cannot find anything on this. How can I easily change the width of the columns with the Responsive Helper as mentioned in the article? Would appreciate if you can point me into the right direction, thanks!
Well it’s not actual “resizing” but it does the column stacking like choosing the number of columns per device, so that is confusion.