All language subtitles for 22. The Revolution Page - Responsive Design

Now we can start going in and changing some of the styling here because we definitely still have a lot

to do.

And first off I'd like to give us a little more spacing here.

You see how the vision section and the revolution title these are actually sitting right next to each

other as well as the technology section and the vision section.

These are also sitting very close.

So I'd like to go in and start adding some spacing here.

So if we scroll up to the top we can find the vision row container series technology.

So here's vision.

And here is the row container wrapping it.

And we can just give this a style of a margin top five m and then we'll scroll down to the technology

section and on its row container here will add a style of margin top 10 m and a margin bottom of 10

m as well.

And we can save this now and we will see that now we have some more spacing here on this page we can

go ahead now and start taking look at how the page responds when we start to resize it.

And you can see here that our image it shrinks down the text to make size for it all the way until the

medium break point.

So I actually like that.

I think that looks good.

But once we get here and then down to the smaller sizes this is obviously going to cause some issues.

And you can actually see here how the image is actually so large it's causing some horizontal scrolling.

So let's go ahead and we can size this up a little bit and I'm going to start off by coming up to the

top of our file and underneath the typography import let's import our use media query query function

from material UI core use media query and then we'll come down underneath our theme and add a constant

of matches small equals use media query theme dot breakpoints dot down for small and I'll actually go

ahead and create a constant of matches medium as well with the use media query hook calling theme dot

breakpoints dot down for medium.

Now we can come down in on our image for the vision icon.

Let's change the max width from 40 m to a ternary statement.

Checking the matches small variable and if we're at these small breakpoint let's give it a max width

of just 300 pixels.

Otherwise leave the default of 40 M and I know that I'm combining pixels and M right there but the 300

it comes from the fixed value that I need for smaller screen sizes and putting in that fixed value just

guarantees compatibility on those smaller screen sizes.

I probably could have found an M value that worked but I'd already had that value so I just kind of

went with it.

But we can save this now and we'll see the page refresh and our icon is much smaller.

But for the smaller screen sizes it actually it will look much more appropriate.

It's just a little hard to tell because my screen is so big it may look a little disproportionate but

that's why we have the larger version all the way until we get to the smaller screen size.

And at this point it will actually look more proportional let's start getting some of this stuff centered

up though like with the title we can give it an online property which is set to return every statement

checking our matches medium prop and if we're here let's set it to center.

Otherwise we can leave it undefined so we can save that.

And now our title is going to jump over to the center of the screen but now we need to get the icon

and everything else in line as well.

So on the row container for the vision section let's change the direction of a row here to a ternary

statement.

Checking the matches medium variable and if that's true we'll change to a direction now of column like

we normally do for mobile layouts.

Otherwise lead the default of row and we can actually copy this property and come down to the row container

for the technology section and it will replace that direction of row with these same matches medium

ternary statement and if we save this now we'll see the page jump and our content is in the middle of

the screen you can see it's not perfectly centered though you can see our image is definitely off center

and that's actually because on the vision image we have a marginal right of 5 m.

So what we need to do is go ahead and change that to a ternary statement.

Checking the matches.

Medium value.

And if that's true we'll zero out the margin.

Otherwise leave the border that we had before.

So we can save that and our icon will now jump to the actual center of the screen.

Go ahead and add a new style here though.

Because when we are stacked like this instead of a margin on the right to keep us away from the text

we need a margin on the bottom to give us some space from the text.

So let's say a margin bottom of matches medium.

And if that is true we'll give it a value of 5 m.

Otherwise we'll leave it at 0.

So we can save that and you'll see that now we have some more space underneath our icon you can go ahead

and get all of our text centered up now as well by changing our online property on all of these typography

components to center or actually a ternary statement making sure we're at the correct breakpoint and

then setting it to center.

Otherwise leaving whatever the default was will actually go through and we'll add that property to all

of the typography components including the ones for the text in the process sections.

So let's go ahead and here for the vision where it has a line of right.

Let's change this to a ternary statement.

Checks are matches medium.

And if that is true then we will set a center line.

Otherwise we can leave the default of right.

So I actually need to get rid of that.

There we go.

And we can go ahead and copy this for all of these right aligned typography components.

So we'll paste in that property all of these and now we can come down to the technology section and

paste the property as well but change the default of write to instead undefined because this is need

to use the default of left a line so we can copy that.

And now paste this onto all of the remaining typography components in this file.

So we'll go through and just paste it onto all of these

the process section already has a justify of center so we don't have to set that.

We'll make sure you get all of these titles as well as the body one typography variance

OK.

Got that finished.

So let's save the file and this will refresh.

And now all the text on the page is going to have jumped to being center aligned.

You can see these are nice in the center and our title is now in the center our body paragraphs still

are not centered but the text is center aligned but it looks like we do initially have all that text

correct.

So let's scroll back to this consultation section or actually we'll keeps going up and I don't know

if you can tell but it looks like it's actually a little off center here.

We have more spacing here than we do on the right.

So if we come up to where we are rendering our lady component let's see here in the technology section

where we have our lady component and we're setting the justify of flex end.

Let's change this to a ternary statement where we're checking the matches M.D. variable and if that's

true let's center it up otherwise we'll leave the default of flex end so we can save that.

