All language subtitles for 4. Services Page - Responsive Design

So that's looking a lot better but now let's address the fact that this is definitely way too spaced

out and there's too much space up here above the top of this first item.

So we'll come up and inside of our service container which is the class on all of these service blocks.

We're setting a margin top of 12 m and I'd like to come and change that actually to just 10 now.

So we'll save that.

And we see things shrink up just a little bit but we still have too much space up here on the top.

So to solve that what I want to do is come down to this grid container direction of row for our Iaw

and Android block and underneath the class name for the service container style let's add directly a

style equal to a margin top of just five m.

So this will overwrite the 10 m margin for the service container and we'll give it instead just five

m.

So if we save that we'll now see the top of the page is shrunk and is closer to the top the top is looking

really good but we don't have enough space down here on the bottom.

You can see the website development section is pressed right up against the footer here and we definitely

want some white space there.

So we'll come down and on our Web sites a block for the container direction of row under the service

containers class name.

Let's give it a style equal to a margin bottom of 10 M's and we'll save that.

And once page it refreshes we see we've now got a nice amount of whitespace there.

This is now really close to the design.

You see it went pretty quick because we had already had most of this already done.

But you can see here at this larger size that there is a bit of a weird alignment problem that I don't

really like and that is over here you can see that the icons are lined up for these sections but the

text for the website development section is all the way over here whereas the Iaw and Android app development

section extends all the way out much farther so I'd really like ideally for these two text sections

to be lined up as well which I really think would make it more consistent and more pleasing to the eye

than this kind of jagged look that it has now another problem that we have still is if we start shrinking

the page down actually and we get all the way to this the smallest size.

Well now the spacing up above the IOW section is actually a little bit too much.

In my opinion.

So we need to go ahead and add a breakpoint to change that style for a lower value on our mobile devices

so up here on the Iaw and Android blog where we had set our margin top of five M..

Let's change this to a ternary statement.

Checking our matches S M variable and if we are at these small breakpoint and that is true let's set

a margin top of just one m m and otherwise we'll weave our 5 and the value.

So we save that.

And since with pages already shrunken down you can see it's now much closer to the top which I think

is a lot more like what we had wanted Let's size this back up though and we can take a look at that

alignment issue now see how these containers are still very much off center with each other and to fix

this.

Well I wanted to do is to actually set a whit for this text container so that regardless of how much

text is inside you see all the website development has much less text so it does not extend as far but

if we set a width on that container then no matter how much text is inside both containers will be sent

to the same width and thus should be aligned.

So here on the grid item wrapping are typography components and the button component here for our Iowa

is an Android app blog inside of these style.

Next to the text a line style let's add a width property and we'll actually use a ternary statement.

So the matches S M variable and if that is true then it will actually set this to undefined because

we already have it responsive for our mobile site and everything will just be centered up above.

It's just for the larger sizes that we need to make sure that this alignment is being taken care of.

So we'll set the width here to thirty five m and now we can go and copy this style and scroll down to

the website development block and next to the text aligned section on that grid item wrapping the typography

components we will add these with property that we had just copied and it will save this now to see

our page refresh and you'll notice that the website development section jumped out but it's still not

quite all the way lined up with the Iaw and Android app development section and although the text sections

are now the exact same size with our 35 m with the problem now is that the icons are not the exact same

size.

So you'll notice that the Iaw and Android app icon is actually a bit wider than the website icon.

So we need to go ahead and set these same width for those items as well.

So then the icon and the text container will both be the same width for each of these sections which

will ensure that they are aligned with one another so now onto the image for our Web site icon.

Let's add a width equal to two hundred and fifty M K and then we'll copy that and we'll come up to the

IRS and Android app development block.

And on the mobile apps icon image we'll paste that with as well.

So let's go ahead save that the page will refresh.

And now our icons are the exact same width and you'll see that that has caused our entire containers

to now be aligned so I can go ahead and I can bring this all the way up and I've got a little chrome

extension here that is pretty useful it allows me to draw boxes here on the page so I can check the

alignment of different items and if we now go and we draw a little line right next to the Iaw app development

section you'll see that it extends down and is perfectly lined up with our Web site development section

so that perfectly achieved what we had wanted to.

And by setting the fixed width for each of these items we were able to guarantee consistency regardless

of the content.

So you'll see that this now shrinks all the way down all the way inside until we get to the medium then

it will jump to being censored and then they'll continue to shrink down appropriately to the smallest

sizes.

Thanks to the styles that we had already set up on our landing page there is one last little thing and

we forgot.

If you haven't noticed and we didn't even put these services title here on the page so up above the

Iaw and Android app development block but underneath our great container let's add a grid item here

and this is just going to wrap a typography variant H2 and we'll set this to the services services title

and let's actually add a gutter bottom onto that as well.

This we get a little bit of spacing so we can save that page will refresh.

And now we've got the services tab but it just needs that margin there as well.

So we'll give it these style margin left 5 m but we know that we don't want the 5 m if we are on a mobile

device and this is a censored up so we'll want to check the matches small matches small variable and

if that's true we'll zero it out.

Otherwise we'll leave that margin.

And since we know that this is going to need to be centered then as well we'll add the online property

and set that equal to our matches S M if that's true we'll line a center.

Otherwise leave it undefined undefined.

So we'll save that.

And the title has jumped over a little bit farther than we expected.

That's actually because this style of margin left it needs to go on the grid item wrapping the typography

not the typography itself.

So we'll save that and we'll see now that it's lined up with the other margin on the page I could use

a little bit more space on top of it though I know I'm always picky.

Well let's give a margin top here and we'll do the same matches S M matches S.M..

And if we're there we'll know we'll only want a smaller margin on the top.

So to do a margin of 1 m otherwise let's do 2 m.

So we'll save that.

And now we've got a little bit more space on top of there.

I think that looks perfect actually.

And you can see it stays in the correct place when we extend the screen.

And now if we come and shrink the screen down it'll jump to being centered just like all the other items

and now looks appropriate on our smaller page.

So I know that I moved a little quickly on that one but I think we're getting really good at the responsive

design aspect of this and using our break points to set different styles and really just create clean

consistent layouts without much manual work.

It does so much for us.

I really love that.

And you can see the services page is already completed and looking perfect for all screen sizes.

So this is great and really went quickly compared to the landing page of course because now we're not

having to learn as much new stuff.

We're just focusing on that grid set up in all of our responsive styles but hopefully all of the rest

of the pages on the site they should move relatively quickly just like this one since we now know everything

that we need about material UI to create these and we're just getting practice implementing these different

layouts.

So the services section is a good place to start.

Nice little warm up if you've taken a break but we'll get into some new content now when we start building

out our services pages starting with the custom software development page in the next video.