All language subtitles for 8. Using TextFields - Responsive Design

Before we star on the responsive design for this page let's actually fix real quick.

The fact that these text inputs are not spanning the correct length of the page and that this is actually

not correctly centers and the reason for that is actually my mistake and that is here on the grid item

container with a style of Macs with 20.

This is the container wrapping all of our items here.

But we did not set this as a direction of home which gives us the stacking layout and since he was in

the default direction of row it's essentially trying to force all of these inputs onto the same line

which is why I was having a weird layout before.

So let's go ahead and save that now and you see that it does indeed jump to the center.

AND NOW WE CAN GO AHEAD AND ON EACH OF THESE TEXT FIELD components let's add the full width prop and

go ahead and copy that paste onto this text field phone text field and onto our multiplying text field

and we can save that see the page refresh.

And now all of our text fields are spanning the full width of their container and all of that is now

perfectly centered within its section now that that's straightened out.

We can go ahead and let's start sizing this down.

Right.

Until we get to the point where we jump to the medium breakpoint here we're obviously going to have

to start changing some styles but I think the most obvious is that we need this to now instead of being

sitting next to each other like that we're gonna want all of that content centered up so let's scroll

down to where we have our container with a class name of background and let's add a direction to this

container and that's going to check a matches medium variable.

And if that is true then we're going to set this to a column layout otherwise we'll leave it at the

default of row and that of course means we need to come up and underneath or actually above our matches

s.

Let's create the constant of matches medium equal to our use media query calling the theme dot breakpoints

dot down for medium then go ahead and save that and we will see the page refresh and the content is

now in the column centered layout but let's go ahead and center up that text.

So if we come down and we find the typography variant H2 for simple software let's go ahead and add

in a line with a matches medium ternary statement setting center if that is true.

Otherwise leaving it on defined you go ahead and let's copy that align property and paste it onto the

other typography component as well and we can save that and we'll see the text refresh here to now be

center aligned now if we continue shrinking the page down you'll see that these small breakpoint all

the button the other content it all jumps to being centered here for the call to action section.

You can see that.

So let's go ahead and let's actually change all of these matches small.

I think it's just these three you know just these three right here.

We're going to change all of these two matches medium because we actually just want this entire page

to switch over to its responsive styles for the medium section so we can go ahead and save that now

and the page will refresh and it won't look any different.

But once we go up now you see on the medium breakpoint we have our centered content.

You can see actually that the estimate button still isn't perfectly centered.

And that's because we need to come up and on our learn button and estimate button breakpoints or styles.

So they have the style estimate button style learned button.

They each have a small breakpoint.

So let's change that to medium as well.

Change that to medium and we can save this.

And now that content is perfectly centered when we get to the medium breakpoint like this however remember

on the regular call to action that we actually switch to a mobile background.

So I'm going to want to do the same thing here.

So let's come up and underneath our background let's import the mobile background from assets.

Mobile background JPEG and then we can add inside of our background style.

A theme break points down for medium.

And here we can open that up and change our background image to the U.R.L. parentheses.

Dollar sign braces with the mobile background we can save that and our page will jump and the mobile

background is now in effect and you can see once we start sizing it down that starts to look really

nice once the beach appears now once we're at this breakpoint we definitely don't want our content sitting

up at the top like that.

So let's scroll back down and find our large eight and extra large nine container for the background

and we have our line items set to censor but once we're in the column layout of the medium breakpoint

to move this content down in the center vertically we're going gonna have to specify the main axis since

we're now in the column layout and we'll do that with the justify and we'll set this equal to a matches

medium center.

Otherwise undefined we can save that and that will refresh and we have some centred content.

Now if we scroll back up here we can see the our contact us section is touching the very tops and very

bottom of the space allotted to it.

So let's go ahead and give it some extra spacing there by coming up and we'll find are large for extra

large three container and let's go ahead and add a style of margin bottom matches medium.

That's true we'll set it to five M..

Otherwise zero because we're not going to want this unless we're at this stacked layout and we'll go

ahead and set the margin top and we can go ahead and copy that same value with our ternary statement

and go ahead and paste that in and hit save.

And so we'll have that same margin bottom and top values and you can see that that gives us a nice padded

look to our contact form now I also want to go ahead and let's center up this text for this layout.

So on our typography variant H2 for contact us let's add in a line with the ternary statement for matches

medium.

That's true.

Set it to center.

Otherwise undefined and we'll go ahead and copy this and we'll set that for the typography variant.

Body 1 4 we are waiting as well.

You can go ahead and save that.

And now both of those texts have been centered.

We're almost finished.

And you see how the text fields they look a little close to each other there.

But I guess it's OK.

But once we click on this you see that label it goes up right underneath the line for the other text

inputs and that looks a little too close.

So we're gonna find the grid item.

See the grid item container wrapping our text fields.

This is for the phone icon.

Scroll down find the container wrapping all of our text fields and then find the individual item wrapping

each text field and on each item let's add a style of margin the bottom set to zero point five m and

we'll actually go ahead and copy that and we can paste that onto each of those three items.

We can save that.

We'll see that are text fields now spaced a little farther out.

If I go and select that you can see we now have spacing between the label and the line which definitely

gives it a better look.

Another thing to notice is if we go ahead and start typing in this text field you see it gives us that

black text that honestly doesn't really fit with the rest of our theme.

So let's go ahead and in our theme dot J.S. file.

We'll scroll down to where we had created our overrides section.

And for the M UI input we're going to create a new section above underline and this will be to specify

the route styles for our M UI input and then the route style.

Let's give it a color of ARC Gray and a font weight of three hundred and if we go ahead and save that

we'll see the page refresh and I can come over and start typing.

And now I think that that looks a lot better and a lot more consistent with the feel of our application

let's go ahead and close out of the theme not J.S. file now and I'll clear out this text that entered

so we can come back.

Now the very last thing that we need to do to finish up the styling for this page is the thing that

I always nitpick is once we get too small we've got a bit too much spacing up here.

And if you remember if we come on up we actually are setting a margin top of 5 m up here.

But I want to go ahead and we still have our matches small variable up there.

So let's go ahead and use that and we'll go ahead and create a nested ternary statement and on this

margin top property in front of the matches medium because it matches medium it will be true for the

medium and these small break points.

But let's put the matches small breakpoint in front of here.

And if that is true let's set it to just 1 m.

Otherwise we'll check.

Matches medium and if that's true we'll set it for 5 m otherwise we'll leave it at 0.

So we can go ahead and save that now and we'll see that that puts us much closer to the top of the screen

just like our other pages on the mobile breakpoints.

So I think that that looks a bit better and more consistent with our application.

And with that you can see we're already at the smallest breakpoint.

Everything looks good.

We can size all the way up and it continues to create the layout that we have been going for and the

layout straight out of our design file.

So we've done a great job of continuing to create these responsive styles and to create exactly what

we had designed.

But let's go ahead and we'll start working with the inputs now and figure out how we can go ahead and

validate these values to make sure they're putting in a valid email and a valid phone number.

So let's go ahead and check out what we're going to do for that in the next video.