And now you can see that the item was now scooted over into the center and is perfectly aligned now.

So I was just like it when we can make sure that we have the perfect alignment because even if you can't

put your finger on it when something is a little bit off aligned like that it just kind of makes it

feel weird and we definitely don't want that.

Now we can go ahead and make sure there are body sections is aligned with the title.

So let's find here.

Our consultation section and on the grid item container direction of column wrapping.

That section.

Well let's add in the line items property here with a matches medium ternary statement and let's sensor

it up.

If we are at the medium breakpoint otherwise we'll leave it on defined.

And since this is a direction of column where the main axis is the vertical direction specifying the

align items property will change our cross axis.

In this case the horizontal direction and should censor our text horizontally like we want.

So let's go ahead and save this real quick to see it on the consultation section and you can see that

it did indeed do what we had wanted.

So we'll go ahead and copy that and line items property and we'll go and find the container direction

column for all the rest of these sections and we're gonna make sure that we paste that on there as well.

So let's find the direction column from mockup

and for iterate.

So let's save all of that and the page will refresh and we can scroll through real quick to see all

of our text has now correctly been centered.

Looks great.

All right.

And we're almost finished.

We're getting close but we need to actually change the way that these are being laid out because right

now this container is still a container direction of row.

And so it's still kind of trying to fit the text and the icon on the same line which is why it doesn't

have enough room and it's breaking to just putting this over at the beginning of a new line.

So let's actually go and we'll scroll back up to our consultation section.

Here we are.

We'll scroll back up to the consultation here in the browser and it will find the row container wrapping

this entire section.

And now we're going to change the direction of row here to a ternary statement.

Changing it at the matches medium breakpoint to column.

Otherwise leaving the row property.

So we'll copy this and find the rest of the row containers and change their directions as well so we'll

paste that in for mockup

and iterate so we can save that page refresh.

And you can see automatically.

Now there are icon is being censored because instead of trying to force them onto the same line as if

you were in a row by setting the direction of column it knows to just place it on its own line where

it maintains the space properly so we can scroll down and we'll see all these images in fact actually

look much better and are more aligned except for this one build.

We definitely still have a problem there.

Let's actually scroll down to our build section.

So we did get it on there.

But that image is definitely causing us some problems.

So we'll have to tweak that these ones look pretty good.

So we still just have a couple of tweaks to do on some of these images.

So we'll scroll up and for example here the mockup this image is definitely a bit too big.

So let's go up and we'll find the mockup image mockup image and here let's add a style of Max width

of 1000.

We can save that page or refresh.

Now it's a little bit smaller.

And then we'll scroll down.

It's actually copy that style and we'll find the design image.

So the image for design will paste on that style max width of a thousand.

We can scroll down to the design section.

Let's save this.

Now we'll see the page refresh and that looks a little bit better but we can mess with that a second

if we have to come down to the build section here on our image for build let's add these style of Max

with 1000 but we'll actually change this to a ternary statement with our matches M.D. property and if

that's true then we'll just say 700 as the max width otherwise we'll leave it at a thousand.

All right.

And then we can scroll down to the lunch section and we'll give this a style max width of just two hundred

and then the maintain gets a max width of 500.

So we can save all that the page refresh and the images look pretty good except the Domino's is still

messed up.

It looks like the design is still messed up and I realized that's actually because we need to come through

and on all of these images.

So we'll scroll back up to the consultation and on the image let's scroll up here you can see.

Let's add a width of one hundred percent.

And this will make sure they are images are taking up the proper space available to them.

And so if I save this right here you'll see the image jump.

And if I were to then resize this you see the image properly sizes itself down you can see that it grows

right there.

It looks good.

But when we size it all the way up how looks definitely way too big.

So we need to put a max width on there.

So let's give our consultation a max width of actually just 700.

And if we save that you'll see the page refresh and if we make this huge it no longer becomes quite

as large but it will still shrink down appropriately and that looks great.

So open that up and it's come and copy that width of 100 percent and we'll come down to the mockup image

and we can paste that on there.

We'll save that.

You'll see the image jump.

And again.

Now that is being properly re sized based on the screen size to consistently give us the best view of

the icon possible.

So that looks really good.

You see especially when it starts to resize right here.

I really like that.

It'll look good on any phone size no matter what it's trying to be viewed on.

So let's continue down for review and we'll just go ahead and paste the width of one hundred percent

on all of these guys now.

So go ahead put it on design as well.

Design and let's save this actually so you can scroll down to the design section and we'll see that

is now slightly different size takes up good spacing here and as we continue to shrink down the image

it looks correct and there's is no longer taking up too much space.

We still have horizontal scrolling.

That's because we haven't fixed our build image yet but we'll get there.

So let's keep going and now scroll down from design to the next review image paste on the width of one

hundred percent.

We'll scroll down.

Let's get our width of one hundred percent on the build icon.

Hundred percent for the launch icon 100 percent for the maintain icon and 100 percent on our iterate

icon.

And if we save that now Page will jump that will refresh and all these icons will now be taking up the

correct and responsive amount of space.

You can see if I shrink this all the way down there is no longer any horizontal scrolling because all

the icons are perfectly taking up the amount of space available to them.

And since the icons are separate from the text and from the background it will never overlap or text

or cause any sort of issues like that.

It looks really good.