Code by Day | Explore By Weekend

How To Resize Divi Column Widths Tutorial by Pee-Aye Creative

How To Resize Divi Column Widths

Learn how to easily resize Divi column widths to any size you want with some simple CSS code applied directly in the row settings within the builder.
Example of how to resize Divi column sizes
Divi Column Size On Desktop
Divi Column Size On Tablet
Divi Column Size On Phone

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.

Row Settings used to resize Divi columns
Row Settings to resize Divi columns
width: 10%!important; 
CSS used to resize Divi columns

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!

Change the Divi mobile column width on mobile

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!

Divi Responsive Helper Plugin 2.0 by Pee Aye Creative
an example of custom Divi column widths
Example of how to resize Divi column sizes
  • 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!

69
Last updated Mar 9, 2021 @ 12:17 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Subscribe
Notify of
guest
47 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
jualjuel
1 year ago

Awesome. Very useful tutorial. Thank you.

Al Mamun Hossen
1 year ago

Thank´s Nelson !!!!!.

Have a nice day.

Nelson Lee Miller
Nelson Lee Miller
Reply to  Al Mamun Hossen
1 year ago

You are welcome!

Tilak Conrad
Tilak Conrad
1 year ago

Superb – you have got a great teaching and presentation style. Thanks very much

Nelson Lee Miller
Nelson Lee Miller
Reply to  Tilak Conrad
1 year ago

Thank you Tilak, I’m very glad you like it!

Josh
Josh
1 year ago

Thanks for sharing this Nelson. I just tried this with a 4 column footer on my website and it worked great on the desktop view. However, Divi automatically carried the “Desktop” Custom CSS code over to the “Tablet” and “Phone” views. So then things look super squished on those mobile views. I can’t find a way to get Divi to behave properly and not allow the Custom CSS to automatically overflow into the mobile views.

Mike Nelson
Mike Nelson

I have the same issue with CSS. For example. I have a four column layout for my desktop. I’ve changed the settings for column one to 10% in desktop via the CSS width :10% !important; Then I change in the tablet CSS mode to 20%. Whatever CSS Width setting i use it goes across all devices. So my original setting of 10% desktop is now 20% due to the fact that I changed it for my tablet. Am I doing something wrong? Would this be resovled w/ your helper plugin?
Thank you.

Mike Nelson
Mike Nelson

oh… I thought the CSS was per device meaning I could set column A desktop to 25% and tablet to 50%.. sounds like what ever I make column A will be the same across all devices….
Sound right?
PS.. I really appreciate you taking the time to help!
 
Update: It appears to work as advertised at the row level with different CSS settings per device. I was hung up trying to change the individual column widths inside the row settings which doesn’t work. Thanks again
 

Last edited 9 months ago by Mike Nelson
design
design
1 year ago

Great tutorial. So I have implemented the CSS using 4 column. Looks great on desktop and the landscape view. But I can’t see the logo or menu in the mobile or tablet vertical view. I even tried adjusting the columns %. I see them trying to load but they are far below the header. Any suggestions?

See Example: https://bsf.live-website.com/pastors-blog/
vertical tablet and mobile view

design
design

Whew.. a lot of trial and error. I followed your tutorial on resizing columns.
So far it’s working, except for one thing. When the menu drops down it is not wide enough. And looks off centered.
Any thoughts how to fix this?

andreas
andreas
11 months ago

Perfect solution! Thank you so much!

Martin davis
Martin davis
11 months ago

Hey. This didn’t work for me. In my row settings the max width is shown as pixels not a percentage like in your example. Is there any way to change this? Any help appreciated. Thanks

Joel Pritchard
Joel Pritchard
11 months ago

Hi, your tutorial looks amazing however I cannot find the options in my divi builder. Can you please help. As you can see i have no option in row settings to modify structure’s. All I can do is setup structure type please advise.

Here is a picture

https://ibb.co/rdtBd3R

Carol Fong
11 months ago

Wow, Thank you so much!! This was very helpful with a client’s request.

Tim
Tim
10 months ago

Hi Nelson!

Thanks so much for this tutorial … It works smooth when using a regular column layout!

Now my client wants to have a more complex layout, so I got to use one of the speciality column layouts. Unfortunately I can’t adjust the widths in the same way, since I can’t address each columns’ CSS individually …

Do you have any idea about a workaround?

Thanks so much in advance!!!

Cheers, Tim

amin
amin
10 months ago

This great. I design all my layouts on sketch app before I jump on divi and I struggled to match what I did in sketch when using divi modules. this is amazing solved all my problems thank you Nelson.

Phil
Phil
9 months ago

Hi there,
I am trying to do the same with a 3 columns row in a speciality section. Unfortunately for some reason the row in speciality section doesn’t provide you with the ability to use a custom gutter. Any thoughts on how I can do this?

Jeff
Jeff
9 months ago

Hi Nelson. New to WP and DIVI. But experienced CSS/HTML/JS programmer. This tutorial is what I needed to solve a current WP/divi site design. Created a row with 4 equal columns. Setup the Row styles as you indicated. Changed my individual columns to 15%, 50%, 15% and 20%. Everything sized correctly. As an example, I added another row with the default 4 equal columns. I placed Text, Text, Button, Button in the 4 columns of each row. We have lost something with the special row w/ CSS. When on mobile, or on desktop and you reduce the width of the… Read more »

divi.png
Jeff Jones
Jeff Jones

Hi Nelson. Thanks. I watched your course. I now know, being new to divi/WP, how to set different settings for desktop/tablet/phone. Of course, being a hidden feature unless you mouse-over is not intuitive for a newbie, but I get it now. I have discovered a few things now that are also not intuitive that I think others in previous posts have stumbled over. So, in the interest of sharing (and thanks for all you have shared to get us all started), I will list those things for other newbies. Not obvious that grayed out text in Tablet/Phone settings for Custom… Read more »

Melody Scott
Melody Scott
8 months ago

Thanks!! This helped a lot.

Yogendra pratap
Yogendra pratap
7 months ago

Your explanations are simple and easy to understand 👌👌

Erwan
Erwan
5 months ago

Hello, yeah, thanks a lot. Very usefull.

Alice
Alice
5 months ago

Thank you! This is so useful

Rob Stephens
3 months ago

This is probably the most important Divi tutorials I’ve found online – super powerful! You’ve solved one of my biggest headaches!

Nomore Mudzvova
3 months ago

Thanks Nelson, this was very useful.

What i discovered is that you also need to set the min-width and max-width for it to work. I dont know if it is the Extra theme that requires so or it is the latest update

Erminio
Erminio
2 months ago

Hi,
I used your tutorial and works great to my desktop view, however, for cell phone all the column stays compress in the same row, I didn’t understand why, can you help me?
Thank you

mark
27 days ago

Can columns in the Divi full width slider be adjusted? I would like to give my images a little bit more than the copy. Thanks!

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,600 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart