All language subtitles for 14. Creating The Revolution Block Continued

There's still a couple last things to change so I don't want it pressed right up against this previous

section here.

So we'll come back down and where we have our styles set to a height of 100 m for this container.

Let's go ahead and we'll also add a margin top to this of twelve m and we'll save that.

And that should be consistent with the margins that we had had between these guys and you'll see that

we now have a nice little gap below that looks really great.

And we still have one last thing the title to take care of.

And we know that we've set that to the H three typography variant.

But let's go over to our theme.

J.S. and actually add the h three style.

Now you probably had seen this in a previous video site actually set it up before and forgot to remove

it.

So if you'd seen any styles in the theme that we hadn't used yet I apologize for not clearing that out

beforehand but if you didn't notice you don't have to worry because we'll add the style now of h three

and we'll open this up make sure you get the comma afterwards and set your font family to Pacific Ho

and then font size 2.5 rem and a color of ARC blue and we can save this see the page refresh.

And now we've got a very nice title looking exactly like the design file the only thing that could make

it look a little more like the design is if we had a little bit more space in between these two items

here.

So let's close out of our theme and on our typography component for the revolution after the variant

of H 3 let's add a gutter bottom prop to this and we'll just leave that how it is to set that to true

and it will save this to create a bit of a margin under the bottom of that typography component and

you can now see there is a bit of a gap underneath the revolution and I think that that actually looks

exactly like the design file.

This looks really great and the card made it really easy to create this floating section look that was

exactly what I was going for.

And now let's look at how this reads sizes so we can apply any responsive styles that we need.

And so what's bring it up you can see it the large style this size is very nicely and still looks perfect

for the screen size.

It is adapted just how you would want it to.

But if we start scrolling all the way down we keep shrinking and shrinking and you'll see now the re

sizes are content inside of the card and that's actually because of all the padding that we have going

on here.

So we'll probably want less padding for the smaller screen sizes but you can see that the card is actually

being pushed off the screen also because of that padding.

So we definitely need to go ahead and take care of that.

So let's scroll up to our card style on our revolution card style.

Let's set a theme dot breakpoints dot down for these small break points.

And here we're going to change that padding but we're going to specify a different padding for each

side actually.

So we'll set padding top to 8 M and padding padding bottom 2 also 8 m but then we'll set the padding

left to 0 and the padding right to 0 which should give us a nice styling up and below the card while

removing this extra padding that's pushing us off to the sides on the left and right.

So we'll go ahead and save that page will refresh.

And now you can see that that looks much more appropriate.

And it's also not causing any over spacing.

So that looks really good.

The one thing I might change is you can see these little corners right there those little rounded corners

I'd actually really prefer if on the smaller screens since it's squeezed all the way against the edge

of the screen anyway it might as well just be totally flush.

And I think that would create a bit of a better look.

So at this break point we'll also have a border radius of 0 0.

So we'll save that.

And now you can see that it's got very sharp corners going to the edge of the screen.

And I think that that looks great.

And we can see if we resize this all the way back up is still looking great all the way until it jumps

up to these bigger break points and you see then we start getting all of our room.

We can scroll this back down and here actually see how it made the jump to the new style but we're still

having the gap here.

I actually let's go ahead and set a width to 100 percent.

So any time it's at this breakpoint when we take off the rounded corners it will push it all the way

against the edges of the screen creating that flushed Look we had wanted.

So we'll save this.

And that should extend the card and you see it does to now take up the full width of the screen looking

much better for all the smaller sizes.

And I'll go ahead and bring this all the way up and that looks great.

So I think that that is all we really needed for this revolution block.

It was pretty simple just this one element and then the background.

But that really creates a great looking design I think.

And it definitely gives a unique feel and kind of surprises you almost when you're scrolling down the

page and it really just catches your attention.

But the best part is that it looks so good on all the different screen sizes.

I really love that style of how that looks.

So I hope you're happy with that too but let's go ahead and we'll start creating the next block on the

home page for r about us and contact us sections in the info blog in the next video.