Totally agree. You should not have to go through these steps to set column widths in a page builder in 2024. I like Divi a lot, but it can be so buggy and sometimes doing simple things is just cumbersome. Thrive Architect is so much easier to use - although it lacks some features. Hopefully after Divi 5 is released for every day building Elegant Themes will add some features that should have been added long ago. Some of this stuff is just silly approaching 2025.
This is a great tutorial! I'm really glad I signed up for the Divi Adventure Club Membership, not just for the excellent plugins, child themes, etc., but also to encourage you in creating content like this. The more I explore, the more I find answers to issues I've had with Divi. Great work, keep it up!
Excellent tutorial and really helped me with a header I am making and having an issue getting the menu module just the way I wanted it to be along with the other elements in the header. This was the ONLY solution that worked for me and after watching the video it is actually quite simple. Thank you very much. Now Divi needs to get its act together and make sizing columns much easier without doing this - even though, again, it is simple to do with this method.
Hey Nelson! I've never commented on your videos, but I have found them so helpful on numerous times. Thanks so much for the excellent work that you do to bless others! Also, it was only on this video that I found out that you're also a Christian. :) Amazing, brother. Love seeing other Christian creatives doing great work for the Kingdom. Keep it up and may the Lord continue to bless your endeavours.
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! 😊
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.
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.
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.
OMG.... Elegant Themes should hire you as a developer. I have asked this same question to support team that what if I have to resize each column ?? support team answer was "just select different readymade size preset" which was horrible. He should have directed me to this video. LOL. Thanks a lot from Mumbai in year 2024 :)
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.
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.
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
@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.
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.
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.
@@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
@@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!!
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, 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
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!
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%?
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?
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.
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.
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?
I'm not sure what you mean, as on Tablet and Phone they would stack and not all be side by side. If you are using another tutorial or code to achieve that, then I'm sure you could also achieve the different widths of each column too.
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.
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?
@@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.
@@HowToCalifornia 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!
@@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
@@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 ____________
@@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?
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?
@@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
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.
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?
@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.
Thank you for this. I do have to say my expectations on Divi was that this should been included in the settings for the column parameters.
Okay
Totally agree. You should not have to go through these steps to set column widths in a page builder in 2024. I like Divi a lot, but it can be so buggy and sometimes doing simple things is just cumbersome. Thrive Architect is so much easier to use - although it lacks some features. Hopefully after Divi 5 is released for every day building Elegant Themes will add some features that should have been added long ago. Some of this stuff is just silly approaching 2025.
This is a great tutorial! I'm really glad I signed up for the Divi Adventure Club Membership, not just for the excellent plugins, child themes, etc., but also to encourage you in creating content like this. The more I explore, the more I find answers to issues I've had with Divi. Great work, keep it up!
I really appreciate that! Your support keeps us going and means a lot! We enjoy creating these resources and hope to continue!
Genius, thank-you - such a simple solution to an issue that has been driving me nuts, particularly for menu designs!
Glad it helped!
Excellent tutorial and really helped me with a header I am making and having an issue getting the menu module just the way I wanted it to be along with the other elements in the header. This was the ONLY solution that worked for me and after watching the video it is actually quite simple. Thank you very much. Now Divi needs to get its act together and make sizing columns much easier without doing this - even though, again, it is simple to do with this method.
Hey Nelson! I've never commented on your videos, but I have found them so helpful on numerous times. Thanks so much for the excellent work that you do to bless others!
Also, it was only on this video that I found out that you're also a Christian. :) Amazing, brother. Love seeing other Christian creatives doing great work for the Kingdom. Keep it up and may the Lord continue to bless your endeavours.
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! 😊
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!
To every problem, pee-aye tutorial, thanks you are a great man !
Haha thanks! 👍
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!
The man, the myth, the legend. We're not worthy. 🔥
Lol, I'm glad you liked the video!
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!
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!
Thanks again for a great tutorial Nelson - awesome tip! 🤩
My pleasure! Glad you like it!
OMG.... Elegant Themes should hire you as a developer. I have asked this same question to support team that what if I have to resize each column ?? support team answer was "just select different readymade size preset" which was horrible. He should have directed me to this video. LOL. Thanks a lot from Mumbai in year 2024 :)
I'm so glad you found this!
Efficient and smart, that's all what I needed. Thanks a ton!
You're welcome!
Many thanks to you my friend! Your tutorials are phenomenal!
Glad you like them!
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 :)
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
I just clicked subscribe. Your content is amazingly simple to understand
Nice to have you along! :)
Excellent job. I just won't understand how much it helped me . outstanding work. already subscribed. best of luck friend.
Awesome, thank you!
Great video and written tutorial. Love it. Thank you.
You're welcome, glad you enjoyed!
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!
Thank Q Nelson, your tutorial helped me is setting the column width and height....
Excellent! I'm so glad it helped!
Very helpful tutorial. It also works for boxed grids!!
Glad it helped!
Exactly what I was looking for! Keep it up!
Thank you...
Nice, I will do that! ;)
Crazy good stuff!! Thanks for the tips! You are awesome!!
You're welcome, so glad you like my resources!
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!
you explained very well, thank you sir
I'm glad you liked it!
Thanks Nelson you are awesome.
You're welcome, thank you! 😊
Thanks - very valuable information! Tried with flex boxes, which is good, but quite complicated for non-coders like me...
Glad it was helpful!
Genius - great teacher. Thanks for that.
You're very welcome!
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.
Thank you!!!! It is very helpful and easy to do.
Glad it was helpful!
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!
Thanks man, saved my life. New subscriber :D
Such a great tutorial, thank you for the simplicity and making something up to date!
You're welcome, I appreciate your feedback! 🙂
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!
THX. Great teacher. Best of all: ITS WORKING
Great!
Dudee! Thank you really much for your amazingly helpful content! Keep it up!
You're welcome Angelo! Thanks so much for the encouragement!
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.
Hey, dude, thank you for the video, it helped a lot!
You're welcome, I'm so glad it helped!
Thanks for the tutorial
You bet!
Excellent tutorial. Very helpful. Thank you.😊
You're welcome, Michael!
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 :)
Game changer, you are awesome brotha
Thank you Rafy! Appreciate that!
You´ve made my day. MANY THANKS!!!
I'm so glad! It makes my day as well when my solutions are helpful!
Love your Tutorials. Thank You Very Much for making it simple and step by step for noobies lie me :P
You're welcome, Amar!
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!!
You're the real deal brother.
Haha glad you think so :)
Thank you very much my friend!
You are very welcome
in 2x speed video his sound more motivated! Thanks from the trick
You're welcome! Not sure what you mean about the speed though!
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 :)
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, 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
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!
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
Good spot to use css clamp function!
That's one I have never used yet!
excellent - many thanks
My pleasure!
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.
fantastic help!
Glad you like it!
Thanks so very much.
You're welcome!
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.
Thank you , Thank you , Thank you!!!!
You're welcome! 😊
Helpful video, i'm from bangladesh sir
I'm glad it is helpful, nice to meet you.
Thx. U fixed my damn sunday prob. TA.
I'm glad I could help!
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!
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.
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
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.
Yes! exactly what I was after
Awesome, glad you found our channel!
THANK YOU
You're welcome!
Good one! Although I would make it max-width: 33%!important; as just width didn't work with my website.
amazing, thanks
Glad you like it!
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.
Is there a way to do this and keeping the responsive design? This looks good on the desktop but not so good on the tablet and phone size.
I'm not sure what you mean, as on Tablet and Phone they would stack and not all be side by side. If you are using another tutorial or code to achieve that, then I'm sure you could also achieve the different widths of each column too.
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.
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!
wow amazing trick. Thanks
Yes, it's amazing sometimes how simple these are :)
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? 😉
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
@@HowToCalifornia 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.
@@HowToCalifornia 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!
Thank you!
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.
You are very welcome!
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
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.
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?
thanks
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.
Thank you!
You're welcome Mark!
Nice trick. Thanks
You're welcome! Watch for the next video on a similar trick for mobile column stacking.
✅👌GREAT 🌼
🙂
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.
Thankkkk youuuuu
You're welcoooommmmeeee! :)
exellent
Thank you!
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?
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.
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.
TKS!!!
You're welcome!