All language subtitles for 19. Finishing The Call To Action

You can see that right before it breaks like that.

You see I'll close that estimate button gets to the text.

I really don't like that.

And so let's make sure that that doesn't happen by putting a little margin on the left side of the button

which will act as a buffer to keep that text from ever getting too close and we'll just make it jump

to resizing like this even sooner.

So underneath our margin right of 5 am on the estimate button let's add a margin left of 2 am.

And now let's resize the screen before we save that.

So you can see them right next to each other and I'll save this and the page will refresh.

And now they're stacked on top of one another because it's creating a nice little buffer zone without

ever quite touching Let's continue though and remember how I said we wanted all this to just be perfectly

centered when we're at this smaller screen size.

You can see right now it's actually pushing and creating a little bit of a buffer here.

So you definitely have to fix that but to get this to be aligned vertically and to all be censored we

need to be changing a direction from our row the default to the column layout that we've been using

for our mobile devices.

So let's come up and at the top here let's import under the Button arrow will import our use media query

from material dash UI slash core slash use media query and then we can come down and create the constant

matches S.M. equal to the use media query function passing in our theme dot breakpoints dot down for

small.

Now we can dynamically change the direction for our container based on the screen size so it will ad

our direction property and we'll check our matches.

S M variable and if we are at the small screen sizes let's use our column layout otherwise we'll stick

to the default of row so we can save that and we'll see the page refresh and this looks good there definitely

laid up vertically now but now the justify of space between the we've set is pushing our items away

from each other in the vertical direction when now I think we'd actually rather than be closer together

so let's add a ternary statement to justify property as well giving it a matches S M to check and if

that's true we will be centered and otherwise we'll leave our space between so let's save that and we'll

see now that is looking a lot better it's definitely on the right track it's censored up but the alignment

isn't quite perfect and we actually need that text to be centered as well so we have our container here

with the text and we can add another property to its style here which will check for text align and

it will check the matches S.M. variable and if that is true then we'll set a center text the line otherwise

we'll leave it to inherits whatever it had been using before.

So let's save this.

Now we'll see the page refresh and now our text is censored but the learn more button still is set over

to the left.

And that's because it's in it's own grid container.

So let's go ahead and since it's a container we can use our justifying and a line items properties to

align it and we want to move it over to the right and this container is set with a default direction

of row with the main axis being the horizontal direction.

So let's set the justify property but we'll need a ternary statement to check our matches small breakpoint

and if we are here then let's sensor it up otherwise we'll set it to on defined as if we hadn't ever

messed with it at all.

So let's save this.

We'll see the page refresh and now we have a centered button we still have a couple alignment things

to take care of though and you can see the text is being pushed over here thanks to our 5 m margin there

we're setting which now needs to only be set if we're above these small breakpoints so we'll check the

matches small breakpoint here and if that's true let's get rid of the margin otherwise we can leave

it with the 5 m so let's save that see the page refresh and now that is properly centered and that just

leaves the Free Estimate button which still has a little offset alignment because we're actually setting

our margin here on the estimate button a margin right and left in so let's add a theme top breakpoints

dot down for the small breakpoints and here let's set our margin left to zero and our margin right to

zero so let's save that see the page refresh and now we have a very clean looking call to action so

let's give it the test.

We'll start here.

Let's resize it all the way up.

It looks really great.

Keep resizing.

You see it begins to take up the space available to it.

It's never gonna get too close because then it jumps into our nice since centered style.

Man I love the way this looks.

We'll keep going up and now we have our nice big full screen picture which looks great the whole way

up and down.

I really love the way this looks.

I think this came out perfect like I could not have asked for this to be any better.

There is a tiny little thing that I've thought of that we could do to make this a little cooler.

And I was thinking about this when I designed it instead of just having the image here.

Let's go ahead and make that a light parallax effect.

And so the image kind of looks like it's staying still but the Web site is moving around it.

I really like that work honestly and I think it would do well here for our call to action.

So on our background a style we need to set a background attachment property of fixed.

Make sure to get the comma after that and we'll save this when the page refreshes.

You'll now see we've got a nice parallax effect so it looks like the image is just staying still.

And our text is now moving around and on top of it.

So as we scroll down bam pictures already their text floats up into position.

I really like this.

I think that adds a super cool book there is eye catching for people and just adds an extra layer of

interactivity and engagement to your site.

There is more static otherwise but I think that looks really good except when we string all the way

down on mobile devices.

I don't think I really want that look.

Honestly I think they'll mobile devices.

I think it would look a little bit better if we left it how it was so we can sit on our medium breakpoint

a background Attachment Attachment to inherits.

And so that will make it use wherever it was using before.

So we'll go ahead and save that see the page or refresh.

And now we have a static call to action for our mobile site.

So let's see that one more time again all the way up.

Full screen.

It's got some parallax effect that looks really great.

And as we resize this the buttons and the text stay in the right places taking up the correct amount

of space until we get close enough that they don't have enough space anymore and it jumps to being nice

and centered.

I just think that looks so good and matches so well with all the rest of the site there his really just

came together so quickly and so well looking so clean and professional and really without a ton of back

breaking work on our part.

You know I know it is a lot putting all the material UI components together and you know customizing

a lot of our styles but at the end of the day material UI is doing so much for us to make all of this

happen and to make it so easily responsive and just look so great for all the different screen sizes.

And it really just I think came out as perfectly close to the design as possible with a couple of executive

improvements that I think did a good job of fine tuning things up just a little bit.

But now we have really a great looking landing page and the fact that it is so perfectly responsive

for any screen size I think really shows a different level of skill besides just putting together some

react application got so much done through this section and really learned a law and hit home all of

the material UI concepts like the grid system and the responsive design system that we've been really

focusing on throughout this course.

I think you'll really be feeling better now about creating powerful layouts with material UI.

We have just a little bit of cleanup to do in the next video before we finish up this section.

So I will see you over there.