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.
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: You can do this with a setting directly in the Divi Visual Builder with our popular Divi Responsive Helper plugin! Take a look, it is so easy!
- 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!