How To Resize Divi Column Widths To Any Size
Вставка
- Опубліковано 26 лип 2024
- 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.
Blog Post + Snippets: www.peeayecreative.com/how-to...
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!
Become a member of our Divi Adventure Club!
www.peeayecreative.com/produc...
Join The Divi Teacher Facebook group: / thediviteacher
Visit our Divi child themes, plugins, tutorials, and courses here: www.peeayecreative.com/
Thanks for watching!
![How To Manually Set Divi Column Stacking Order on Mobile [Super Easy]](http://i.ytimg.com/vi/YmoV7m0F1Yk/mqdefault.jpg)
![How To Manually Set Divi Column Stacking Order on Mobile [Super Easy]](/img/tr.png)
Keep up the good work. Your tutorials give me so much more scope, I can think about design rather than being confined to what I can technically achieve in Divi, thank you.
That's great to hear Dave! I'm so glad I can help out with some of the technical things!
Awesome stuff, thank you for sharing. I've literally just spent two hours messing around with padding and margins to get the size I needed. This will make it SO much easier. Wow.
Glad it helped!
Such a great tutorial, thank you for the simplicity and making something up to date!
You're welcome, I appreciate your feedback! 🙂
This tutorial deserve certainly more than 29 likes. good job!
Thank you! It's not very old yet, but I'd love for more people to find it!
Genius, thank-you - such a simple solution to an issue that has been driving me nuts, particularly for menu designs!
Glad it helped!
Oh my goodness. I’ve spent all day ripping my hair out over columns because I’ve no idea what I’m doing. Should have just come to you first! Such a simple solution - thank you! 😊
Another great tutorial, Nelson! Thanks so much. I really like your tutorials because they're so practical and easy to understand vs. a lot of the more esoteric tutorials that are out there. I can always put into practice right away what I learn from you.
Hi Micheal, I'm so glad you like them! That kind of feedback means a lot!
You all prolly dont care but does someone know of a method to get back into an Instagram account??
I somehow forgot the password. I appreciate any tips you can offer me
@Sullivan Alvin instablaster =)
@Jack Bowen I really appreciate your reply. I found the site through google and Im in the hacking process now.
Seems to take a while so I will get back to you later when my account password hopefully is recovered.
@Jack Bowen It worked and I now got access to my account again. Im so happy!
Thanks so much, you saved my account :D
Thanks Nelson you are awesome.
You're welcome, thank you! 😊
Exactly what I was looking for! Keep it up!
That's exciting that you found us! Will do!
Thanks Nelson. Very clearly explained! One other thing you can do once the column percentages are just the way you want them, is go back to the ROW SETTINGS and change the Width and Max Width to some other percentage than 100%. The ratio between the columns will remain the same. Not sure exactly when one would need to do this, but it's nice to know you can.
Hi Mark, thanks for sharing! That must be how my math worked out, it was wrong and yet it worked in the end. Thanks for that tip.
Dude, that was it! Max width was at 80 percent for me! Thank you! 03:30
Great!
Efficient and smart, that's all what I needed. Thanks a ton!
You're welcome!
This is genius! Will come in especially useful for custom headers in Divi builder. I've been using media queries for different breakpoints for desktop and can get really fiddly.
Glad it was helpful! This will save lots of CSS :)
To every problem, pee-aye tutorial, thanks you are a great man !
Haha thanks! 👍
Many thanks to you my friend! Your tutorials are phenomenal!
Glad you like them!
Thank Q Nelson, your tutorial helped me is setting the column width and height....
Excellent! I'm so glad it helped!
I didn't know I needed this... but I SO needed this! Definitely gonna use this on future websites! 😁👍
Yes a lot of things are like that, so glad you are happy with it!
You´ve made my day. MANY THANKS!!!
I'm so glad! It makes my day as well when my solutions are helpful!
Thank you. Learn a lot of DIV tips and hacks from your videos.
You're welcome! Be sure to watch the next on mobile column stacking order, it's just as easy as this one!
Dudee! Thank you really much for your amazingly helpful content! Keep it up!
You're welcome Angelo! Thanks so much for the encouragement!
You're the real deal brother.
Haha glad you think so :)
Exactly what I was looking for! Keep it up!
Thank you...
Nice, I will do that! ;)
Great video and written tutorial. Love it. Thank you.
You're welcome, glad you enjoyed!
Great job !!!... keep these tutorials coming.... easiest subscribe ive done in ages. 😀
Hey that's awesome feedback! Let me know if there's anything you would like to see next!
Thank you very very much! I was trying to do it rather long and such an easy decision!
You are welcome, glad you found this solution!
Very helpful tutorial. It also works for boxed grids!!
Glad it helped!
I just clicked subscribe. Your content is amazingly simple to understand
Nice to have you along! :)
Excellent tutorial. Very helpful. Thank you.😊
You're welcome, Michael!
Excellent job. I just won't understand how much it helped me . outstanding work. already subscribed. best of luck friend.
Awesome, thank you!
Game changer, you are awesome brotha
Thank you Rafy! Appreciate that!
Genius - great teacher. Thanks for that.
You're very welcome!
Crazy good stuff!! Thanks for the tips! You are awesome!!
You're welcome, so glad you like my resources!
Thanks for the tutorial
You bet!
Thanks man, saved my life. New subscriber :D
fantastic help!
Glad you like it!
Thank you!!!! It is very helpful and easy to do.
Glad it was helpful!
THX. Great teacher. Best of all: ITS WORKING
Great!
you explained very well, thank you sir
I'm glad you liked it!
wow amazing trick. Thanks
Yes, it's amazing sometimes how simple these are :)
Thank you very much my friend!
You are very welcome
Great easy tutorial. On my last freebie I actually set an ID and just did it in the code module though this is a better way. I actually had a 2 column, but wanted the right side smaller so set a max width on the small side lower than 50% and that worked well but if you have more than two it doesn't work so well like this.
Lately I've been moving a lot of my tutorial and child theme css I to the Custom CSS areas, especially now that they have responsive CSS built in. Yeah if the row is not set to gutter 1 and 100% the widths get weird, I couldn't figure out the logic of it but I guess it's flex related.
excellent - many thanks
My pleasure!
My God man, this is exactly how I was trying to build my header. I wanted a small image module to the left for my logo. the only difference is that I have a search box to the right. Cant wait to watch your video.
Hey Danny, hope you find this helpful!
Wow! Jawdropping tutorial. I do hope ET does incorporate a draggable column resizer though like other page builders
They will introduce more yes, but for now I really think it's a specific enough thing that most users don't need it. And those who do, here ya go 😁
@@PeeAyeCreative Very true statement and that is why I watched it :)
Thanks so very much.
You're welcome!
Love your Tutorials. Thank You Very Much for making it simple and step by step for noobies lie me :P
You're welcome, Amar!
Thank you very much.
You are very welcome!
Nice trick. Thanks
You're welcome! Watch for the next video on a similar trick for mobile column stacking.
I needed like few other things in life... THANK YOU!!
You're welcome, Philipp!
@@PeeAyeCreative I'm currently looking through your video archive one-by-one because I finally found someone who knows what he's talking about!! Thanks!
And one question: is it possible to develop a website so that the font adjusts with the size of the browser width. Meaning: when the browser window expands in width, the text automatically gets larger. When the window gets more narrow, the font shrinks all by itself.
One could build a site von FULL HD with (e.g.) 20px font and when the window adjusts the font adjusts accordingly (eg. to 15px or 25px).
I hope I explained that well?!
Thanks
@@philippdrflr Hi Philipp, for that you can use Media Queries. You'd have to override the Divi font settings with the CSS but it should be possible.
@@PeeAyeCreative Aha.. okay, I'm not going to be able to do that. If it would ever fit into your content pipeline, I'd love to have some tips. But no pressure. I'm just a new sub!!
Yes! exactly what I was after
Awesome, glad you found our channel!
amazing, thanks
Glad you like it!
Thanks - very valuable information! Tried with flex boxes, which is good, but quite complicated for non-coders like me...
Glad it was helpful!
Thank you!
Thank you , Thank you , Thank you!!!!
You're welcome! 😊
Dang. If I had know this I could have saved myself many a head-banging. LOL Thank you a MILLION times over.
Haha you are welcome, glad I could save your head from more banging :)
Great video! Thanks. Didn't realize that by accessing column settings via the row setting you gain access to functionality that is not available by going directly to row settings. Apparently a different level of DIVs are being modified. Almost needs a different name than using column settings over again.
Yes, you can't hover over a column and get the settings. I think it makes sense how they have it. The only setting that you can choose without going in there is the number of columns.
Thx. U fixed my damn sunday prob. TA.
I'm glad I could help!
Good spot to use css clamp function!
That's one I have never used yet!
in 2x speed video his sound more motivated! Thanks from the trick
You're welcome! Not sure what you mean about the speed though!
Thank you!
You're welcome Mark!
THANK YOU
You're welcome!
Excellent, thank you. Question. Would this work if I wanted to place the 100% that your video demonstrated, inside a section that is itself less than 100%?
Yes it should not matter. The percentages are based on the parent container div
Helpful video, i'm from bangladesh sir
I'm glad it is helpful, nice to meet you.
Hello Nelson, awesome video, just hitting one snag: When I go to change the percentage in the custom css to account for cell or tablet, it is greyed out and not letting me override. Any suggestions?
That just means it is showing the one for Desktop, so just type your new code there in the others. It's a bit weird but just pretend it isn't there.
TKS!!!
You're welcome!
Thanks, PEE-AYE-CREATIVE. I have a Question. I want to add multiple column size vertically and horizontally mean I want add a full-width column in a row and under that column, I have to add 3 more columns. mean at the top 1 should be horizontally and 3 should be vertically column. how to do that. I want to do this with column, not with Rows. Please sir
Thankkkk youuuuu
You're welcoooommmmeeee! :)
One thing I did notice, Nelson, when setting custom widths for columns while using the Theme Builder for my header. When I change the widths using the responsive tabs in the Custom CSS area for Tablet or Phone, no changes appear in the Theme Builder unless I'm doing something wrong. However, when I save the header and exit the Theme Builder, the changes I made to the custom header using the responsive tabs do show when the page is displayed at resolutions for Tablet and Phone.
It seems like the changes one makes with Custom CSS when creating a custom header with the Theme Builder should display accordingly for Desktop, Tablet, and Phone while in the Theme Builder. Perhaps if you have the ear of any of the folks at Elegant Themes, you may want to mention that to them.
Yes, that's how it is sometimes with Divi and CSS. There are other instances where that is the case, and I never really stopped and thought about it except to remember that the builder is just rendering React, and so it's not the real thing.
thanks
Hi, I am trying to make my row full width, and I am using these settings and it is keeping the padding on the sides anyways. Any advice?
I'm not sure without know more about the situation.
can't believe they don't have a drag n drop option to change column width . . helpful video by the way ..
Probably after Divi 5
Could you do it with the 'width' sizing adjustments in the design tab? Or is the !important needed for something?
It is important. See what I did there? 😉
What if I need to make column 1 the full height of the section it's in? Can I add a height in the css too?
This tutorial is about width, but sure you can add height.
✅👌GREAT 🌼
🙂
Great Video. I tried it out for my Global Header but i have the following problem:
I made a row with 3 columns and customized it with 40%/40%/20%. The column with the 20% is my menu element. The problem is that now when i open the dropdown menu on mobile device the width of the dropdown menu is just 20% and not the usual 100% width. How can i fix this?
Okay yes, for that you will need to have the column that the menu is in adjusted to 100% width on Phone.
Hello. Please if you know the CSS solution, please your answer. On same question from others below, there isn´t answer from you. Question is: I have 1 ROW with 2 columns and in one of columns I have 2 (or more) modules. In left column there is only one module (picture), but on the right column there are 2 (or more) modules (text modules). Is there CSS code fore change of order for these two modules for mobile view? ...There is no answer on the internet. Thank you very much!
Hi! I'm a beginner, and yes it works on Desktop, but it really messes up the tablet and phone. How do you fix it for mobile? I read all the comments already and tried your suggestion, but that didn't work. Please advise.
Sure yes, this is actually a simple solution. Be sure to click on the little responsive icon (looks like a phone) and the. Make sure to place your css width for either Desktop, Tablet, or Phone.
@@PeeAyeCreative I did do that... or at I think I did. It didn't work. I'll make a screen recording and send it to you.
A question:
Say I add a row (green) with 3 columns and add a blurb module in each column.
On mobile/tab, these three blurbs get stacked over each other, fine.
What if I wanted to increase the margin between these blurbs in MOBILE/TAB (there's no "Margin" option in column settings)
So how do we achieve that?
You could add the margin in the Blue. Spacing settings, or with css in the column.
@@PeeAyeCreative Thank you!
exellent
Thank you!
came back to watch again... Works perfect in Divi, but could not get it to work right in Extdra. Could be me, or could be the theme, not sure.
Great tut, One think to note is that this could mess things up on tablet or mobile mode as the !important tag in your css will remain in control. I tried it with out the !important tag and the css is overwritten. Personally I think it might be best to just add an ID or Class and add in the CSS in the Divi Options. This way you have more control. Anyway great tut.
Hi Scott, I think you misunderstood, you need to use the response css tabs for this. That's why this works so great, no need for media queries or other css, it's all directly in the builder.
Scott, I'm a brand new beginner: I tried removing the tag, but if I do, it won't re-size them for desktop anymore.
Good one! Although I would make it max-width: 33%!important; as just width didn't work with my website.
God....that was sooooo simple. I've waisted hundreds of hours on custom headers trying to do exactly that.......without doing that. lol
Haha that's usually how it goes! Happy to help! Let me know if there anything you would like me to do a tutorial on.
Thank you very much for this tutorial, it helped me a lot! One question please, i managed to form the columns of my menu as i wanted manually without css but i dont saved that! :( now i cannot replicate what i did on divi, is there a way to resize columns manually without CSS?
Hi Lobo, I'm actually not sure what you mean about columns of your menu. And do you mean your changed didn't save?
@@PeeAyeCreative Actually i created a top menu distributed in 3 columns, and wanted to make the same as you did in your video, but manually, i got it, but forgot to save it and lost all my work. And now i can replicate what i did. Thats why i am asking if there is a way to do the column resize, but without CSS coding
There's no way to do it in Divi, which is why I made the tutorial.
merci
de rien
Question, i dont want my columns take 100% width of the screen .. I am making a blog and columbs should be centered for me.
I'm not sure what you mean.
@@PeeAyeCreative The row should be centered in my page and not covering the 100% width of the page.
It looks like this now:
Title
_________________________
ROW
__________________________
Should be:
Title
____________
Row
____________
@@qlf3896 Sorry I don't understand. Maybe with a link I can see what you mean.
@@PeeAyeCreative Question, I can change one row mobile'settings for custom width. But my other row doesnt has any option to change to mobile screen options? Why?
For some reason this isn't working for me. Trying to adjust a website footer, and the 4 column row seems to be set to a weird spacing + adjusted to the left, and I just can't seem to override it. Any suggestions?
I'm not sure without more context as to what you are trying and what isn't working.
Thanks, great one! I wonder why nobody noticed that you ended up with 10 + 65 + 15 + 15 = 105% ;-)
Hehe ☺️
Exactly where I was looking for.
Is there a way to add a column too?
Hi there, can you explain what you mean?
@@PeeAyeCreative Suppose you have 4 columns and you want to add a 5th column to it. How should you do that.?
I have also noticed that the content of the columns does not shrink when the columns differ in width
Great video, thanks! :-) Could you also share how you set this as the top "bar" of your blog and included the log, menu etc. there?
Hi Stephanie, I'm not sure exactly what you mean. Let me know, be happy to help.
@@PeeAyeCreative Oh I just meant the menu bar on your blog which you are showing at 1:34
@@arzallus23 Oh, I was confused because that's exactly what this video is showing. What am I missing?
@@PeeAyeCreative Sorry for not being clear enough :) You are showing how to resize the columns, but I did not know that you could replace the standard menu with a custom made one.
@@arzallus23 Oh, yes that is with the Theme Builder. I have a mini course on the theme builder if you want to check that out and get more familiar with it!
Great explanation, but when I look at the columns on the phone they keep the layout from the desktop. If I enter any !important values for the mobile view, they don't overwrite the desktop values. What am I doing wrong?
It sounds to me like you are not setting the width in the responsive desktop, tablet, and phone settings. You can set a width for each of those.
@@PeeAyeCreative I tried your suggestion too... it didn't work.
@Bigb I don't know because it works for me and it should work. Make sure to be using !important.
@Bigb I believe that, although no changes appear in the display when changing the css in the responsive tabs, they do appear when you save everything and view the page at Tablet or Phone resolutions.
I just posted a comment about this same issue when trying to change the custom css in a header I'm building with the Theme Builder. No changes appear in the display while I'm in the Theme Builder, but when I save my header with the responsive css and exit, the changes do appear in the header when I view the page in Tablet or Phone resolution.
I don't think it should be that way, but I guess it is what it is until they fix it.
can we make nested row in divi???????????
No, but you can add layouts from the Divi Library with the Simple Divi Shortcode plugin.
The layout breaks on mobile view. I wanted to use this on elements in a page but they go over eachothers when the page width changes.
I'm not sure what you mean.
Butttttt.....how do we do that with the footer when we need 2 columns for tablet & 3 or 4 for desktop
Hey Drew, it would be exactly the same using the Theme Builder. Just set a different width for each device breakpoint.
THanks Nelson! ijust subscribed - Would you please also share how to enable equal heights of all these columns on desktop despite of one columns content being taller in pixels than the other - this actually means all the heights will inherit the height of the tallest container. This is super appreciated if you could comment it out. Thanks in advance.
Sure, enabling Equalize Column Heights in the Row Design tab does what you described. Can you try that or fill me in on what I am missing?
What was the text when you "pasted" 10%"?
Where at? Do you mean the !important?
Pee-Aye Creative yes, I think it stared with “width” then 10% was in there but I couldn’t make out the rest.
can you do a tutorial about how to use hover.css to style divi menu
I have several menu tutorials to release. Can you give me more details of what you were wanting?
@@PeeAyeCreative something like this ua-cam.com/video/TcPYVqHAHNQ/v-deo.html
@@PeeAyeCreative ianlunn.github.io/Hover/ how to implement these Background Transitions effects to Divi menu
Sure, we have a tutorial with 30 different menu animations coming next week!
@@PeeAyeCreative Hello have you released that menu animations video yet. Eager to watch that one :)
css code is not shown clearly. Please give me the code.
Hi Manik, I do give the code in the blog post that is linked to every video I create! Go check that out.
but I made a header this and its not responsive
Well, then make it responsive. 😉
@@PeeAyeCreative can you make a video on making a page responsive
shows expected rbrace
Anything in the tutorial would definitely not cause that, so be sure to follow carefully.