Add These Max-Width Utility Classes to Every Oxygen Site!
Vložit
- čas přidán 8. 06. 2021
- Steal these max-width utility classes and use them on every Oxygen website!
With one class you can responsively control the width of elements and even create effective padding (without using padding) with a single class.
It's the fastest, easiest, and most future-proof way to sculpt your page content.
While this is super quick and useful for single developer builds, you get the added benefit of consistency when building with teams. Instead of everyone using their own technique or their own random sizes, these utility classes will ensure everyone is using the same sizing methods, same widths, and same units (e.g. rem vs px).
Copy the classes here: digitalambition.co/watch/add-...
Cheers! - Jak na to + styl
![[Newbie Guide] Responsive Design Crash Course For Oxygen](http://i.ytimg.com/vi/gCFzYM4aTwg/mqdefault.jpg)
You can grab the utility classes here: digitalambition.co/watch/add-these-max-width-utility-classes-to-every-oxygen-site/
Another awesome tut. What is the best way to add these classes? Via a stylesheet or individually add each class?
@@YasienSarlie stylesheet
I added the classes you have listed to a stylesheet called 'Base-Settings', however, they don't appear as options when I attempt to add them to a element. Still getting familiar with using these utility classes(which are f'n awesome), but not sure if I missed something.
@@ocbroadband They won't show up until you've used them at least once.
Any reason why after adding them to the style sheet and applying a class, they would not do anything? In inspect, I can see the the css is there, and I can see the correct and correctly spelled class, with an EMPTY BRACKET! Btw, thanks for the amazing tuts!!
This is a real gem. Thank you!
Wow this is the bomb! I was really struggling with making a site I created responsive on my latest build, this will help a lot. Thanks!
Again, a very good video. Thank you, Kevin.
Loving these tips on setting up and how to improve workflow - these are perfect for those coming from non-developer backgrounds.
Love this. Thank you very much.
Thanks for another Beautiful Tutorial to manage max-width.
You're welcome 😊
Excellent training Kevin! I really like your tutorial style.
I appreciate that!
Literally every video, makes me a better developer. Thank you.
That's my goal :)
Cool and thanks for another brick in the wall I will use on every Oxygen (and other) site I build, thank you!
Glad to help!
You are good man.. love you content all the time.
I just love all your content and the passion you have for sharing your knowledge. It always makes me excited every time you post something new because I know it will be another yet great learning again for me.
Still saving resources to be able to join and support your newly launched premium community, soon!
Thank you!
Would love to have you!
Thank you! Love it :D
Simple but awesome! :) Genius!
Super video Kevin 👌🏻
Interesting topic 👍
Excellent.
Thank you so much!
Another great tutorial. This will save what little hair I have left. 😉
Looking forward to learn something new 💪🏻
Did you?
@@Gearyco I must say yesss. I will try it in a new project soon. Could you upload it on circle?? Pleaseee 😋 we are waiting for the Main template tutorial 💪🏻
@@flyingwebsolutions8208 It's in Circle :) Main template coming soon.
THIS IS THE MISSING PIECE!!!! I was thinking about doing something similar, but creating utility classes that represent a 12 column layout.
And combining it with clamp so it's automatically responsive.
There's one more missing piece. #NextVideo #StayTuned
Thanks so much! Responsive with the hover icons and placement of buttons sort of the same is something I was trying to figure out with Oxygen. Super easy to do on Elementor but that's like loading up a commodore lol.
Hi! Thank you for your tutorial 💣 Where I can find the code? The link in description doesn't work, also in the other videos.
Thanks! Will implement.
Sure would be cool if oxyninja could let you add classes to its quiver, so you wouldn't need to copy-paste these for each build
I have a blueprint that I just spin up for every site with all plugins, settings, stylesheets, global settings, etc. all ready to go.
@@Gearyco Love your vids man! I followed your video about adding clamp it caused some issues with oxyninja, do suggest using clamp with oxyninja?
@@robbie653 There's no compatibility issues with clamp and OxyNinja. In fact, OxyNinja is starting to use clamp for certain things. What conflict are you seeing?
@@Gearyco I don't have the staging site now to look at, but I was testing some older versions of iPhones on browserstack and it caused some layout issues, when clamp was removed it fixed it. That's good to know though, cheers.
Thank you for great work. Stupid question; how do you pre-install these Max with utility classes? Global styles? Where should the code you have written go?
Stylesheet
You're a fucking god man, bless you, Greetings from Chile King
Do you just maintain the one stylesheet via Oxygen for any additional CSS that you use? If you have a few different sections of CSS, is it all added in the same one? Thanks for some great content.
Yes, one sheet primarily, using comments to organize it.
@@Gearyco - Thanks, I knew of comments as 'comments' but didn't think to utilise them for organisation also. I'll have a play with that.
Hi, thanks for this guide! When I'm trying to use max width utilities with oxyninja core. While creating an alternate image/ text section, when I set the c-col-l1, the image stays on top while the text is below but at max width 480, so it looks pretty small. What would be the best way to fix this? I would ideally want the text to be the same size as the top image on tabs.
I would have to be able to see a link
Thank you for great tutorials and great work.
I am sorry, but i simply don't get it: i can see from your video and response to other peoples questions, that you will have to apply the max with utility at least once before you can use the class. But how do i do that?
After i have made a global stylesheet with your code, I have tried via Custom CSS on the element, writing the code manually on the element etc., pretty much everything, but i just can't seem to apply this 'first-timer' so it works.
Can i please ask advice on that?
You just write the class in the class box to apply it to an element
@@Gearyco Thank you. Worked like a charm.
Hey man, thank you so much for this.
But I've failed to do this.
I've set up the classes but it the end result is nothing like yours.
I've set up the classes manually in the left side of the builder and added the names, and while I do see some differences, my site just looks strange and not the same as yours.
On your site, you write "NOTE: To use REM units effectively, you'll want to make sure you reset your root font-size to 62.5%." do you mean global font size or something?
Add html {font-size: 62.5%} to your stylesheet.
can you make a video how to make a responsive video perfectly with oxygen? I'm really struggling with it.
Sorry not responsive video. I meant a video how to make a responsive mega menu perfectly. I worked on several videos and it looked great but everytime the responsiveness had bugs. It never worked 100% with the single templates. For example I really love the oxygen builder mega menu and escpecially the mobile menu.
Are these classes still available? I've followed the link but cant locate them anywhere.
Only in ACSS now. Or you can make them yourself.
Amazing. Can’t find the max width codes / files on your link
They’re all in the inner circle now. It’s been that way for a while. This is an old video. These utility classes are also part of ACSS.
@@Gearyco I guess that’s what all the hard work in the videos is for oh well thanks anyways
I just added the stylesheet with the utility classes to Oxygen Builder but I am not get the suggested classes when I just enter max, am I missing something?
Edit: It need to be assigned first to get back in the suggested classes.
Yep, it won’t suggest them until you have used them at least once.
Can you please tell me how to add those css as different classes to Oxygen. I tried different ways but coudn't. Added a new selector and copy the code to custom css. But I cannot apply that selector. It didn't suggest. When I refresh the builder that selector doesn't even show
Add the code to your stylesheet. Then add each one to the selector box one time. After you've used the selector once it'll start showing up in the dropdown.
Do you know if oxyninja core has max width classes?
It doesn't, that's why I added my own.
So I am using svgs and for some reason when I add the max-w-640 to the text or the div that contains the text it automatically shrinks the svg, any thoughts on why this could be? I am also using the cards absolute/relative trick you taught from the card video.
Need a link
@@Gearyco same one I sent you on the inner circle, sorry, this is my first time using svg's giving me a hard time.
@@Gearyco I got it now! Thanks!
If padding used with clamp function then it will be responsive, right? So what's the benefit of max-width over clamp padding?
I’m not sure I completely understand the question. They are used for different things.
@@Gearyco In this video you used padding with px units but if we used it with clamp function & rem unit then it will be responsive, right?
So when to use padding & when to use max-width?
It seems I am too stupid to add the classes. I added them to the stylesheets as pre-made, but they don't appear.
They won't appear in the dropdown list until you've used them at least once or added them to the selectors list manually.
Ok, I did something wrong or I am missing something. I added a new stylesheet and added the classes but when I type "max" to get to the utility classes they don't show up. This is Oxygen 3.8 and I do have OxyNinja installed. What did I miss :)?
The classes won’t appear in the drop down until you’ve used them at least once. So you’ll want to fully write them out the first time.
@@Gearyco If I understand you correctly, you are saying I can't just add them to the style sheet and they will be accessable, but I have to type the full class name at least once to see them after that?
I tried what you said - applying the class once to something and it does now appear in the list. Ok, if that is true, how can I use the OxyNinja utility classes without having typed their full class names at least once? How do they get them all accessable - through the plugin I guess? So maybe there is a way to programmatically add these styles to the searchable list?
Time to learn how their plugin does it. If you know please share. I know how to write php scripts and plugins :P
@@jmcbade2960 you can also add them via the selectors list. That’s how the plug-in does it, I believe.
@@Gearyco Yeah. But unless we do it programmatically, we would need to do it once in our "base site install" and then clone it for each new site build right? Otherwise we would need to add them manually each time?
Edit: Yeah that seems to be to easiest way. I have building up my "baseline install with plugins and settings" and this seems to be something to be part of that image.
Once again, Kevin. BriliiantII
why not to use min function? your code:
selector {
width: 100%;
max-width: 30rem;
}
to change on:
selector {
width: min(30em, 100%);
}
this is absolutly identicly, but small code
min() has far less browser support. You’d need a fallback.
@@Gearyco 93% is bad support? I think you use opera mini an ie for web serfing
@@Atractiondj safari is pretty important. Only the most recent versions support min max clamp. People on older devices won’t see the site properly. And for what? The min version provides zero additional benefit.