All language subtitles for 9. Creating The Services Block - Custom Software Continued

All right.

Let's keep working on spacing some of this out a little better because you can see this section here

is pushed all the way up against the left edge of the screen.

So we're definitely going to want to move that but it's also way too close to the hero block and so

I'm going to want to put some space in between these two sections as well along with putting a little

more space in between the icon and the text right here.

So those are as squished up either so we'll start with that one and we'll come down and on our image

here on our actual image we'll say a class name of classes dot icon and we'll scroll up to set a icon

style of margin left to em and we can save that.

We'll see the page refresh.

And now we've got a little more spacing in between there which I really like but there is one thing

to keep in mind whenever we add spacing to something like that when we resize this and it gets down

to the breakpoint where it's now being stacked on top of one another that to M to the left of the icon

is still pushing that little space right there.

And when we're stacked on top of one another we're definitely not going to want that.

So let's make sure we come in and we'll add a theme dot breakpoints dot down for extra small.

And here let's go and set that margin left to zero so that we'll totally get rid of it and if we save

this we'll see the page refresh here and now it's flush against the screen.

So as we size up it will maintain the correct styling and look way better.

And we do still have a little point where it'll have that space but that's because we haven't gone in

and styled it all the way yet.

So we've still got a couple of things to do and that should take care of that.

So now let's get some spacing between these two blocks here and we'll come down to our services blog

and for this entire wrapping container we're going to add a class name here of classes dot services

container or actually service containers.

What I meant.

And we'll come up to styles objects create our service container style with a margin top of twelve m

to go ahead and save that.

And that's going to put some spacing now up here on the top of our service section giving us a little

buffer under our hero block.

Now let's go and put that spacing on the side of this item here.

And so actually for just the grid item wrapping just the text and those buttons here will add a style

of a margin left five m.

So we'll save that.

And that will push that whole thing to give us a nice little border right there.

And now that really looks great that I think looks exactly like the design file.

And so now we just need to check out how it works on other sizes.

So you'll see as we shrink down it maintains a pretty good look until it stacks on top of each other.

And here this is obviously not the look that we are going for.

And it does not look like how you would want something to look on a mobile site.

So let's go ahead and center all of that up which will make you feel a lot cleaner.

The problem though is that we don't want it to always be centered so up here you know this is the look

that we want and that looks fine.

So we only want to center it if we're down here at one of these smaller breakpoints.

So what we need to do is get access to our media query system within our component.

So let's go up and we will import under our typography component.

Let's import use media query from material dash UI slash core slash use media query and then it will

come down and underneath our theme constant let's create a constant of matches S M set that equal to

our use media query function called with our theme dot breakpoint dot down for small then let's come

down and on our services container here.

Let's add a justify property

and we'll set this equal to a ternary statement that is going to check our matches.

S M media query.

And if that is true we're going to set the justified to center so that we'll sensor up our items if

we are at these small break point but if we are not then we can just leave this set to undefined.

And that will be equivalent to not setting the property whatsoever.

So if we go ahead and save this now we'll see the page refresh and it still looks fine at this screen

size but as we start to then go smaller and smaller you'll see when all the sudden you see it jumps

to being censored.

And as we continue to then shrink the page you can see that it is now centered up on our smaller screen

sizes.

There are a couple problems though because our text is not all centered even though the icon is and

we still have this extra little gap over here that we don't have on the right side and that's coming

from our margin left that we needed to create the little border up on this size.

But when we're down the smaller we're not going to need that.

And so we can actually set this to a ternary statement as well.

So inside of here for the margin left property let's check our matches.

S M variable and if that's true we're actually going to set this to 0 and then otherwise we'll read

it at our 5 m border so we can save this.

We'll see the page refresh and now we don't have that extra spacing over to the left side to get our

text all centered up though here on the smaller size we're gonna have to use the text align style.

So on this grid item where we're already setting our margin of left.

Let's go ahead and add the text align the property and we're also going to make this a ternary statement.

So we'll set our matches as M and if that is true and we are at these small screen size let's go ahead

and center all of our text up.

Otherwise we'll set it to on defined.

And now if we save this we'll see the page refresh and now all of our text including the button an icon

is all very perfectly centered and now works very much more like something you would expect to see on

a mobile site I'm going to nit pick just a little more though because we really don't want this icon

in the learned button squished up next to each other like that.

So when we're at this small breakpoint let's give a little bit of space between those two and so on

our learn button style over here.

The learn button style under the padding value.

Let's go ahead and add a theme dot breakpoints dot down for small and if we're here at these small breakpoint

on our learn button let's give it a margin bottom of to em and so that'll put a little margin underneath

the learn button which should push that icon down so we'll save this.

See the page refresh.

And now we've got a nice little gap under their my very final complaint and tweak that.

I'd like to make here is you can see when we're shrinking down the right here that's perfect example

how the text will span all the way to the very very edge of the screen it's pushed all the way up right

against it there before it then is resized and I think that I'd really rather it always have a bit of

a border there and then be resized within that so that we're not squishing right up against the edge

of the screen right there.

So to do that we can come to the service container that we already had set up and let's add a theme

dot breakpoints dot down for a small and if we're at the small breakpoint let's just add a padding of

twenty five all the way around that text.

And so if we save that now look right here and all the sudden you can see it's now smaller and resized

and it will never touch the edge of the screen like that because of the padding that we've put around

there so you can see this really looks great.

And you can see it move.

Switch back to the old style.

And it looks good as far as we want it to be.

So we have made this a perfectly responsive little section already and we're going to use this now to

create the other services sections using the custom software development section as our template.

So let's get started working on that in the next video.