All language subtitles for 12. Using Media Queries

All right.

So we've learned a lot about responsive design and then how material UI provides us systems to implement

it.

So now it's time to actually take a look at integrating that within our own application and begin the

process of making our site responsive.

Now the last time we took a look at this I showed you how if we start to resize the page when we start

to shrink you see the R image gets all messed up as well as the tabs and the button so I'm going to

put the screen back to size.

And one of the first things that we're going to do now is to actually get rid of all of those tabs.

If we were a small enough screen size then we're going to end up implementing a draw for our mobile

tabs but we need a way to tell when to render the tabs and when to render the draw.

So we're going to start working on that right now we'll start by coming up to the top of our header

dot J.S. file and we're going to import use media query query from app material dash UI slash core slash

use media query then we're also going to import theme but make sure you get the brackets to D structure

that from not just theme use theme from material material dash UI slash core slash styles.

So now we're able to come down and inside of our header function here at the top underneath classes

let's also create our constant theme equal to use theme.

And now that gives us access to the default theme within our component.

Now let's scroll down and write above the return statement for our component.

Let's add a constant of tabs and we're going to set this equal to a multi line expression and we'll

start that with a react dot fragment so that we can have two adjacent elements without any place holder

elements to wrap them and inside of here what I'm going to do is go and take everything from tabs all

the way down all the way down to the Free Estimate button.

Actually no.

I want to continue all the way down all the way into our menu.

So all the way down to right above the toolbar all of our tabs the button and the menu.

We're going to cut all of that and put it inside of our tabs react fragment so let's paste that right

inside of there.

And now if we went ahead and saved the page we can see that there is actually a problem.

Doug you've failed to compile and that is probably because let's see.

Probably because we are not rendering the tabs yet so let's come up to the top and we're actually going

to create a another constant up here a constant of matches and we will set this equal to our use media

query hook called with our theme dot breakpoints dot down with medium passed in.

So this is going to select anything that is medium and below to return true.

Now we can come down and scroll down to where we cut all of our tabs and menu from.

And so right underneath the button but inside of our toolbar create a set of brackets to inject some

javascript and we're going to use a ternary statement to check if matches is true.

So if we are at medium and down and if we are at a screen size of medium or smaller let's just return

normal for now.

And if we are not.

So if we are at a screen above medium size.

So on our large and extra large screens we're going to render the tabs.

So now if we go ahead and save this and then come over to refresh our page it looks like there's still

a problem so I must have a typo here at the top.

Oh and that's what it is.

I forgot the at sign in front of material UI core slash styles.

So make sure you have the at sign at the top of there and we'll save this.

And now we see our screen refresh and since we are at above the medium the screen size we see our tabs.

But you'll now see that if we reset size the screen you see the tabs go away.

So that is pretty cool.

You can see the tabs are gone and they come back they disappear and they're back.

And so we are now officially hiding our tabs and making our Web site responsive using the material you

I use media query hook now that hook has done a great job at making our component responsive.

But now I want to go ahead and make some of our styles responsive if you notice whenever we resize the

screen.

When are tabs disappear even if we come all the way to the bottom.

The very smallest size I can make the screen.

We still have quite a large header logo here that is taking up probably a lot more space than it should

so I'm going to resize the page and what I want to do is come over to our logo style here in our sales

object.

And now I want to create a new style but we're going to use the syntax as shown in the material UI documentation

to set our theme dot breakpoints dot down for medium equal to an object with a new heights of just 7

M so if I go ahead and save this you'll see the page refresh and everything looks the same but now as

I resize the screen as soon as the tabs go away you can see that the image actually got slightly smaller

as well.

So now we are actually creating a responsive style that adjusts to the screen size as well.

That looks really nice there.

So I want to actually add a another point where it will get smaller for our very smallest phone size.

So let's make it bigger and we'll go ahead and we're going to add a theme dot breakpoints going down

from extra small.

So this is going to be the size of our phones.

And just to give you a little context here.

Most phones are going to be extra small.

They're small in landscape and then tablets are usually small in portrait and medium in landscape.

And here on my screen I can make it any of those sizes.

So for our extra small breakpoint let's set the height here to just five and a half M..

So now if we go ahead and we save that and the page refreshes we can come over and start to resize this

and we'll see the first breakpoint match.

And so now we have the seven am height.

But as we continue to resize the screen pass this small and now into the extra small breakpoint.

And so you could see it change again giving us a much smaller and appropriate header size for the extra

small screen sizes one thing you will now notice though is that since we've changed the size of the

logo and by that the size of the toolbar we now have some extra space here up above the home content

where the toolbar margin is being set too large.

So let's go ahead and we can size this back to normal.

And if we come to our toolbar margin style here in these styles object this is what is setting too large

of a value as we were scaling Dean logo size down because remember this 3M margin bottom is to offset

the increase from an 8 m height for the logo.

So when we then change that to 7 M and then even further to five and a half M We're still providing

this same margin bottom which then creates that gap.

So to fix this obviously we need to set breakpoints for the toolbar margin as well to line up with our

logo breakpoints.

So I'm actually going to go ahead and just copy these just copy these on over from the logo and if we

go ahead and paste those styles onto the toolbar margin we can then go in and change this from a height

property to the margin bottom property and a here for the medium breakpoint.

I just want a margin bottom of 2 am.

And then here for extra small I want a margin bottom of just one point to five m so these are obviously

numbers that I have found through testing to be consistent in their spacing so if I go ahead and I save

this we can now refresh the page and you'll see when we start to resize that the first breakpoint will

hit.

And notice here what you want to pay attention to is the space between the top of the H and the bottom

of the logo here so you can see above you can see about what relative space that is and you can see

that change but stay the same relative space.

And as we shrink all the way down to our extra small break point you can see again that the home content

now adjusts.

Thanks to our breakpoints on the toolbar margin so you can already see how easy it is for us to really

create a responsive design and use the system from material UI not only in our themes but in our actual

components to render different content and to change these styles depending on which device is viewing

the content.

This very simple system integrated with how we already had the application styles set up makes it very

easy and you can see the ability to cascade and change styles as well as you could add completely new

ones for different breakpoints if you wanted to change the properties entirely for different styles

so this really opens up a lot of flexibility and you'll start to really see different options for how

we can set this up and use this to our advantage to really create a comprehensive production design

but obviously we don't just want to have a blank header up here we want to still have a navigation system

for mobile we just don't want it to be that big set of tabs across the screen so instead of using the

tabs on the mobile we're going to use a draw and we're gonna start taking look at what that is and what

options we have for it in the next video.