Man, wish there was a "Love" button because "Like" just doesn't cut it for this video. Just sayin' is all. Thank you for this! Oh, and yes, please do an in-depth video for OxyNinja utility classes!
Honestly I am so glad you are giving us this many personal pro tips for free. A solid workflow like yours really help us and the oxy community to grow healthily. 🙌
To add spacing to flexbox items you give them padding and give negative margin to the container, it works very well. I preffer to use grid wherever I can but sometimes you have to use flexbox.
Very very very gooooood, thank you very much Kevin. I wait for you to make a "very full" and "very soon" Oxininja tutorials, and I promis I will use your affiliate link to buy it 😎!
thats great thanks. But If I only wanted 2 columns to show regardless of size, even on small. How can I ensure it fits.. logic suggests there should be an option where the system identifies that it needs to make the next smaller in the columns in order to always display the 2 columns, so they adapt to the situation.. I have no idea how to do that though, so I guess im left with trying to make the columns small enough so they will show on small by default
is it possible to reverse the layout for mobile responsiveness? So let's say you make a two column layout using Grid and you place your image on the right, On mobile view the image ends up on the bottom. Is there a way to make it so that image placed on the right side can end up on top in the responsive views?
Yes. You can just use the "order" property on a child div inside the grid to put it's order anywhere. So you can move the 2nd child to the first position in a 2-column grid. Or vice versa. Or move column 3 to column 1. It's very flexible.
@@Gearyco Thank you for you tutorials ! I am a real fan. Could you let me know how to use this order property ? I got rid of my columns but I struggle with the layout for mobile responsiveness... Thanks a lot !
@@anne-camillemonet6467 No, you don't. But I'm a hobbyist/beginner fiddeling round with my own site. So I think there are other people with way more knowledge and experience to answer the question better. Maybe head over to the official oxygen FB Group and ask there. Either you can achieve this with the controls within Oxygen (never tried) or some custom CSS.
You are right about context but there is a balance. You need to decide what you want to say and get right to it. Only trying to be constructive here. You obviously know your subject.
If you look at the tutorial you will see that you are missing the first part which should be " what are we going to do" with visual examples. That should take about 20 seconds. Then get down to " how you will do it". Then you can add some but not too much context. Then you can get down to the meat of the tutorial. I watch many tutorials on oxyen builder and yours seem incredibly interesting but I usually give up before you get to the point. Also remember that if the title doesnt match the content people will switch off. Thanks, Bob Williamson
This is really helpful. I'm surprised the Oxygen columns element isn't as robust as the flexbox version. One thing about grid is that it's still not 100% supported by browsers. But it's almost there.
About the laggy. I think it is oxy issue it happens after working on a template for a while. Simply save and refresh, the laggy will be gone. 🤔 seems to be worked on my end. Could be the step history causing too much resources taken?
Please buy Oxymade and do some videos, I'm trying to copy this using Oxymade and it's not working the same :( these are really fantastic videos and If I were doing this full-time I'd subscribe the club.
Thanks again! And do you know, please, why isn't possible to apply oxy class to a section but you have to have another div inside? Thanks! Note: the minimum width of child elements in oxy grid element is again one of that things, when oxygen has set something default behind.
Ninja classes can’t target the default inner-wrap that’s inside oxygen sections. However there aren’t too many use cases where you would want grid classes on sections
It must be OxyExtras. I have a hard time keeping up with what plugin adds what functionality after a while because I just install everything from a blueprint and rock and roll.
It took over 8 minutes until you finally got to the first weak point, which isn't really a bug, but more of an inconvenience. That's really a waste of time. The beauty of Oxygen is that you have options. Columns, grid, whatever - I don't think there are clear rights or wrongs. Choose what suits you best.
The bug in the video is a definite bug, not just a weak point. When you remove stuff, the columns module breaks completely sometimes and can't be fixed. But overall, using Flexbox to create columnized layouts is full of weak points where Grid isn't. IMO, the weak point of needing padding or margin hacks to create spacing with flex columns is a deal-breaker, but to each their own. That's why I make the tutorials --- so people can see what their options are and choose accordingly :)
Oxyninja is a good solution, but I have free the same CSS code with auto-fit cards. Maybe I buy oxyninja if you show how his help in woocommerce projects
I use this code .card-grid { display: grid; grid-gap: 1em; /*i use 16px defalut font size*/ grid-template-columns: repeat(auto-fit, minmax(273px, 1fr)); } and I have 2 rows with 3 columns for 1136px width and fully responsive I use one class when in your video you use 2 classes with (I don't know with many codes) additional need class for stretch cards
BREAKING NEWS: Mothers protest across the country, blaming Digital Ambition's release of new video on Mother's Day. Many are feeling abandoned by their children who chose to learn about columns and grids rather than celebrate the holiday. One such person (who wished to remain anonymous) said that by practicing the techniques taught in this video, he would be able to spend much more time with his mother throughout the year, and that soon mothers everywhere would benefit.
@@Gearyco ok haha you could’ve said thank you... just a small criticism what you noticed yourself. You say multiple times yourself your babbling to much 😂
Man, wish there was a "Love" button because "Like" just doesn't cut it for this video. Just sayin' is all. Thank you for this! Oh, and yes, please do an in-depth video for OxyNinja utility classes!
Honestly I am so glad you are giving us this many personal pro tips for free. A solid workflow like yours really help us and the oxy community to grow healthily. 🙌
To add spacing to flexbox items you give them padding and give negative margin to the container, it works very well.
I preffer to use grid wherever I can but sometimes you have to use flexbox.
At this point I just use gap when I need to use flexbox.
@@Gearyco I initially used flexbox gap until clients who had iPhones started to complain that the layout looks wrong...
Always problems with iOS...
Thanks so much for this, I'm new to Oxy and have been wresting with the column tool so much! This blew my mind.
Another great video Kevin! :) Keep 'm coming!!
I love your tutorials!! Thanks for sharing your awesome tips!!!
Very very very gooooood, thank you very much Kevin. I wait for you to make a "very full" and "very soon" Oxininja tutorials, and I promis I will use your affiliate link to buy it 😎!
OxyNinja Grid Tutorial lands tomorrow!
Very Nice Tutorial..........Your videos are helping me to use oxygen in a better way..........:-)
Thanks for such a fantastic tutorial and look at everything. Anyone every noticed that it says "Click Add+" yet the button is "+ Add"? ;-)
Thanks for this great tutorial. I purchasing the core framework via your affiliate link for the support.
Appreciate it, Lyle!
Another useful/practical tuts. Thank you!
Great stuff, thank you. Just so you know the sound goes mono two thirds of the way through
I cut it and forgot to apply the same sound settings to the 2nd half :/
thats great thanks. But If I only wanted 2 columns to show regardless of size, even on small. How can I ensure it fits.. logic suggests there should be an option where the system identifies that it needs to make the next smaller in the columns in order to always display the 2 columns, so they adapt to the situation.. I have no idea how to do that though, so I guess im left with trying to make the columns small enough so they will show on small by default
No idea. Would have to see an example of what you mean
is it possible to reverse the layout for mobile responsiveness? So let's say you make a two column layout using Grid and you place your image on the right, On mobile view the image ends up on the bottom. Is there a way to make it so that image placed on the right side can end up on top in the responsive views?
Yes. You can just use the "order" property on a child div inside the grid to put it's order anywhere. So you can move the 2nd child to the first position in a 2-column grid. Or vice versa. Or move column 3 to column 1. It's very flexible.
oxyninja.com/help/reorder-columns/
@@Gearyco Thank you for you tutorials ! I am a real fan. Could you let me know how to use this order property ? I got rid of my columns but I struggle with the layout for mobile responsiveness... Thanks a lot !
@@freedivinglapalma795 So we need oxyninja to ensure the layout for mobile responsiveness ? I wanted to achieve that with OB...
@@anne-camillemonet6467 No, you don't. But I'm a hobbyist/beginner fiddeling round with my own site. So I think there are other people with way more knowledge and experience to answer the question better. Maybe head over to the official oxygen FB Group and ask there. Either you can achieve this with the controls within Oxygen (never tried) or some custom CSS.
My divs and columns don't have any outline. How do you make yours show up? It's so frustrating trying to guess the size
Not sure what you mean. 🤷♂️
Great. Maybe in Oxygen Grid you could also use the Min & Max values for columns... ;)
Grid is super powerful.
will be another magic here i guess ... reminder set!
Cant wait for your real tutorial on this without the unnecessary chatter
Good teaching means explaining context :)
You are right about context but there is a balance. You need to decide what you want to say and get right to it. Only trying to be constructive here. You obviously know your subject.
@@bobwilliamso180 which part was unnecessary? I need an example so I know what type of stuff to cut out.
If you look at the tutorial you will see that you are missing the first part which should be " what are we going to do" with visual examples. That should take about 20 seconds. Then get down to " how you will do it". Then you can add some but not too much context. Then you can get down to the meat of the tutorial. I watch many tutorials on oxyen builder and yours seem incredibly interesting but I usually give up before you get to the point.
Also remember that if the title doesnt match the content people will switch off.
Thanks,
Bob Williamson
great. i was sure, i am blind or stupid, seeing columns changing their with on their own :D
This is really helpful. I'm surprised the Oxygen columns element isn't as robust as the flexbox version. One thing about grid is that it's still not 100% supported by browsers. But it's almost there.
It has plenty of support and is in widespread use.
Looking forward to this
I totally agree with the columns issue in Oxygen, but am using Oxy made, rather than Ninja
Did I see you somehow quickly remove settings from an element in the advanced tab? some kind of shortcut? or magic? or video editing?
What part of the video was it?
@@Gearyco Here ruclips.net/video/kSuLN0e4BF8/видео.html
I'm guessing that the Grid technique (without OxyNinja) doesn't work if your columns need to be different widths?
Watch my other video on grid utility classes. You can definitely have different width columns.
@@Gearyco Does that not require Oxyninja though?
Waiting for that OxyNinja utility classes tut!
About the laggy. I think it is oxy issue it happens after working on a template for a while. Simply save and refresh, the laggy will be gone. 🤔 seems to be worked on my end. Could be the step history causing too much resources taken?
When I record my entire screen it doesn’t happen. When I try to record only part of my screen it happens. Seems to be a camtasia issue.
Please buy Oxymade and do some videos, I'm trying to copy this using Oxymade and it's not working the same :( these are really fantastic videos and If I were doing this full-time I'd subscribe the club.
I’m creating my own class system
Another great tutorial! Thanks a lot! A question: is a good practice to use grid in a 3 cols footer for example?
Sure!
Another question Kevin, how do you copy your card and past it elsewhere? Thank you (I'm a new oxy user...)
Hydrogen Pack
Notification is set!
Great video 👍🏻
Thanks again! And do you know, please, why isn't possible to apply oxy class to a section but you have to have another div inside? Thanks! Note: the minimum width of child elements in oxy grid element is again one of that things, when oxygen has set something default behind.
Ninja classes can’t target the default inner-wrap that’s inside oxygen sections. However there aren’t too many use cases where you would want grid classes on sections
I am missing something? How do you copy and paste the cards? 14:54
Hydrogen Pack. If you don't have Hydrogen pack you'll have to duplicate the card and then drag it from one area to another in the structure panel.
@@Gearyco Ah ok, i thought it was something native to Oxygen Builder.
@@Xenio2007 Wish it was!
dude you rock! do you use swiss army knife ? or oxy extra is it to copy
It must be OxyExtras. I have a hard time keeping up with what plugin adds what functionality after a while because I just install everything from a blueprint and rock and roll.
Dang your videos are useful!
I try! Don't want to make typical nonsense tutorials --- always something practical that helps people do things better/faster/easier/etc.
It took over 8 minutes until you finally got to the first weak point, which isn't really a bug, but more of an inconvenience. That's really a waste of time.
The beauty of Oxygen is that you have options. Columns, grid, whatever - I don't think there are clear rights or wrongs. Choose what suits you best.
The bug in the video is a definite bug, not just a weak point. When you remove stuff, the columns module breaks completely sometimes and can't be fixed. But overall, using Flexbox to create columnized layouts is full of weak points where Grid isn't. IMO, the weak point of needing padding or margin hacks to create spacing with flex columns is a deal-breaker, but to each their own. That's why I make the tutorials --- so people can see what their options are and choose accordingly :)
no sound at 18 min
It switches to left channel only. Sorry about that. Listen through stereo and you’ll hear it.
Oxyninja is a good solution, but I have free the same CSS code with auto-fit cards. Maybe I buy oxyninja if you show how his help in woocommerce projects
I use this code
.card-grid {
display: grid;
grid-gap: 1em; /*i use 16px defalut font size*/
grid-template-columns: repeat(auto-fit, minmax(273px, 1fr));
}
and I have 2 rows with 3 columns for 1136px width and fully responsive
I use one class when in your video you use 2 classes with (I don't know with many codes)
additional need class for stretch cards
for any designs will be changing a little bit code with minsize from 273px to 250 or any
BREAKING NEWS: Mothers protest across the country, blaming Digital Ambition's release of new video on Mother's Day. Many are feeling abandoned by their children who chose to learn about columns and grids rather than celebrate the holiday. One such person (who wished to remain anonymous) said that by practicing the techniques taught in this video, he would be able to spend much more time with his mother throughout the year, and that soon mothers everywhere would benefit.
It's a travesty, but it's for the greater good.
The content of the tutorial is briljant but omg you talk a lot on repeat. Tutorials can be 10 minutes 😂 but thanks!
People can fast forward or play at faster speed if they want. I add as much teaching and context as possible for those who want it. It’s free, so…
@@Gearyco ok haha you could’ve said thank you... just a small criticism what you noticed yourself. You say multiple times yourself your babbling to much 😂
@@bertusdeleeuw thank you! Don’t know what I’d do without you.
elementor is so much better....... idk why they made oxygen so damn different.
It’s not better in terms of DOM structure though. Elementor is terrible in that capacity.