Small Elements Solution

[00:00:00]
>> So let's go through my answer for this. So what I did was I found first in the HTML, we gotta find those links. So the order now link is around line 69. And it actually, that one has a clot, whoops, I'm looking at the wrong thing, that's right.

[00:00:18]
Around line 72, there's a link to the magenta line official store. So here, I am going to give this a class of button-primary. Okay? And there it is, okay? Not perfect, but close. And then we can do the same thing with photos from the road. Let's give that a class too, class="button-primary.

[00:00:54]
Okay. Fantastic. So that gives us our starting buttons. Now what we need to do, we don't wanna change the styles with the button primary because, of course, we're already using it. We're using it for get tickets in order now, and it works great there, right? So what might be our approach when we're really close here for these buttons, but they definitely need a little bit more tweaking?

[00:01:19]
What could we do instead?
>> Add a secondary class.
>> We could add a second class, all right? So here I could add a class, let's call it button-fullwidth because it's a fullwidth button. [LAUGH] And you know I'm super creative that way. So here, you can have as many classes as you want in your CSS.

[00:01:45]
If you haven't seen this before or maybe you have cuz you're a tailwind person. You just put class so you just stack up the class names, separate them by spaces. So button-fullwidth. Okay, and absolutely nothing will change on the page because you haven't styled anything yet. But now we can add some styling to that.

[00:02:10]
So I am going to copy my style. I had it placed here in my answer pen, I had this placed in the base style. You could put it wherever it seems to make sense for you. So I'm just gonna drop it here inside of base. Wherever it is that makes sense and you can find it again later.

[00:02:33]
And so I'll style my button full width this way. So, here's what I did. I set it to display block and that will make it stretch as wide as its container, right?
>> Is button-primary defined after button-fullwidth?
>> There you go.
>> That's probably what I did, thank you.

[00:03:00]
Yeah, I don't know where button-primary is. Where did you guys find it here in all these styles? [INAUDIBLE]
>> It was album? Okay, so I'm gonna move my button-primary from where it is Here, in album, I'm gonna move it up to bass because that makes more sense to me at this moment with this design cuz now I'm using it in a lot of places.

[00:03:23]
So now I move my style and now it's gonna work. Thank you, guys. There we go. So now it looks ridiculous, right? It stretches all the way across everything here. And the first one works and the second one doesn't. So did I apply my class to the second one?

[00:03:46]
I did not. Button primary, button-fullwidth. There we go.
>> Can I ask?
>> Yeah.
>> What is the benefit of adding a secondary class as opposed to just creating a different class for the buttons that you want to be different?
>> Great question, why would we create a second class rather than just making a brand new class with all of this styling associated with it?

[00:04:16]
Maybe you have an opinion on that.
>> I think it saves you having to copy all of the styling of the first class-
>> Right.
>> Into the second one.
>> Yeah, we don't have to copy all the styles from our first style here, right?
>> If you have classes that are mostly the same like this.

[00:04:33]
>> Right? And we can also do things like, say, a bunch of stuff that changed in here. But we could do things like, say, we no longer want our buttons to be magenta anymore, we're now all about the lime, right? So we change it once here, and then it changes everywhere here on the site, right, rather than having to go find all the other classes and change it in a bunch of places.

[00:05:00]
So some of it is a matter of preference, some of it is a matter of efficiency, you'll find your style, yeah. Yeah, okay great. Okay, so over here in my answer pen, it is working correctly and I'm not gonna take the time to figure out and debug exactly why I don't have it working there but here it is.

[00:05:26]
Here's the full width that's here inside of my answer pen. And you can see here that we have photos from the road. It's as wide as its container. And the same is true later on down here in the document as well.