All language subtitles for 11. Custom Software Development Page - Responsive Design Continued

The custom software page is really coming along and this should be the last video that we need to finish

it.

So we see that this is all looking really good so far.

This text looks great.

The icons look great.

But now that we're here on this small break point where the icons and animations are no longer sitting

next to their text you can see that is now breaking.

And it's not really looking so good.

So what I'd like to do here is while they're stacked on top of one another let's just get all of this

centered.

So if all of this was just perfectly centered in the middle of the page I think that that would be exactly

what we would want for our mobile site.

So let's go ahead and start working on that in the same way that we had applied the online matches medium

center to the heading typography components.

Let's go ahead and copy that and we'll come down now to where we have the digital documents and data

section and on the typography component here.

Let's go ahead and paste that same property except change the matches medium to matches small.

OK.

And then let's go ahead and copy that property once again.

So now let's paste this onto all of the typography components for this entire page and we will get all

of this text aligned.

So right here you can see that we have the outline of a right already in place.

So if we overwrite this make sure to change the undefined.

Right.

Because if we're not centered we want it to be the default of a line to write so that we get the look

that we wanted for the scale sections.

So make sure to overwrite that and change undefined.

Right.

And then keep going down and a root cause analysis that's all already centered right here for the automation

section.

We'll go ahead and we'll paste it in and paste it for all the body typography as well.

So we'll get all that pasted in and then down here.

We have the inline right again.

So make sure we are changing that back to the align of right.

And let's actually just copy that.

We'll need that for the rest of these.

So paste that in paste and get the very last one.

So let's go and save this now and the entire page is going to jump and now all this text wow all of

it all of it looks great and is centered on our smaller screens.

Now we need these icons to be centered as well all of the animations and so we'll start by coming up

to the digital documents and data section and on the item container wrapping our digital documents and

data section and we'll go ahead and add a direction equal to a ternary statement checking our matches

small variable and if that's true.

Let's use the column layout otherwise we'll stick to the default of row.

Let's go ahead and copy this down on to the item container for the scale section as well so we can paste

that.

And the page will refresh and you can see our animation has jumped into the center and we can scroll

down and the scale animation is I have hiding right there is there as well.

So we've got it all nicely centered and looking great but we're not finished because we didn't do that

to these animations.

So let's go down and we should still have that copied.

Let's make sure we have that copied and we will come down to the section for automation and on the item

container here we'll add that same direction property and down for the item container for you X the

same as well.

And once we save that we're seeing that now all of the animations have jumped into the center let's

scroll up here to our root cause analysis section.

And if we keep scrolling this in it you see right here actually it's already off center.

So you see we've got a lot more spacing here on the left side than we do on the right.

And that's because the image is actually taking up too much space.

So what we need to do is find our root cause analysis section and here where we set the height and width

on our image what's actually changed these two ternary statements.

So we'll set a matches small and if that's true let's just use 300 m.

Otherwise stick to the 450 and we can copy that and paste that for the width as well and once we save

that we'll see the page refresh and our icon is now much smaller and fitting perfectly within that space

let's keep shrinking this down a little bit.

So I can show you of here now there looks like it's just a little bit too much spacing on the sides.

Now it's a little bit unnecessary this text should really be able to extend out a little bit farther.

And that's coming from the padding that we have said on our main container.

So the padding left and the padding right.

A 5 m is giving us those borders here which is the same borders that we have up here on this large size

that looks great.

But on this tiny size it's a little too cramped.

So let's go ahead and add a theme dot breakpoints dot down for the small groups small break and here

and let's set this style of padding left to just one point five m m and the padding right to the same

value one point five m we can save that.

And the page will refresh and now that's looking way better.

That's taking up a much more appropriate amount of space.

But now that spacing of the top here I really don't like how there is that big of a gap.

So let's also change the padding top from the previous value of to m to now just one M we can save that

and you can see moved a little bit and I think that looks a bit better.

This is looking really good.

Now this is all re sizing correctly and taking up the right amount of space available to it.

Now it really came together nicely and created a really interesting layout to the ends up collapsing

into just the perfect mobile responsive layout that you could expect and want you would really almost

not expect a layout that looks like this when you hear the large size to so easily flow down into a

