0:00:00
So let’s say you want to change the effective width of an element in oxygen. Maybe it’s a paragraph. Maybe it’s an image. Maybe it’s a wrapper, this full of content. Well, like all things in web development, there’s a bunch of different ways you can try to accomplish this. And they all seem to have their pros and cons. And then there’s like speed that we’re trying to worry about as well. What I’m going to show you in this tutorial is that in almost all cases, Max Width is the best method and the best practice. Max Width is number one, it’s faster. It’s literally one setting. And second, it’s automatically responsive. Now if you assign these Max Width properties to what are called utility classes, which is a class with the Max Width setting applied, and typically I set the width to 100%, you get some added benefits.
0:00:48
So one benefit is that instead of setting Max Width inside of a box, you literally just apply the class to an element and you move on with your life. The second really big benefit, especially if you’re working in teams is consistency. So you get consistent widths being used across the board. You make sure that everybody is using Max Width, first of all, and nobody’s putting in just generic widths or random widths that they’re trying to use. So I’m going to show you how these Max Width utility classes work. I’m going to give you the codes. You can copy and paste it. I would recommend copying and pasting this into every single oxygen site that you build. I think you’re going to learn some other neat tips and tricks along the way throughout this tutorial. So let’s go ahead and hop into it. What’s up everybody? Welcome back to another tutorial.
0:01:35
This one should be fairly simple, straightforward, and quick. We’re talking about Max Width utility classes. Mainly I use these. First of all, I install these on every single website. I highly recommend that you do as well. I’m going to give you the codes so you can copy and paste it. I use these to shape sculpt control content throughout sections. If you can see here, and to do that, by the way, with a method, it’s automatically responsive. Because some of the other ways that people might go about trying to control content would not be responsive or to make them responsive would require a lot of additional work. And really, there’s no reason to. You just pop on these Max Width utility classes and you move on with your day. So I’ve got a few sections of content here. So we can see this one has the problem of having a long single line of text, which, remember, I’m using sections.
0:02:28
And sections are going to naturally be the width of whatever you have in your, let’s go to settings here and your global styles. So this right here, width and break points, 1280 is what I have my, basically my containers set to, my sections. So this uses Max Width. So the max width of these containers is 1280 pixels. So if I put in some text and it’s not long enough, it’s not longer than 1280 pixels minus that little bit of padding that I have in here, it’s just going to be one line. And one line just looks absolutely terrible. Never do this. So you want to make this line break to two lines. You can see here where we have this really nice, like, parallax section, but we need to align this content better in a way that’s more visually appealing. We also need to control it’s width because it’s way too wide for the amount of content that’s in there.
0:03:20
We have this down here, like this image is going full width, this is out of control, and this text is way too big as well, like way too wide for the amount of text that’s there. So I would recommend controlling and taming this. And then we have this section over here, which says, is Max Width better than padding? Because yes, we can actually use Max Width where padding would work very well. We can actually use Max Width probably just in an easier fashion, a more scalable fashion so that we don’t have any responsive issues to worry about. So let’s go ahead and just start sculpting these sections using these Max Width utility classes. And I’m going to show you kind of the bad way as well, like the way that people might try to approach this stuff. I’ll show you what’s up with that. So here’s that single line of text. Sorry, I’m getting a text message. Just want to make sure it’s nothing crazy.
0:04:12
OK, so I’m going to click this text and like a beginner I think would come in and be like, why need this to be on two lines? So I’m going to put in a line break here. And they would put in a physical line break. And that to them looks good. That’s the way they wanted to look. The problem is you go to mobile and that line break is still there. And now it’s not where you wanted it to be. And there’s no way to fix that. So that’s a no-no. Never do that. The next thing that they might do is say, oh, well, if I just add padding to the sides of this thing, it’s going to squish it in. And then it’s going to look great. So we go to size and spacing.
0:04:46
And we’ll just do like 250 pixels, not M’s for sure, not M’s. 250 pixels on the left. And then we do 250 pixels on the right. And it looks the way we want it to look. The problem is you check out mobile and you’re screwed. So we don’t want to do that either. We definitely don’t want to now do all the extra work of trying to change that with at break points. No, no, no, no. There’s a much easier way to do all of this stuff. So I’m going to clear that size and spacing out. And let’s see if oxygen will actually do it. There we go. I’m just going to pop on a max with utility class. So again, I have all of these pre-installed on every website that I build.
0:05:27
I’m going to give them to you to copy paste. And I’m going to choose max with 640. The numbers represent the actual number of pixels that I want. And I actually have these set in rim units instead of pixels. So I know the outcome is going to be 640 pixels, but it’s actually set using 64 rim so that everything I’m doing is not just responsive, but also compatible with accessibility standards. So I’m going to put in max with 640. And there you see I automatically have exactly what I’m looking for. And if I check the responsiveness of it, it’s perfect. There’s no crazy little line breaks in there where they’re not supposed to be. And then there’s no padding to worry about. So that’s fixed. We fixed the single line of text. Now I’m going to move down. We’ve got this amazing parallax section here that’s looking great, but the content that we put inside it is not looking great.
0:06:16
So it says here, hey, to make this section look better, put me at the bottom and make me narrower. So just from a design standpoint. So we have this content in a wrapper. So the first thing I’m going to do is I’m going to grab the whole section here. And I’m just going to use Flexbox. We’re going to go to Layout Display Flex. I want this in a column format top to bottom. We’re going to go Flex Start, which is the default here. And then for justify content, I’m going to choose Flex End, which is going to put that all that content because it’s in that wrapper at the bottom of the section. Then what I’m going to do is make it narrower. Well, how do we make it narrow? I mean, you can do like the amateur hour thing of going to size and spacing and saying, oh, well, I want like 500 pixels of padding over there.
0:07:01
And yeah, that’s going to look fantastic, right? So we go down and we check that out. And again, you’re screwed because that’s not really a good use case for padding. So I’m going to take that away. And I’m just going to say, hey, why don’t we just use a Max with utility class? So I’m going to do Max with and I’m going to choose 640 again. So now we’ve put me at the bottom and make me narrower. Actually, I think we can go narrower than that. So this allows you to just take off that 640 class and go to the 480 class. So now we look much better. Like we’re contained there. We have white space. Now watch this trick. See how this button says, widen me bro. Well, how would you widen this button?
0:07:40
Would you give it a width? And then would you try to control it at different break points? What would you do? Well, it’s very easy. Just pop on one of your Max with utility classes. I want that to be 320. Boom, we’re widened, right? So now we just one class. We have a wider button. So now I can move down and it says tame this content because obviously this image is like, it’s just way too big. And then we need to tame this. We’re just trying to add some white space into this container in general around all of this content. So I’m going to select the image and I’m going to go up and I’m going to put a Max width of 960.
0:08:13
And then I’m going to come down here and I want this to be smaller than the image. Obviously, this does not look good where the image is this size, this width, and then the text is outside of it. So that was set at 960. So why don’t I just pop on a 720 here? And now suddenly you see I have a nice sculpted content section here. And it’s all perfectly responsive. So if I go down, it all still looks good on mobile devices at every size. We’re good to go. All right, let’s take a look at this last section. So it says it’s Max with better than padding. So I actually have these in a grid. So we have a two column grid and we have this set to break to one column on medium devices. So if I go look at the medium device size, we have one column. All right, so all that looks good.
0:09:06
And then on the large device size, it looks like that. Obviously, we need a gap. So here’s the thing. Like I can use gap on this wrapper. I’ll show you right now. So if I do gap L to have more white space. Like first of all, I have a gap between them and just more white space overall. Now notice that these things are in a wrapper. So the first thing I want to do is actually position this to the center to make this look better. So you know how I’ve grid applied to this container. You can use Flexbox in combination with grid. I don’t want to get too advanced here, but I’m going to grab this whole wrapper right here. I’m going to set it to horizontal and then I’m going to set it to middle. And it’s going to move my content down to the middle.
0:09:50
So even though this is in a grid, I can still use Flexbox to position this content. But I want more white space. Now like in effect, what I want to do is have more of a gap without having more of a gap. And I’ll explain why. If I were to change this gap large to a different gap structure like gap XL or gap XXL, I effectively get the added white space that I’m looking for. The problem is on mobile, it’s still going to be an XL gap. So when I come down here, now my content is, if I can scroll down properly, my heading is much further away from the image than I might like it to be, right? Whereas if I had just gone with the gap L originally, I have, it’s much closer, which is what I’m looking for on mobile. But if I check this out on desktop, it’s not as much white space as I want. So what I’m going to do is have this like almost mobile first kind of design where I say, well, the gap is the way I want it on mobile. I want a large gap.
0:10:55
I want to make it look like there’s a bigger gap on desktop without changing the actual gap size. So what somebody might do is come in here and they might add padding. And if you add padding, we’ve already seen what can happen if you’re trying to use padding to accomplish this. So I’m just going to grab the wrapper and I’m going to use a max width class. So instead of using padding, we’re going to go for like, let’s see, max width 640 is actually, oh, there’s already a 480 on there. Okay. Okay. So yeah, because when I was playing around with this earlier, so max width 480 gets the job done. And then what I’m going to do is just move it away from this image more. And I can do that by selecting the wrapper and then going to size and spacing and going to auto and auto.
0:11:40
So now, because I’m using, and again, those auto margins are also automatically responsive. So they’re not going to create any problems on mobile devices, but on desktop, they are going to effectively center this div between that edge and this edge. And then there’s the gap applied as well. So if I look at this on the front end, we’ll go to the front and I come down. I have a lot of white space here, but that the real physical gap is only out to about here. And then my max width plus my auto margins added that extra bit of padding. And then on responsive, on mobile devices, you can see that my heading is still, you know, it’s not out of range of my image. Like there isn’t an extra large gap between the image and the headline. So I really got exactly what I was looking for. I use max width to do it instead of padding. So that’s a really good overview of how I use these max width utility classes to shape and sculpt content, control the width of different items while making sure that it’s always automatically responsive and doing it very, very quickly.
0:12:48
And there’s no second guessing. Like when I pop a max width utility class, I don’t have to go check any of the breakpoints. I know exactly like what I’m seeing on desktop, it’s going to look fine at all the breakpoints below because this is a technique again that is automatically responsive. You also saw how I used max width to widen certain content such as this button right here. So if you have any questions about these, drop a comment below for sure. I think I pretty much covered everything. There are definitely other use cases that these max width utility classes come in handy for. But these are just some quick, you know, relevant, practical examples. All right, hit the like, hit subscribe, share this stuff whenever somebody asks questions. And that’s it. Have a great day. Peace.
