How To Resize Divi Column Widths To Any Size

  Рет қаралды 45,064

Pee-Aye Creative

Pee-Aye Creative

Күн бұрын

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!

Пікірлер: 234
@daveayres602
@daveayres602 3 жыл бұрын
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.
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
That's great to hear Dave! I'm so glad I can help out with some of the technical things!
@jenniwearing-smith5561
@jenniwearing-smith5561 3 жыл бұрын
Genius, thank-you - such a simple solution to an issue that has been driving me nuts, particularly for menu designs!
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
Glad it helped!
@davga
@davga 4 жыл бұрын
This tutorial deserve certainly more than 29 likes. good job!
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
Thank you! It's not very old yet, but I'd love for more people to find it!
@ootbproductions
@ootbproductions 2 жыл бұрын
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.
@PeeAyeCreative
@PeeAyeCreative 2 жыл бұрын
Glad it helped!
@NAISMA
@NAISMA 4 жыл бұрын
Such a great tutorial, thank you for the simplicity and making something up to date!
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
You're welcome, I appreciate your feedback! 🙂
@mathieu1607
@mathieu1607 2 жыл бұрын
To every problem, pee-aye tutorial, thanks you are a great man !
@PeeAyeCreative
@PeeAyeCreative 2 жыл бұрын
Haha thanks! 👍
@zzpaco
@zzpaco 2 жыл бұрын
Efficient and smart, that's all what I needed. Thanks a ton!
@PeeAyeCreative
@PeeAyeCreative 2 жыл бұрын
You're welcome!
@mnburch
@mnburch 4 жыл бұрын
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.
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
Hi Micheal, I'm so glad you like them! That kind of feedback means a lot!
@sullivanalvin6014
@sullivanalvin6014 2 жыл бұрын
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
@jackbowen8706
@jackbowen8706 2 жыл бұрын
@Sullivan Alvin instablaster =)
@sullivanalvin6014
@sullivanalvin6014 2 жыл бұрын
@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.
@sullivanalvin6014
@sullivanalvin6014 2 жыл бұрын
@Jack Bowen It worked and I now got access to my account again. Im so happy! Thanks so much, you saved my account :D
@phurtomp5718
@phurtomp5718 Жыл бұрын
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! 😊
@Cvtap_Pros
@Cvtap_Pros 2 жыл бұрын
Many thanks to you my friend! Your tutorials are phenomenal!
@PeeAyeCreative
@PeeAyeCreative 2 жыл бұрын
Glad you like them!
@farhan-app
@farhan-app 4 жыл бұрын
Exactly what I was looking for! Keep it up!
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
That's exciting that you found us! Will do!
@loisahmed2085
@loisahmed2085 3 жыл бұрын
Exactly what I was looking for! Keep it up! Thank you...
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
Nice, I will do that! ;)
@stanfordlee
@stanfordlee 4 жыл бұрын
Thank you. Learn a lot of DIV tips and hacks from your videos.
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
You're welcome! Be sure to watch the next on mobile column stacking order, it's just as easy as this one!
@ISMAILISHAQBROS
@ISMAILISHAQBROS 3 жыл бұрын
Thank Q Nelson, your tutorial helped me is setting the column width and height....
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
Excellent! I'm so glad it helped!
@quierodesign3958
@quierodesign3958 19 күн бұрын
Thanks Nelson you are awesome.
@PeeAyeCreative
@PeeAyeCreative 17 күн бұрын
You're welcome, thank you! 😊
@rmgwheelsspokeslab.7767
@rmgwheelsspokeslab.7767 4 жыл бұрын
You´ve made my day. MANY THANKS!!!
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
I'm so glad! It makes my day as well when my solutions are helpful!
@RobStephens_com
@RobStephens_com 3 жыл бұрын
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.
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
Glad it was helpful! This will save lots of CSS :)
@MellesiaLewis
@MellesiaLewis 2 жыл бұрын
Great video and written tutorial. Love it. Thank you.
@PeeAyeCreative
@PeeAyeCreative 2 жыл бұрын
You're welcome, glad you enjoyed!
@wolfsbane89
@wolfsbane89 3 жыл бұрын
I didn't know I needed this... but I SO needed this! Definitely gonna use this on future websites! 😁👍
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
Yes a lot of things are like that, so glad you are happy with it!
@rabitnose
@rabitnose 4 жыл бұрын
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.
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
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.
@angelolicettifans
@angelolicettifans 3 жыл бұрын
Dudee! Thank you really much for your amazingly helpful content! Keep it up!
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
You're welcome Angelo! Thanks so much for the encouragement!
@1234churchgirl
@1234churchgirl 2 жыл бұрын
Crazy good stuff!! Thanks for the tips! You are awesome!!
@PeeAyeCreative
@PeeAyeCreative 2 жыл бұрын
You're welcome, so glad you like my resources!
@julixoxoxo1
@julixoxoxo1 2 жыл бұрын
Very helpful tutorial. It also works for boxed grids!!
@PeeAyeCreative
@PeeAyeCreative 2 жыл бұрын
Glad it helped!
@yevgeniavasilieva1939
@yevgeniavasilieva1939 3 жыл бұрын
Thank you very very much! I was trying to do it rather long and such an easy decision!
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
You are welcome, glad you found this solution!
@mrkbjames3094
@mrkbjames3094 4 жыл бұрын
I just clicked subscribe. Your content is amazingly simple to understand
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
Nice to have you along! :)
@tim.costello
@tim.costello 4 жыл бұрын
Great job !!!... keep these tutorials coming.... easiest subscribe ive done in ages. 😀
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
Hey that's awesome feedback! Let me know if there's anything you would like to see next!
@sfakib8875
@sfakib8875 3 жыл бұрын
Excellent job. I just won't understand how much it helped me . outstanding work. already subscribed. best of luck friend.
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
Awesome, thank you!
@johnquigley5480
@johnquigley5480 3 жыл бұрын
Genius - great teacher. Thanks for that.
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
You're very welcome!
@DroneMaverick
@DroneMaverick 3 жыл бұрын
Dude, that was it! Max width was at 80 percent for me! Thank you! 03:30
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
Great!
@mikecutmaster
@mikecutmaster 2 жыл бұрын
THX. Great teacher. Best of all: ITS WORKING
@PeeAyeCreative
@PeeAyeCreative 2 жыл бұрын
Great!
@0mgFlip
@0mgFlip 3 жыл бұрын
Thanks man, saved my life. New subscriber :D
@samanthashi552
@samanthashi552 3 жыл бұрын
Thank you!!!! It is very helpful and easy to do.
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
Glad it was helpful!
@djnathansp
@djnathansp 4 жыл бұрын
You're the real deal brother.
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
Haha glad you think so :)
@brunomiller1263
@brunomiller1263 4 жыл бұрын
Thanks for the tutorial
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
You bet!
@MichaelGer
@MichaelGer 4 жыл бұрын
Excellent tutorial. Very helpful. Thank you.😊
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
You're welcome, Michael!
@rafymisla7200
@rafymisla7200 4 жыл бұрын
Game changer, you are awesome brotha
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
Thank you Rafy! Appreciate that!
@nikhilpal8205
@nikhilpal8205 3 жыл бұрын
you explained very well, thank you sir
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
I'm glad you liked it!
@paulmatthews1346
@paulmatthews1346 11 ай бұрын
excellent - many thanks
@PeeAyeCreative
@PeeAyeCreative 11 ай бұрын
My pleasure!
@baraddur7664
@baraddur7664 4 ай бұрын
Thank you very much my friend!
@PeeAyeCreative
@PeeAyeCreative 4 ай бұрын
You are very welcome
@melodiegriffin887
@melodiegriffin887 4 жыл бұрын
fantastic help!
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
Glad you like it!
@philippdrflr
@philippdrflr 4 жыл бұрын
I needed like few other things in life... THANK YOU!!
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
You're welcome, Philipp!
@philippdrflr
@philippdrflr 4 жыл бұрын
@@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
@PeeAyeCreative 4 жыл бұрын
@@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.
@philippdrflr
@philippdrflr 4 жыл бұрын
@@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!!
@skeptimedia1093
@skeptimedia1093 2 жыл бұрын
Thanks so very much.
@PeeAyeCreative
@PeeAyeCreative 2 жыл бұрын
You're welcome!
@amarghate2712
@amarghate2712 3 жыл бұрын
Love your Tutorials. Thank You Very Much for making it simple and step by step for noobies lie me :P
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
You're welcome, Amar!
@johannassouline
@johannassouline 3 жыл бұрын
amazing, thanks
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
Glad you like it!
@Hubukai
@Hubukai 2 жыл бұрын
Thank you , Thank you , Thank you!!!!
@PeeAyeCreative
@PeeAyeCreative 2 жыл бұрын
You're welcome! 😊
@DiogoSaraivabeatz
@DiogoSaraivabeatz Жыл бұрын
Thank you!
@joshcollier2023
@joshcollier2023 4 жыл бұрын
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.
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
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.
@ultimatekv
@ultimatekv 4 жыл бұрын
wow amazing trick. Thanks
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
Yes, it's amazing sometimes how simple these are :)
@OVRasmussen
@OVRasmussen 4 жыл бұрын
Thanks - very valuable information! Tried with flex boxes, which is good, but quite complicated for non-coders like me...
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
Glad it was helpful!
@claytonagenciaeu5566
@claytonagenciaeu5566 4 жыл бұрын
in 2x speed video his sound more motivated! Thanks from the trick
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
You're welcome! Not sure what you mean about the speed though!
@ZorbaPress
@ZorbaPress 4 жыл бұрын
Thank you very much.
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
You are very welcome!
@subinvarghese8967
@subinvarghese8967 4 жыл бұрын
Nice trick. Thanks
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
You're welcome! Watch for the next video on a similar trick for mobile column stacking.
@AnzeigenSpezialist
@AnzeigenSpezialist 3 жыл бұрын
Thx. U fixed my damn sunday prob. TA.
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
I'm glad I could help!
@degagnemarc
@degagnemarc 3 жыл бұрын
Good spot to use css clamp function!
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
That's one I have never used yet!
@djiwoweenas6956
@djiwoweenas6956 3 жыл бұрын
THANK YOU
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
You're welcome!
@poolman20001
@poolman20001 4 жыл бұрын
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.
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
Hey Danny, hope you find this helpful!
@joshuaberrios
@joshuaberrios 3 жыл бұрын
Wow! Jawdropping tutorial. I do hope ET does incorporate a draggable column resizer though like other page builders
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
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 😁
@joshuaberrios
@joshuaberrios 3 жыл бұрын
@@PeeAyeCreative Very true statement and that is why I watched it :)
@leea4839
@leea4839 3 жыл бұрын
Yes! exactly what I was after
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
Awesome, glad you found our channel!
@smtmurray
@smtmurray 3 жыл бұрын
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.
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
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.
@markjonathanaliwanag1889
@markjonathanaliwanag1889 3 жыл бұрын
Thank you!
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
You're welcome Mark!
@maggiechangseo
@maggiechangseo 3 жыл бұрын
Dang. If I had know this I could have saved myself many a head-banging. LOL Thank you a MILLION times over.
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
Haha you are welcome, glad I could save your head from more banging :)
@simonecosulich7139
@simonecosulich7139 3 жыл бұрын
TKS!!!
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
You're welcome!
@nahidhasanfz
@nahidhasanfz Жыл бұрын
thanks
@developerswim
@developerswim 2 жыл бұрын
Helpful video, i'm from bangladesh sir
@PeeAyeCreative
@PeeAyeCreative 2 жыл бұрын
I'm glad it is helpful, nice to meet you.
@yira.linares
@yira.linares 4 жыл бұрын
Thankkkk youuuuu
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
You're welcoooommmmeeee! :)
@sarajavid237
@sarajavid237 Жыл бұрын
✅👌GREAT 🌼
@PeeAyeCreative
@PeeAyeCreative Жыл бұрын
🙂
@saadmushtaq1932
@saadmushtaq1932 3 жыл бұрын
exellent
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
Thank you!
@angeliquebergerEXDB
@angeliquebergerEXDB 3 жыл бұрын
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?
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
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.
@showbizvet
@showbizvet 2 жыл бұрын
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%?
@PeeAyeCreative
@PeeAyeCreative 2 жыл бұрын
Yes it should not matter. The percentages are based on the parent container div
@user-ib7lr1bg2e
@user-ib7lr1bg2e 7 ай бұрын
can't believe they don't have a drag n drop option to change column width . . helpful video by the way ..
@PeeAyeCreative
@PeeAyeCreative 7 ай бұрын
Probably after Divi 5
@ShiningStarStudios
@ShiningStarStudios 4 жыл бұрын
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.
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
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.
@ShiningStarStudios
@ShiningStarStudios 4 жыл бұрын
@@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.
@mnburch
@mnburch 4 жыл бұрын
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.
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
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.
@mr.c.2888
@mr.c.2888 3 жыл бұрын
Could you do it with the 'width' sizing adjustments in the design tab? Or is the !important needed for something?
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
It is important. See what I did there? 😉
@TayabBhatti193
@TayabBhatti193 2 жыл бұрын
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
@TheBrioMethod
@TheBrioMethod 3 жыл бұрын
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?
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
I'm not sure without know more about the situation.
@game-sy4nb
@game-sy4nb 4 жыл бұрын
merci
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
de rien
@elizabethaikens8869
@elizabethaikens8869 Жыл бұрын
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?
@PeeAyeCreative
@PeeAyeCreative Жыл бұрын
This tutorial is about width, but sure you can add height.
@ScottMalouin
@ScottMalouin 4 жыл бұрын
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.
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
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.
@ShiningStarStudios
@ShiningStarStudios 4 жыл бұрын
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.
@HighSpiritsGuy
@HighSpiritsGuy 3 жыл бұрын
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
@PeeAyeCreative 3 жыл бұрын
You could add the margin in the Blue. Spacing settings, or with css in the column.
@HighSpiritsGuy
@HighSpiritsGuy 3 жыл бұрын
@@PeeAyeCreative Thank you!
@MrJammingLove
@MrJammingLove 3 жыл бұрын
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?
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
Okay yes, for that you will need to have the column that the menu is in adjusted to 100% width on Phone.
@danielvanginkel7081
@danielvanginkel7081 2 жыл бұрын
Good one! Although I would make it max-width: 33%!important; as just width didn't work with my website.
@qlf3896
@qlf3896 3 жыл бұрын
Question, i dont want my columns take 100% width of the screen .. I am making a blog and columbs should be centered for me.
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
I'm not sure what you mean.
@qlf3896
@qlf3896 3 жыл бұрын
​@@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
@PeeAyeCreative 3 жыл бұрын
@@qlf3896 Sorry I don't understand. Maybe with a link I can see what you mean.
@qlf3896
@qlf3896 3 жыл бұрын
@@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?
@showbizvet
@showbizvet 2 жыл бұрын
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.
@empolas
@empolas 10 ай бұрын
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!
@440er
@440er 4 жыл бұрын
Thanks, great one! I wonder why nobody noticed that you ended up with 10 + 65 + 15 + 15 = 105% ;-)
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
Hehe ☺️
@abigroman
@abigroman 4 жыл бұрын
God....that was sooooo simple. I've waisted hundreds of hours on custom headers trying to do exactly that.......without doing that. lol
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
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.
@arzallus23
@arzallus23 3 жыл бұрын
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?
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
Hi Stephanie, I'm not sure exactly what you mean. Let me know, be happy to help.
@arzallus23
@arzallus23 3 жыл бұрын
@@PeeAyeCreative Oh I just meant the menu bar on your blog which you are showing at 1:34
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
@@arzallus23 Oh, I was confused because that's exactly what this video is showing. What am I missing?
@arzallus23
@arzallus23 3 жыл бұрын
@@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.
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
@@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!
@rileyholcombe4458
@rileyholcombe4458 3 жыл бұрын
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?
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
I'm not sure without more context as to what you are trying and what isn't working.
@ichbins5346
@ichbins5346 4 жыл бұрын
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?
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
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.
@ShiningStarStudios
@ShiningStarStudios 4 жыл бұрын
@@PeeAyeCreative I tried your suggestion too... it didn't work.
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
@Bigb I don't know because it works for me and it should work. Make sure to be using !important.
@mnburch
@mnburch 4 жыл бұрын
@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.
@kikeo
@kikeo 3 жыл бұрын
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
@PeeAyeCreative 3 жыл бұрын
Hi Lobo, I'm actually not sure what you mean about columns of your menu. And do you mean your changed didn't save?
@kikeo
@kikeo 3 жыл бұрын
@@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
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
There's no way to do it in Divi, which is why I made the tutorial.
@HansjeVdTillaert
@HansjeVdTillaert 4 жыл бұрын
Exactly where I was looking for. Is there a way to add a column too?
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
Hi there, can you explain what you mean?
@HansjeVdTillaert
@HansjeVdTillaert 4 жыл бұрын
@@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
@Rogerdof
@Rogerdof 3 жыл бұрын
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.
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
I'm not sure what you mean.
@abigroman
@abigroman 4 жыл бұрын
Butttttt.....how do we do that with the footer when we need 2 columns for tablet & 3 or 4 for desktop
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
Hey Drew, it would be exactly the same using the Theme Builder. Just set a different width for each device breakpoint.
@saadmushtaq1932
@saadmushtaq1932 3 жыл бұрын
can we make nested row in divi???????????
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
No, but you can add layouts from the Divi Library with the Simple Divi Shortcode plugin.
@brucefite
@brucefite 4 жыл бұрын
What was the text when you "pasted" 10%"?
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
Where at? Do you mean the !important?
@brucefite
@brucefite 4 жыл бұрын
Pee-Aye Creative yes, I think it stared with “width” then 10% was in there but I couldn’t make out the rest.
@gurushakti69
@gurushakti69 3 жыл бұрын
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.
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
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?
@rasikathenuwara2340
@rasikathenuwara2340 4 жыл бұрын
can you do a tutorial about how to use hover.css to style divi menu
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
I have several menu tutorials to release. Can you give me more details of what you were wanting?
@rasikathenuwara2340
@rasikathenuwara2340 4 жыл бұрын
@@PeeAyeCreative something like this kzbin.info/www/bejne/ipSziomnfaZ7hLM
@rasikathenuwara2340
@rasikathenuwara2340 4 жыл бұрын
@@PeeAyeCreative ianlunn.github.io/Hover/ how to implement these Background Transitions effects to Divi menu
@PeeAyeCreative
@PeeAyeCreative 4 жыл бұрын
Sure, we have a tutorial with 30 different menu animations coming next week!
@ultimatekv
@ultimatekv 4 жыл бұрын
@@PeeAyeCreative Hello have you released that menu animations video yet. Eager to watch that one :)
@whiterage0053
@whiterage0053 3 жыл бұрын
css code is not shown clearly. Please give me the code.
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
Hi Manik, I do give the code in the blog post that is linked to every video I create! Go check that out.
@mohammadshafeeq3471
@mohammadshafeeq3471 3 жыл бұрын
but I made a header this and its not responsive
@PeeAyeCreative
@PeeAyeCreative 3 жыл бұрын
Well, then make it responsive. 😉
@mohammadshafeeq3471
@mohammadshafeeq3471 3 жыл бұрын
@@PeeAyeCreative can you make a video on making a page responsive
@dhruvagarwal549
@dhruvagarwal549 9 ай бұрын
shows expected rbrace
@PeeAyeCreative
@PeeAyeCreative 9 ай бұрын
Anything in the tutorial would definitely not cause that, so be sure to follow carefully.
How To Manually Set Divi Column Stacking Order on Mobile [Super Easy]
7:03
How to Optimize Divi for Mobile Using the Visual Builder
9:58
Josh Hall
Рет қаралды 122 М.
아이스크림으로 체감되는 요즘 물가
00:16
진영민yeongmin
Рет қаралды 55 МЛН
Did you believe it was real? #tiktok
00:25
Анастасия Тарасова
Рет қаралды 54 МЛН
I Can't Believe We Did This...
00:38
Stokes Twins
Рет қаралды 101 МЛН
How to customize column widths in Divi // Web Tutorial
8:00
Michelle Schneider
Рет қаралды 6 М.
How To Make The Divi Blog Grid Equal Height
15:48
Pee-Aye Creative
Рет қаралды 14 М.
How To Crop Divi Images | Change Image Aspect Ratio In The Builder
10:40
Pee-Aye Creative
Рет қаралды 18 М.
How to Keep Columns on Mobile in Divi
11:20
Josh Hall
Рет қаралды 100 М.
Using Divi’s New Height & Width Options to Create Responsive Design
9:26
Using CSS custom properties like this is a waste
16:12
Kevin Powell
Рет қаралды 161 М.
How To Stack Any Divi Module Side By Side // Divi Tutorial
9:14
Michelle Schneider
Рет қаралды 16 М.
How To Change The Divi Header Menu When Scrolling
9:39
Pee-Aye Creative
Рет қаралды 37 М.
Stack Buttons Beside Each Other In One Row // Divi Tutorial
7:56
Michelle Schneider
Рет қаралды 11 М.
아이스크림으로 체감되는 요즘 물가
00:16
진영민yeongmin
Рет қаралды 55 МЛН