responsive design for any screen size.

And I just love the way that this can collapse in and create this look that is optimized for any device.

But we're still missing a piece because remember we always put our call to action down at the bottom

of most of these pages.

And since we had created our call to action as a separate component for our landing page it will be

very easy to do.

So what's come up to the top and it import our call to action action from dot slash UI call to action

and now with scroll all the way down all the way down and underneath this second to last grid item.

So there's only one grid item underneath.

Let's add a grid item and this will simply contain our call to action.

And remember that the call to action has the learn more and Free Estimate button that we need to pass

are set value prop down too.

So let's call this with these set value props to set value and then we can close that off and save.

So the page will refresh and you can see they are called to action is here.

But that definitely doesn't look correct because it's got the borders on this side of it from the padding

that we put around the entire page obviously it looks like we can't use that approach anymore.

So what we should do then is we'll come up and I'm going to change the main container style.

I'm going to change that name to row container and then I'm going to get rid of the padding top in the

padding bottom values and to get rid of those and get rid of the padding top out of the small breakpoint.

And now we'll come down and let's remove the class name main container from our main container.

So get rid of that.

And now on each of the wrapping rows for each of our sections let's add the class name classes.

Dock row container.

OK.

So we'll copy this and scroll down so we find the next row which is right here.

Class name row container.

And it's really helpful if you just select that grid tag and you can scroll.

It'll show you the closing tag and so you know that this is the next row.

Add the class name scroll down the class name.

This is for a root cause analysis.

And since we're adding this same property on to each of these rows instead of the main container that's

going to still put the border there a little padding here that we had had previously except it's now

not going to be placed on this last item.

We're not going to put it on the item containing our call to action.

And so that spacing should go away.

So we want to make sure that this spacing stays here.

This spacing goes away.

So if we save the page we'll see that indeed the spacing and borders for all of these sections has remained

and the text still is taking up a great amount of space but not too much.

And we can scroll down to find a full width call to action now appearing on the page.

We did get rid of that padding top and patting bottom though and so we still need a way to give us a

little more space down here at the bottom and a little more space here at the top.

Cesar it's pressed right up against there we still need that padding of 1 m but we only need it for

this very smallest breakpoint.

So let's go up and we'll create under are other constants the constant matches x s and use our media

query for the theme dot breakpoints stuck down for access and then now on our first row we can add a

style.

So this is the row for the heading we can not a style of margin top matches X as if that's true we'll

set the 1 m margin.

Otherwise we'll set the 2 m margin sequence is really apparent right now.

If we scroll up you see it's all the way pressed against the top and 2 M is what we had been setting

it to before and 1 m is what we had wanted to for the smaller size.

So let's go ahead and save that now and that will refresh and you can see we've now got the extra spacing

there as well as the entire time that we are on the larger screen sizes as well.

So this is looking good.

It was a nice little step and all we need to do now is to add the extra padding here on the bottom.

So what scroll all the way down.

And on this last grid row.

So the entire entire row with our row container wrapping this last row let's actually change this 10

m value to a 20 m value.

And that should give us the extra spacing that we had needed and I think that definitely looks good

and even on the larger screens that still gives us an appropriate amount of spacing.

So now I think we just did it.

We just finished creating the custom software development page and this is probably one of the most

complex layouts on the site probably one of the biggest challenges in terms of alignment and just making

sure that we're using all of the correct properties at the right times and modifying those properties

based on the screen size to create layouts that are optimized for all devices providing the best user

experiences.

I hope you like building this page.

We had a lot of stuff going on and with the different four animations and then we have the image in

the centre.

I feel like this really shows you how you can manage a lot of different things all at once.

Using just the grid system and just material UI to handle this all so well and to create such a responsive

and perfect design there really just I don't think could be done any better at this point.

So really just be proud of yourself for creating this.

I'm super happy with it.

And now until we get to the very last page things that should hopefully be a little bit easier from

here for a little bit.

So you'll get a nice little breather as we go through and work on some of these other layouts there

will still be a couple gotchas and things to keep in mind so don't shut your brain off completely but

we'll go ahead and let's keep working we'll keep moving on to the rest of this site and get this knocked

out in the next video.