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

Now that we have all of the content on the screen for this page let's start going through and making

sure we have all of this perfectly responsive.

The first thing that I want to do real quickly actually is just add a little bit of extra margin down

here on the bottom of the page.

That way we have a bit more space between the last row here and our footer.

I just think that that extra white space looks pretty nice.

And so here let's see this is the grid item container direction row with justify space around for the

automation and user experience design sections.

And here on that wrapping container let's go ahead and add a style of margin bottom 10 am.

We can save that page refresh and we've got our extra space.

So that looks a bit better.

And now we can go ahead and we'll start shrinking this down so we can see what we have to do in order

to make this responsive.

And you can already see a lot of problems.

There were some issues there.

None of this looks really good.

That was almost fine.

He's still out of place.

None of this really is looking correct.

So we have a decent amount of work to do but it should hopefully go pretty quick.

The first thing that I want to do is I said I would actually like to hide these arrows if we're on the

mobile navigation and we can do that easily using the hidden component that we are familiar with.

So let's come up to the top here and under our import for use media query let's import hidden from app

material dash UI slash core slash hidden.

And then we can scroll down to where we have the grid items wrapping the icon buttons and we're going

to wrap that entire grid item in a hidden M.D. down component so then go ahead and or just cut that

entire grid item and paste it inside of the hidden M.D. down.

And so that will make sure that this is not visible on any of the mobile screens and we can scroll down

we'll find the next grid item for the forward button and let's do the same thing.

So we'll wrap that with a hidden empty down.

Cut it pasted inside.

And now we can save the page and you can see the arrows are gone the hidden component really is a very

convenient way for doing stuff like this especially when you're working with the grid system.

But let's bring this up actually.

I'll bring it up just right until right here where we're at the medium break point because this is really

where I want to start the responsive styles when we're going to our mobile navigation in the menu as

when generally most of the page is going to have to start resizing.

So it's come up to the top and underneath are constant of classes.

Let's create our constant of theme with the use theme hook and now we'll finally use the use media query

and we'll create our constant of matches M.D. equal to the use media query hook called with our theme

top break points down for medium now if we are on this medium break point the first thing we would do

is get all of this text centered up and we'll make sure the rest of the content starts to be censored

up as necessary so we can start by scrolling down and we'll find the grid item container with a direction

of a row.

And this is the container that is wrapping all of our heading text including the arrows that we just

wrapped with the hidden component.

And on this grid item container let's add a justify property and we'll set this equal to a ternary statement

checking our matches M.D. variable and if that's true.

So we are at the median breakpoint or below.

Let's go ahead and say a justified property of center to move all this text over to the right.

And if we are not at the median breakpoint or below so where are our larger screens.

Let's just leave this as on defined.

So it will stay where it is we can save that and we'll see the page refresh in our text has moved over

but you can see that although the text is in the center it is actually still left aligned.

So we need to go ahead and on each of these typography components for all of that heading text.

We need to add in a line property and we'll set it to the same matches M.D. ternary statement.

And if that's true then we'll set a center.

Otherwise leave it as undefined and let's go ahead and we'll copy that online property onto all of these

typography.

So the one for the title and all of the body want paragraphs as well.

And when that refreshes you can see now there is all been censored the first part of this page is looking

really good.

Now I think we've got most of the responsiveness for this.

I think that's fine.

These icons that are still going to be sharing that space until we get to this small break point and

then they'll be stacking.

So we can take care of that in a second but we'll keep working on this medium breakpoint and if we scroll

down let's actually go ahead and you see how this animation is being cut off right here.

Well that's because it's not going to have enough space to put all of this text the animation this other

animation and this other text all on the same line right here and especially on a actual medium sized

device and sort of just my resized browser here that's going to look a lot more cramped.

So go ahead and write here we'll just change this to now being stacked on top of one another.

So that way though each have plenty of room we can do this.

If we scroll down to where we have the grid item container direction of row and that's wrapping the

item container direction column so we can scroll down and here what's find the grid item container direction

row justify a space around for the digital documents and data container as well as the section for scale.

So the item container direction row wrapping both of these items right here and we're actually going

to change this row value on the direction property and let's make this a ternary statement checking

the matches medium variable if that's true then let's add a direction of column and otherwise we'll

leave it at the direction of row.

So if we save that we'll see the page jump.

And now they're being stacked on top of one another and that animation has plenty of space again.

Now though the items are still being aligned to the left because now that we're in a direction of column

there's nothing aligning them over into the centre or the right.

And so to move them over to the right while we're in a direction of column where the main axis is vertical

so up and down that's the main axis.

Well we need to move it over.

Right.

So that would be the cross axis which we can do with a line items.

So on that same item container let's add in a line items property and asset this equal to our matches

medium Turner statement and if that's true let's set it to centre.

Otherwise undefined and we can save that page will refresh and our content is in the middle of the screen

if you remember the row down here we actually had copied and adapted from this original row up here.

So we're going to want those same styles for this row as well to make sure that it's responsive.

So let's go ahead and a line items and direction properties that we just made responsive for the digital

documents and data row.

Let's go ahead and copy that and we'll scroll down past the root cause analysis section down to the

grid item container for the automation and user experience design section and here let's replace that

direction property with the direction and a line item properties that we just copied and if we save

that we'll see this refresh.

And now those are stacked on top of one another as well although these items are centered though you

see the here.

They're both smooshed right next to each other as well as here.

So on the digital documents and data section and the automation section let's go ahead and add a margin

bottom to give us some spacing.

So let's come over here and just below where we were the grid item container with the class name item

container.

Let's go ahead and make sure this is around the automation section and let's go ahead and here we'll

add a style a style of margin bottom 15 m but we actually don't want this applied all the time because

remember we only need this if they're stacked on top of each other like this.

So we'll actually need to make this value a ternary statement.

Sending it to matches and D and if that's true or use the 15 m otherwise leave it at 0.

So save that page or refresh and you can see we've got the spacing underneath there.

Now let's go ahead and copy that style and scroll of to the digital documents and data section.

Go to it's item container and paste that style on as well so screw up here and you can see it once we

save that.

Now we have this space here as well these look pretty good now.

But if we scroll up remember how mean we shrunk this page down.

Once we get to this small breakpoint that now all of sudden these are sitting on top of each other like

that.

Well that looks good and that is what we want but we don't want them squished up against one another

so closely.

So on the save time item we can add a margin top and a margin bottom to give spacing for both of those.

So let's scroll up and here is our save time typography and so on.

This grid item container direction of column here next to the max width in the style.

Let's add a margin top of matches in here we'll need a small.

So we'll have to create that just a second.

But if we are this small breakpoint let's give it a margin top of 10 m otherwise zero and then we'll

set a margin bottom two matches small 10 m 0 as well.

So let's go up now.

And underneath underneath are matches medium constant.

Let's add the constant of matches small using our use media query hook and the theme dot breakpoints

dot down for small this time.

So now we can go ahead and save that and you'll see we now have a nice bit of spacing between all of

those icons.

I think this is an OK place to stop.

So we'll take a break now and we'll finish up this page and our responsive styles in the next video.