All language subtitles for 26. About Us Page - Responsive Design

OK and let's get working on finishing up the About Us page which will also finish up this section.

So let's get through this.

And you remember if we resize this page down things start to break pretty quickly.

So just get us right to where.

Medium break POINT starts right here.

Things are already pretty broken.

Kind of the whole thing and as soon as we get a little bit farther it really starts to get messed up.

So let's start adding some styles here and we'll begin by coming up and exiting out of our theme and

then we'll come over to the about J.S. and underneath the avatar import let's import the U.S. media

query hook from material dash UI slash core slash use media query then we can come under our theme and

create the constant of matches medium equal to our use media query hook calls with theme dot break points

down for medium then we can scroll down in on the row container for our history section the history

and this icon underneath the class name let's go ahead and set the direction here to a ternary statement.

Checking our matches.

Medium value.

And if that's true let's go with the column direction.

Otherwise we'll leave the direction of row so if we go ahead and save that now we'll see the page refresh.

And that doesn't look too much better although it actually is this is a step in the right direction.

So we need to go ahead and now add in a line items and we'll check the matches matches medium because

we only want to do this if we're in this layout.

But if we are here let's center it up.

Otherwise leave it undefined so we won't mess with it.

And if we save this we'll see the content jump again.

And now they are both perfectly centered within our screen.

We need to get this text centered though.

So on the history typography component let's go ahead and add in the line here which will be a ternary

statement again and checking the matches medium breakpoint.

And if that's true or set it to center.

Otherwise undefined and we can go ahead.

Copy that online property and pasted on to all of these body paragraphs as well get this last one and

then we can save this and we'll see all this text.

Now jumps to being center aligned let's keep scrolling down here and we see the this design.

This breaks pretty quickly.

So let's go ahead and we'll find the grid item container that is wrapping all of these last three sections

the yearbooks the text and the puppy.

So this grid item container right here.

Let's go ahead and add a justify checking our matches medium breakpoint.

And if that's true let's go ahead and center all of these up.

Otherwise leave it on defined.

And then if we save that we'll see the page refresh and our text is now centered.

But we still need to work on those containers for the puppy and the yearbook so let's go ahead and on

the grid.

Item container direction column wrapping.

The yearbook section.

Since this is a container that is why they justify property here is not affecting it.

Same thing with the item container for the puppy section.

So instead what we're going to do is on these container direction columns.

Let's add in a line items with the matches median ternary statement centering if that's true.

Otherwise undefined and then we can go ahead and copy this property.

We'll go ahead and copy it onto the last item container for the puppy section but here it already has

the align items of flex end.

So go ahead and paste this in and then change undefined to flex.

And so it'll still have that correct.

Right alignment when we are above this breakpoint.

So let's go ahead and save this now and both of those should jump into the middle of the screen which

we do indeed see.

All right.

Now all of this is pretty cramped together.

It's literally all stacked right on top of one another.

So let's go in and start adding some spacing now and we'll start with the mission statement getting

some spacing from the title.

So we'll come up and on the grid item container wrapping our mission statement.

Let's give this a style margin top of three M we can save that.

We'll see.

Now we've got some spacing there that looks good.

And now we can use the history row container as a buffer by adding some space to the top and bottom

of it.

So here on the D row container wrapping our history section let's add a style margin top of 10 m and

a margin bottom of 10 m as well.

So let's save that and we can see some spacing now has appeared above and below the history item Leslie.

Let's come down and on this last container with the yearbook text and the puppy we definitely don't

want this pressed right up against the text right there.

So we'll scroll down and find this last row container and here we're going to add a style of a margin

bottom 15 m and actually this isn't going to affect the spacing here because we're going to change how

we need to set this up but we want to go ahead and add a margin to the bottom of this container so that

the footer is not pressed right against the content.

So if we save this that margin bottom 15 m that gives us a nice bit of spacing underneath here.

Now if you take a look at this and you see how we have the team and my picture but then here on this

