For links, resources and the code shown in the tutorial, head over to: joshhall.co/how-to-keep-colum... If you're interested in my Divi/CSS Course, use coupon code "CSS10" to get 10% OFF! joshhall.co/product/divi-css-...
Пікірлер: 133
@Paynologic2 жыл бұрын
There is much easier way to keep columns in Divi. Go to the Row Settings > Advanced > Custom CSS > Main Element & add display: flex;
@sethagee502 Жыл бұрын
Brilliant! Thank you so much! none of the other fixes were working for me!! Of course, when it comes to CSS, I'm kinda lost, but following every step, I still couldn't get these to work!
@Paynologic Жыл бұрын
@@sethagee502 I'm glad I could help.
@ItsNicoleD Жыл бұрын
Awesome! Perfect and simple.
@lastarena3 жыл бұрын
You're a lifesaver, Josh! Looked everywhere for this and you're the only one who came through. Works like a charm! Thank you!
@KerrieRedgate3 жыл бұрын
Thank you!!! I appreciate your clarity, Josh. Also, that's a great tip about naming classes - I hadn't thought of the implications! 🙏
@kajetankrott57545 жыл бұрын
Josh, what you do for this community is incredible!
@mojeff3143 жыл бұрын
Thank you. So simple. You mention in the video naming convention. One good practice to help with collisions is to prefix your personal classes with something like your company or personal name initials. So for instance, I prefix my class names with "ma".
@davyatu97694 жыл бұрын
I barely comment on KZbin videos, but for this one my conscience told me that I had to! You're a hero, brother. Thank you so much for everything and keep it up.
@JoshHallco4 жыл бұрын
Thanks Davy :)
@bonorbitz4 жыл бұрын
Why is it still this way almost one year later? Why hasn't Divi incorporated this functionality into the Visual Builder?
@Biglex5244 жыл бұрын
what's worse is that Josh is the only person on youtube to describe right, the guy from elegant themes videos fucking sucks at explaining things.
@eikoschmidtke3203 жыл бұрын
@@Biglex524 hes still doing it for free, I guess. so kudos to him for trying at least
@lucas73702 жыл бұрын
this aged well, still the same issue
@shaguncreations.3 жыл бұрын
Good, you’re a great teacher sir, explain clearly step by step.
@lolitadesignz Жыл бұрын
You are awesome! I watched multiple videos before finding yours, and almost gave up until you broke it down so simply and gave us very simple steps to do it ourselves. Then you gave us the code! AHHH and it works, bro you saved me the biggest headache on my e-commerce site, thank you so much! I've been putting this off until now because the steps in the other videos weren't working for me, I was afraid I would have to buy a plugin but nope, thanks for being awesome!
@Kcorey3 жыл бұрын
I watched a similar video. Your description is much clearer than other people's videos! Your video is included how to use the inspect-Tool, to rewrite and add to css that is very clear, and if you have other themes, you can easily add code by doing the same as in this video.
Justo lo que necesitaba!! Muchas gracias Josh!! :D Y definitivamente llevaré tu curso de CSS.
@rgbcom4 жыл бұрын
What a great professor you are!
@shaf7475 жыл бұрын
Awesome as usual Josh!! Thank you man!!
@wendymason32632 жыл бұрын
Thank you so much Josh, just what I needed.
@gillianhersh42728 ай бұрын
THANK YOU for this clear and concise explanation!
@jessicagarcia82874 жыл бұрын
Muito Obrigada por compartilhar seus conhecimentos Josh. Você me salvou!!
@aliceleblanc73184 жыл бұрын
I love your tutorials! Many thanks!
@brodybestluck2 жыл бұрын
Josh you videos are incredible, making me a better web dev
@NicksStuff4 жыл бұрын
Worked great on the Astra theme, thanks!
@Carorca23 жыл бұрын
this has been a life saver, thanks
@Rivasme4 жыл бұрын
great tutorial! I used it with a 5 row! Thanks!
@landisorso28565 жыл бұрын
Thanks man! Worked like a charm!
@mwpiotrek2 жыл бұрын
Thank you Josh!
@adrianas.82564 жыл бұрын
Finalmente questo che cercavo . Grazie
@TECStudy7 ай бұрын
You saved me a lot of time ! Thank you.
@peperodriguez34074 жыл бұрын
Than you very much for the tutorial. God bless you, really
@cheeseybud3 жыл бұрын
@Josh Hall. Thank you for this, it saved my sanity :D Great work, I love your turorials :)
@Montes119853 жыл бұрын
Thank you so much bro! Easy and allright , greetings from Perú
@HipstersNetwork5 жыл бұрын
Really needed thiss thank you!!!!
@dadg154 жыл бұрын
Eres el mejor! You're the best! thanks for helping me for the fiftieth time
@antlerup5 жыл бұрын
Super helpful, thank you!!
@arkianderson87385 жыл бұрын
THANKYOU SOOOOO MUCH! finally!
@SonaalShandilya10 ай бұрын
Still very useful. Thanks a ton. You're awesome!
@JoshHallco10 ай бұрын
Always glad to find timeless tricks!
@82Prisma3 жыл бұрын
uhhuuuulll!!! Encontrei a solução thanks Josh!
@manolomaru3 жыл бұрын
Incredible bro! ✨🙋♂️👍
@heraldhida42764 жыл бұрын
Thanks bro keep up the good work
@sergioadriandiaz77953 жыл бұрын
thanks Josh
@galer0415 жыл бұрын
It's nice, I will have to design mine and host it . Thanks
@comeripoche14564 жыл бұрын
Thank you very much. It works.
@dennizjansen5 жыл бұрын
Hi Josh, great video's on your chanel! Learned a lot of new things, and things I thought I did well you did even quicker and easier. One thing I'm still struggling with in regard to keeping columns though. If you have one row with 2 x 5 modules, in my case blurbs, when you use this method for 2 columns it divides the blurbs in 2x2x2x2x1x1 instead of the desired 2x2x2x2x2. I can't seem to figure this out.
@Backstage7984 жыл бұрын
Thanks you are awesome!
@m44verick4 жыл бұрын
Perfect it worked!
@jeanpaulwebdev83024 жыл бұрын
Thank you! U saved me... :]
@yairsoto64233 жыл бұрын
Thank you! New subscriber :D
@seakmouyhong5 жыл бұрын
nice tutorial
@skedesignprotv3 жыл бұрын
Great ! thank you !
@thebibleproof4 жыл бұрын
Thank you Josh, maybe I missed it, but can you do a quick tutorial for using differently cropped image for the hero section on mobile?
@GetNicecoach4 жыл бұрын
Perfect thank you
@ajaelee844 жыл бұрын
thank you!!
@AnchuaProjects3 жыл бұрын
Thanks a lot!
@RahmatAli-zp9iy4 жыл бұрын
Thank you, but can I apply different order for other columns at the same time? Like I wanna have 4 columns in mobile version since they are just icons.
@imti23375 жыл бұрын
thank you HERO
@aiRCoft5 жыл бұрын
This is working fine for me when viewed on a smartphone in portrait mode, however, in landscape mode, it displays only one column stacked, with the modules aligned to the left side of the page, (although they're all set to be center-aligned)... Do you know what might be causing this, and/or how to get rows to retain the same number of columns when in landscape as in portrait? Thanks!
@RobinAWhite2 жыл бұрын
I'm having the same problem now, two years later. That, and it's keeping columns side-by-side on phones but not tablets for some reason.
@Crronor4 жыл бұрын
Thank you
@sufaatalkautsar360111 ай бұрын
Terima kasih Thank you
@brainynbrawny95624 жыл бұрын
Great video as always, Josh. I'd like to see how to maintain columns on tablet and mobile when they are not all the same size. For instance, three columns where the center one is larger than the end two. This is what I'm currently searching for an answer to and have yet to find it.
@alejandrosuarez24799 ай бұрын
Did you find an answer to this? I've tried display flex and display grid and none of them work for me
@inzaneskins7 ай бұрын
@@alejandrosuarez2479 - I did not find an answer or solution to that.
@auwssessam67345 жыл бұрын
Hello Thanks alot for your great help You're awesome Wondering how to use same method for the shop page please
@JanineMKartist Жыл бұрын
awesome! This helped. Is css easy to learn?
@paulwhitehead18164 жыл бұрын
Josh, can you please do a new divi 4.0 update to this video? Some things have changed with the transform option and I'd like to see a row w/3 columns example. Thank you!
@blisscoachiingandwellness4 жыл бұрын
What version of Divi are you working in. I don't see the icons int he lower left hand corner that you are referencing.
@piotrszczygie29313 жыл бұрын
Hello, thank you, great Video - I have a question. How to do the same with 4 columns where first is 50% of width and next are for example 13%?
@lovedesignwork23944 жыл бұрын
Didn't work for Divi 4, maybe is good to update this video to Divi 4 instead please...
@capitanchorizzo4 жыл бұрын
That's a fabulous one, Josh, thank you! In my case though - 1 row with 6 items in 3 columns right on top of each other (2 x 3 items) the top 5 items behave nicely on mobile, but the last one does go down on a line of it's own. Is that something to do with this «last-child» thing? Would you know how to fix this? Thanks and keep it up!
@JoshHallco4 жыл бұрын
Yeah it could be depending on the elements you're using this with. I'd be sure to clear cache and refresh browser to make sure all code is displaying correctly and if so, just play around with the percentage/padding and margins to help line up!
@HifyTech4 жыл бұрын
it half worked for me, I am still on 2 columns on phone version even after typing !important pls this is important edit: it isn't working well when used with the divi shop module, but everything is fine is it is an image or simiple blurb. How do i implement this with the woocomerce shop module
@shivamathiya83845 жыл бұрын
Awesome that worked for me But i am still facing problems between 1000 px - 1980px widths those icons are buldging back to 200px size looking terrible please help.....
@abigroman4 жыл бұрын
Needed to shrink 3 to 2 colums for tablet: flex-wrap:wrap;
@jssaylor5 жыл бұрын
Any tips for when you have a 1/3 - 2/3 row to keep them on the same row?
@JoshHallco5 жыл бұрын
I've had a couple questions about that...I think I'll do a version 2.0 of this soon to cover that :)
@mithrurachamalla64084 жыл бұрын
@@JoshHallco Have you done that, sir?
@MB-sl8pw4 жыл бұрын
Didn't Elegant Themes sell Divi showing that you could do this in the designer ? Design for desktop change designer to tablet set text size, change designer to mobile change design and make design changes there ?
@tianapayne19244 жыл бұрын
Will this still work if the code in inspect says .et_pb_row instead of column? Are rows and columns treated the same in divi or is "row" just the new word now for "column"? anyway - this code didn't seem to do anything.
@alfredstanley48793 жыл бұрын
genius!
@ultramarinefilms80423 жыл бұрын
no other option to reduce the column width in divi? like elementer we can reduce column width then the second column will automaticaly come to right
@goshenweb5 жыл бұрын
Josh - the opposite is what I have found very problematic working with Divi builder. I had a row with three columns which I struggled to get to stack on tablet (iPad mini). Rather, the columns became extremely thin width and would not stack (it stacked as expected on smartphone).i had to manually style the columns to get it to eventually stack. Such a shame that Divi is so inconsistent with the way different elements work. Another such issue is with the Make columns same height which never seem to work.
@JoshHallco5 жыл бұрын
mmm that's odd. Divi automatically stacks all modules and columns on mobile so you must've had some code, plugin or something conflicting with it. All pretty easily fixed and customized with a good understanding of CSS. Same with the vertical columns. I know that's a little tricky and maybe one day Divi will add it which would be nice. This is a good solution in the meantime: divi.space/css-course/how-to-set-equal-column-heights-using-flexbox/
@samuri20112 жыл бұрын
how do you make this work if you have a custom gutter and 100% full width collumns?? It didnt work on my screen and i think thats why
@realaleh10 ай бұрын
Does this work if the module is a blurb? I havent been able to make it work
@veyspixelboy2 жыл бұрын
it's really good thank you , but you have three pictures and I have four. I don't want the forth goes down and I just want to see the fourth when I scroll horizontally, if you understand what I mean, this is possible with divi?
@JoshHallco2 жыл бұрын
Yep you can just tweak the percentage to 25% on mobile or you can create a class for 2 columns (50%), 3 columns (33%) 4 columns (25%) etc!
@ewallet2u5 жыл бұрын
Now in the new version of divi, they already include the max and min width right?
@JoshHallco5 жыл бұрын
Yeah there are settings for those now though I still find myself going this route as you have to manually set it the px with the Divi options. Either way is fine though.
@nikschwarten5 жыл бұрын
@@JoshHallco What about display: flex; ?
@sarajavid2374 жыл бұрын
Dear Josh, My translated website with Divi 4.0 have 2 Languages, my English language is LTR but my other languages is RTL. My problem is RTL MENU on mobile and tablet view. I don't know how can I have to menu with different directions ( LTR and RTL ) on mobile and tablet view. Could you please help me!
@rampatuga53904 жыл бұрын
no changes at all whenever i write 33 % why ????
@aniketjoshi75185 жыл бұрын
Cool
@zoiphotographer4 жыл бұрын
what about if I want to force the view only on Tablet version but not on mobiles?
@hellacat56104 жыл бұрын
I want to find out the same!
@zoiphotographer4 жыл бұрын
@@hellacat5610 Here it is the correct code: /* force columns view only on TABLET devices */ @media only screen and ( min-width: 768px ) and ( max-width: 980px ) { .two-columns .et_pb_column { width: 50%!important; } .three-columns .et_pb_column { width: 33.33%!important; } .four-columns .et_pb_column { width: 25%!important; } }
@cryo52342 жыл бұрын
Outdated, the most simple way is to go on ADVANCED > MAIN ELEMENT > and write: display: flex;
@MrBangization3 жыл бұрын
Hi Josh. Any reason why this doesn't seem to work on Safari?
@MichaelEugeneShaner5 жыл бұрын
Does/will this CSS work in any WordPress theme?
@JoshHallco5 жыл бұрын
You could pull from this same method but the CSS selector will change depending on what theme you use.
@ed56164 жыл бұрын
tried on divi 4 but didn't work
@castleacadia40954 жыл бұрын
Hello Josh and everyone! I put this CSS into my website (only difference is that its for four columns) but no change is happening and I'm not sure why. Any suggestions?
@JoshHallco4 жыл бұрын
9/10 you just need to make sure to clear your cache and do a hard refresh on your browser! Then it should show :)
@castleacadia40954 жыл бұрын
@@JoshHallco Thank you! It's working now :D
@terangaworldservice97274 жыл бұрын
hello me my problem is my slider is too big in mobile version how to adapt all this
@towfiqueahmed11113 жыл бұрын
i cant find .et_pb_column
@mithrurachamalla64084 жыл бұрын
Link is not working, Josh
@manchando14 жыл бұрын
This video is grerat, but I´m agree with previous comment, DIVI maybe should be! jejej wherever many thanks!
@mauamolat4 жыл бұрын
How about buttons?
@rishabhhalder36883 жыл бұрын
That's actually I am searching for ....................
@wypseАй бұрын
This does not work for me idk why
@Bonnie-Lewis-Australia9 ай бұрын
I tried this but it didn’t work ?
@JoshHallco9 ай бұрын
Try clearing all caches and follow these steps: kzbin.info/www/bejne/oKutp2iGl9JsbZY
@abbynormal89945 жыл бұрын
Do you ever have the problem where what you’re seeing on your mobile view doesn’t match what actually shows up on your phone?
@JoshHallco5 жыл бұрын
Yeah that does occasionally happen especially if you're looking through the Divi VB. I tend to use inspect element then look at an actual phone then adjust accordingly.
@rufi61603 жыл бұрын
Mobol or Mobile
@ignitemedia72194 жыл бұрын
Not sure why this isn't working for me.
@JoshHallco4 жыл бұрын
Be sure to clear cache and refresh browser to see all CSS changes take effect!
@tonysamaniego78753 жыл бұрын
this didn't work for me... so frustrating
@zennybarbosa38052 жыл бұрын
Thank you for trying, it didn't work for me. And shame on Elegant Themes (Divi)