First, it looks like a width was hard-coded. And generally, I'm not going to beat you up if you occasionally reference a style tag for something very specific. However, this approach very much breaks down in situations like this. Well, yeah, on desktop, maybe a width of 150 pixels is fine. But on mobile, I kind of just want it to take up the full room. So I would want to remove that entirely. OK, I think that's our step one. So I'm going to go to my Skills page. So you'll see right here for each of these sections.

So I'm going to go to my Skills page. So you'll see right here for each of these sections. So each one of these represents one of these, one of these, and one of these. OK. So yeah, you can see at some point I hard-coded a width. I do not want that anymore. So I'm going to remove it. And instead, for situations like this where you can't use a predefined width value that Tailwind will provide, this is when you defer to a traditional class. So we might say Home Skills section.

Tailwind will provide, this is when you defer to a traditional class. So we might say HomeSkills section. So this has an ID of HomeSkills. So I'm just going to follow that convention. This is each section. And I will apply it here. That way, I can then use breakpoints to specify the width. So let's go to my home.sass file. And you can see a couple of things here, like where I'm applying a custom background image and adjusting it a little bit if we are on super widescreen devices.

So if you're using something like Tailwind, two choices. You can't, real quick, you can't do things like this, Apply, Medium, Tailwind width is 32. That's not going to work. And in fact, if I try to compile that down, it should blow up. And it does. So instead, yeah, you have two choices. One, you could wrap it within a media query and hardcode it, something like that. You could do that. And I'm getting this value 576 from my Tailwind file.

You could do that. And I'm getting this value 576 from my Tailwind file. So if we look for that, that is the small screen size. But you might be thinking, well, that defeats the purpose if I have to hardcode this everywhere. So and I would agree. So instead, there is a helper you can use. There is a screen directive, I guess you'd call it. And we'll say for a medium screen width, then apply a width of 150 pixels. Anyways, that's definitely a good one to know. So keep that in mind.

At the medium breakpoint, no margin bottom. But also, I can see that it's not perfectly centered. We have all this extra room over here versus over here. So usually, this is going to be either some extra padding you've applied, some extra margin right you've applied, or in this case, it might even be a width that we've applied. So let's take a look. Bring this up. And let's see, skill card. So I'm going to scroll down. Yeah, so we can see, once again, we've hardcoded a width of 250 pixels there.

So I'm going to scroll down. Yeah, so we can see, once again, we've hardcoded a width of 250 pixels there. So I bet if I remove that, it will expand to take up all of the available space. So again, we have to decide, on mobile devices, do we want this to stretch for the full width? Or if you want to limit it to 200, because I do think it looks better like that, well, then maybe we just need to make sure that we center all of the items. So let's take a look. I'm going to go to my computed tab. All right, that looks okay. So why don't we, let's just try setting the margin for the left and right to auto.

All right, that looks okay. So why don't we, let's just try setting the margin for the left and right to auto. There we go. And we can see that's now perfectly centered for mobile users, as you see there. So again, it sounds like we would have to say margin auto, but then maybe at a medium breakpoint, you can zero that out or update it to whatever it needs to be. And if it ever gets too complex, again, this is where you would default back to a traditional class, like in your CSS file. Because here we can see, all right, we want margin-bottom six, but at a medium breakpoint, margin-bottom zero.