smaller screen size you also have the yearbook picture just stacked right next under it and then you

have the text and then this picture and I really don't think that that looks the best.

I think that it looks good here when they have space to share the space they think this makes sense

but when we're down here I don't think it makes sense to have these two pictures right next to each

other.

So what I want to do is actually when we're at this break point I want this paragraph to be up above

the yearbook and right underneath the avatar instead we can do this pretty easily with the hidden component.

So let's go up to the top of the file and underneath use media query let's import hidden from material

dash UI slash core slash hidden.

And now we can come down to where we have the little bio these two paragraphs.

So these two typography components wrapped with the grid item we're going to go ahead let's cut that

grid item and let's put instead here a hidden M deep down and we'll open this up and paste that grid

item inside.

All right.

And so this grid item is going to be hidden.

If we are below the medium breakpoint.

So if we save this now we'll see the page refresh.

And that text disappears completely.

See if we're above the medium breakpoint we have the text.

But once we get here bam it's gone.

So now what I'd like to do is let's go ahead and copy that hidden component and we'll come up and above

this grid item container direction of column.

So above the year book wrapping container paste that hidden component in and change the M.D. down too

large and up.

So this will be hidden if we're at the larger screens but only medium breakpoints and down it will be

visible.

So if I save this now that text will reappear underneath our image but we can go and up on the larger

screen size you see it disappears and is below in between those two items again.

But we can.

Bam.

And now it jumps to being on top.

And I think that that creates a much better layout and will then make it look a little bit better with

the two images below let's clean this up a little and we don't want these two images pressed right against

each other.

So now we can find the yearbook container with a direction of column and let's add a style here with

a margin bottle and we'll set this to a ternary statement.

Checking the matches.

Medium.

Medium break point setting.

Two point five m.

If that is true and otherwise when we're at the regular horizontal layout of the desktop screen or just

zero that out and leave it without a margin so we'll save this now and the yearbook will have a little

bit of space in between it which just makes these two pictures look a lot better.

All right.

And we're close to done.

Let's go and shrink this down even further into our smallest size.

And this is where we always have problems.

You could see it right off the bat.

We automatically are history that's causing some horizontal scrolling and our founder image is actually

too large as well.

So we're going to need to say a max width on both of those.

So it's come up and actually in the top of our file where we have the avatar style.

Let's give it a theme.

Dot bright points dot down and we'll call this for the small breakpoint.

And once we hit these small breakpoint let's give it a height of just 20 m and a width of just 20 m

as well.

And it looks like it is a problem because instead of braces I did brackets.

So put in the braces that we need.

There we go.

But then let's also set a max height max height of 300 pixels and a max width width of 300 pixels as

well.

So this will make sure that they're responsive but never too large.

So we can save that and the page will refresh and you can see our avatar image has adjusted properly

now let's go ahead and set the max width for our history image.

So scroll down until we find our history image and we already have a max height here of 22 m.

But let's go ahead and set this to a ternary statement.

And if we're on the matches medium break point let's set this to just 200 pixels.

Otherwise leave the twenty two m all right.

We'll save that page will refresh and our history icon is now much better size as well.

Now these images that here they look good.

They look like they're not causing a problem because we're not on too small of a screen size but if

we open this up let's actually go to our inspector and let's click this little button right here.

So see you right next to elements.

If we hover over this that says toggle device toolbar.

If we go ahead and click that.

This is going to simulate Google Chrome running on a different device browsers.

OK.

So this is an iPad but we can come up to the top and select the Galaxy S5 and this is generally going

to be the smallest screen size that you will encounter.

And if we scroll down you'll see ban those images they are taking up way too much space and they're

causing us some problems.

So we always need to make sure to come in and check this simulator to make sure our designs are actually

working on all the different screen sizes.

So go ahead and fix that.

Let's go and scroll down to our yearbook image and we'll add a style max width.

And here will check the matches.

