- Read Tutorial
- Watch Guide Video
What I'd like to do is head into our application. Let's close out main.scss. Let's close out the terminal, and let's think about what we need to do. So what we need to do is open up our content component. I'm going to close out card.js and input.js, and keep content.js open.
We have this paragraph. We need to name it, and we need to say:
content.js
return ( <div className="card__content"> <p className="content"> Ladies and gentlemen, this is <b>{data.color}</b> Barber, your sportscaster, bringing you the last inning of the game between the Cleveland <b>{data.pluralNoun}</b> and the <b>{data.adjectiveOne}</b> Yankees. <b>{data.celebOne}</b> is pitching for the Yankees. Here's the pitch! It's a low <b>{data.adjectiveTwo}</b> ball that just cuts the inside of the <b>{data.nounOne}</b> for a strike. That makes the count <b>{data.numberOne}</b> strikes and <b>{data.numberTwo}</b> balls. Now here's the next pitch. The batter swings and connects. It's a long, high <b>{data.nounTwo}</b> out to <b>{data.adjectiveThree}</b> field. But <b>{data.celebTwo}</b> is coming up fast and has it for the second out. The next batter up is <b>{data.celebThree}</b>, the Cleveland <b>{data.adjectiveFour}</b>-stop. Here's the pitch... and it's hit... a short ground ball to third <b>{data.nounThree}</b>. <b>{data.celebFour}</b> scoops it up and throws it to first base for an out, and the game is over. And the Yankees move into second place in the <b>{data.adjectiveFive}</b> League! </p> </div> )
Now let's see if I remember correctly. What we want to do, we have card__inputs, and then we have card__generate. What I want to do is actually say card content. So in our content component, I want to say card__content.
With that set, let's close out content.js. Let's close card.js, and let's go to the bottom of our main.scss file, and in our card let's say:
main.scss
&__content {
width: 1100px;
height: 297px;
background-color: #F2F2F2;
}
Let's go ahead, and check it out in the browser. Notice there's no border-radius it's just a it's just a box like that. So let's check that out, hit generate, and you'll notice we now have that in there.
Now, the next thing we need to do is get this in the middle there. You'll see that our content component in here is contained within there. It's got some margin. 47px and to the top 50px. We need to head over to our code and say:
main.scss
&__content {
width: 1100px;
height: 297px;
background-color: #F2F2F2;
p {
padding: 50px 47px;
}
}
So 50 is the top and bottom, 47 the left and right. You'll see it even says:
So basically if we do this: padding: 50px;. It's going to say: "Okay, the padding for the left, right, bottom, and top is all 50," but we want to be as specific as we can. Let's go back to our app, and reload the page, hit generate, and you'll notice it doesn't work.
Let's try inspecting it and see why. We have our content, and what the problem is is that we're trying to do that with the paragraph. I thought we had built this within an enclosing div, but we didn't so technically we can't do this. This is already the paragraph.
So we want to say padding right here:
main.scss
&__content {
width: 1100px;
height: 297px;
background-color: #F2F2F2;
padding: 50px 47px;
}
Let's save that, and go to the application. Now you'll notice that it works, but it looks a little strange, and it's pushing things up.
What I'd like to do is go to our code, hit command + z a few times, and get that paragraph tag back in. Now what I want to do is head over to our content component, and let's just cut this all using command + x, then put a divin here, and paste that back in.
Now what I want to do is simply put this back a bit, and then put this className in our death here. OK.
Now with that, we can go to our app and we should get the effect we're looking for. Let's hit generate and you'll see it looks much better. It's not pushing this all the way up, and we still the padding because we now have the paragraph tag within a div.
Now we just need to apply the styles and then center it. Let's start by centering it. Let's go to our application. Let's close out content.js. Then in content, what we want to say is justify-self: center.
main.scss
&__content {
width: 1100px;
height: 297px;
background-color: #F2F2F2;
padding: 50px 47px;
justify-self: center;
}
Same thing we did with the button, but again we don't want to say justify-items on the whole card because we don't want that to apply to the input. Now you might think we're doing that right here. Remember justify-items is going to do it on the grid of that div. So it's going to apply it to the inputs, but not the input itself.
If we were to apply it to the input itself we would say justify-self: center, but we don't want to do that. What we need to do is scroll down and we have justify-self in the content, which means it should be centered. Let's check it out. You'll see it's centered now, which looks great.
Now it's just getting the text styles, and then we need to put the button down about halfway. You'll see that it's resting on top. We want to go about halfway. To get into these styles, all we need to do is head over to our code here, and in the paragraph, we just need to type out a few things. First thing we want to say is:
main.scss
&__content {
width: 1100px;
height: 297px;
background-color: #F2F2F2;
justify-self: center;
p {
padding: 50px 47px;
font-family: 'Montserrat';
font-size: 16px;
font-weight: 300;
}
}
I was going to put a line height, but I'm not going to now. OK. So that looks more like what we want. Now we should type in here and get some values. You'll see that it's working good.
Now we just need to push this down a bit, so let's go back to our code. We're going to push the button down over that content a bit. So there's a couple of ways we can do this. The way I was initially going to do it is by transforming this button down a bit, but you'll notice in our design that this is up a bit. It's about 84px.
What I want to do is transform this up a bit. Lets go into our content, and let's say:
main.scss
&__content {
width: 1100px;
height: 297px;
background-color: #F2F2F2;
justify-self: center;
transform: translateY(-25px);
You'll notice it's there, but it's over it. Pretty simple fix, if you remember how we did the background skew here. We have to use z-index. So we can say:
main.scss
&__content {
width: 1100px;
height: 297px;
background-color: #F2F2F2;
justify-self: center;
transform: translateY(-25px);
z-index: -1;
Now when we go back you'll see that it's missing, and that's because the z index card is likely not set. What I want to do is this. The first problem with transforming the content component instead of the button itself is we have to manually check the height of the button. Which is kind of a hassle.
If you're trying to do a feature like this in the future I want to show you a better way to do this. It's by simply doing it to the item you want to transform down halfway. So let's get rid of this transform, and let's just apply it to the button. All we have to say is:
main.scss
button:focus {
outline: none;
}
button {
justify-self: center;
transform: translateY(50%);
}
Then it will get the height that it is. We want to transform it down so say 50%, and it will put it down 50% of the y-axis. Now you'll see it rests right over it. That actually fixes the problem with the content being behind it.
Now let's put in the margin that we see here. You see that it says 84px. We need to do that. So let's go in here, let's go to our content, and let's say:
main.scss
&__content {
width: 1100px;
height: 297px;
background-color: #F2F2F2;
padding: 50px 47px;
justify-self: center;
margin-bottom: 84px;
Save that. Let's go to our app, and you'll see it's now 84px from the bottom, and it's closer next to our field. Everything really looks really great like our design here, except for there's a problem and that problem is our line height. You'll see that these are the same height is different here. These are way too close together.
So what we need to do is go into our application here, in the code, and say on the paragraph tag:
main.scss
&__content {
width: 1100px;
height: 297px;
background-color: #F2F2F2;
justify-self: center;
margin-bottom: 84px;
p {
line-height: 29px;
padding: 50px 47px;
font-family: 'Montserrat';
font-size: 16px;
font-weight: 300;
}
}
Now if we go to our app you'll see it kind of separates these and these line heights. Each of these lines have their own height of about 29px. So that looks really good. I like that. That's pretty much the rest of that app, except for there are a few things we could fix, and I'll go over them now.
The first thing we need to do is put in a default value for these, like a placeholder. You'll notice that in our design we go to the main screen. We have a placeholder in each one of these. So that's the first problem. Let's just comment these in our home.js.
In our home.js, let's just put some comments at the end of the file here. Let's say:
home.js
// things we need to fix // placeholder // gray and green number labels // content labels // generate btn space/card-height
We have these four problems we need to fix. We have the place holder the grain green number labels and then we have the Generate button space card height. I forgot to write down the content labels so let's put that comment in here and let's say content labels. This way we can kind of indicate which ones these are, so like 13 maps over to 13 here 11 matches to 11. You can see it better.
Let's go to our app, and for the most part, it's looking pretty complete. It works. If you type in Blue, it says it down here, but it's not it's not bolded. I thought it was, maybe it isn't chrome, but not in Firefox. Interesting. It's bolded in Chrome but not Firefox. Those are our issues.
Let's commit our code and then move on. Let's go in here, and let's say git status, git add ., and let's say git commit -m "styled content component". Let's move on.