Medium value and if that's true we'll set it to 300.

Otherwise leave it on defined and let's go ahead and we can copy this style and we will copy that and

paste it onto the puppy image as well.

We can save that and our page will refresh here and you can see the horizontal scrolling is now gone.

And as we scroll down you can see that everything is now correctly centered because those images are

taking up an appropriate amount of space and not ruining the layout.

So this looks really good.

This is a great tool to mess around with.

You can also put the device in a landscape mode and you can see that you can test out a design on this

as well where it should still look perfect since nowhere are we actually telling the Web site whether

or not we're in portrait or landscape.

But we've done such a good job at just telling it to take up the correct amount of space depending on

what is available there.

It can adjust regardless.

So that's really the benefit of true responsive design in my opinion.

We only have two us things to do.

First is this title about us that needs to be centered when we're at these smaller screen sizes obviously.

So let's break this down once we get there.

It needs to be center to still scroll up and here on our typography variant H2 for about us.

Let's add in a line here of matches medium.

And if that's true.

Set it to center.

Otherwise undefined you can save that.

And now our title jumps into the center of the screen just like the rest of our content on net pick

one little thing to actually when we're down here.

See the spacing up above.

We usually have that to M. border and then let's check the matches.

Medium break point and if we're here remember let's set it to just 1 m.

That looks a little bit better.

Let's say that you can see just a little bit closer.

Small difference.

I think it looks nice let's finish this up super quick underneath the puppy import.

We will import our call to action from our dot slash UI slash call to action and then scroll down all

the way.

And then this last grid item.

Let's have the grid item wrapping our call to action with the set value equal to our props does set

value closer off.

And now it's come up.

We need to import or take the props as input to our function.

Hit save.

Let the page refresh.

And now we can scroll down to see the call to action that we're very familiar with and know that not

only did we finish this page we just created another perfectly responsive page with a very interesting

layout that looks so good on literally every possible screen size we're just maintaining such a great

layout and alignment.

I really couldn't have asked for this to turn out better in my opinion especially considering that I

didn't design this website with material UI in mind at all.

I just completely created something from scratch and a material UI has been able to handle it flawlessly

but not only did we just finish this page.

We also just wrapped up this section and we knocked out so much content in this section we we created

probably more than we will in any of the rest of the sections but so much was just able to be crammed

into this and we were able to move really quickly because we've already learned so much about material

UI and hopefully this just really nailed in all the concepts that we've been going over all of the different

alignments and properties and how you can purposefully switch them to just create literally any kind

of layout that you can imagine.

And it really has just gone to show us how flexible this is creating our services page we're able to

create custom software development page where we have four animations all in a very cool alignment and

it's all so nicely responsive sharing the right amount of screen space jumping when it needs to to allocate

a better layout and it just does such a great job I feel like of really making a great user experience

no matter what device the user is coming to the application on.

So that's really something I value.

We can go over to the IRS and Android app development section website development page back to the services

the revolution.

All these nice process steps.

And finally the about us.

I can't believe we just knocked all this out in one section so you can see how quickly you'll be able

to really start working with stuff once you get really familiar with material UI and you get good at

this.

You know if you were just working on your own project and somebody hands you a design file you could

take all of the designs from that file and put it into your theme automatically.

Now that you know like the caption and the subtitle one subtitled two body one body two and all the

different H forms H 3s and H 2s that we've messed with you create all those right off the bat and you

could see that it's really easy once you figure out how to structure your grid to just go in and put

all the content on the page and once it's there it's pretty easy to start using the responsive design

system and the grid system to get everything exactly where you want it how you want it.

We only have two pages on our site to complete from here.

We only have the contact us page and the Free Estimate page and these are both going to be pretty interesting

pages to create I think and it will start learning a lot of new information.

We'll talk about Google Cloud functions soon and how we're gonna be using that to actually send emails

out.

So that's going to be really cool and we'll start getting into all this in the next few sections.

So stick around and I'll see you there.