Original subtitles

Welcome back.

So in this lecture we're going to write

our very first media query.

However, before we can do that,

let's learn a little bit how media queries actually work.

And what I'm gonna show you here is how media queries work

with the max-width property,

which is what we use in desktop first strategies.

So that is exactly what we're doing in this case,

but remember that there is also the mobile first strategy,

and so there, we do use media queries with min-width.

But anyway, that's not really important now,

and so let's talk about media queries

with max-width right here.

So let's say that we wanted to apply a certain style

for the range between zero and 600 pixels,

so then we could write a media query like this.

So we will right @media and then max-width 600 pixels.

So basically this media query checks

if the current viewport width

is smaller or equal than 600 pixels,

and if it is then all the CSS code

that is in this media query will apply.

And if not, well, then that code that is in the media query

will not apply.

So what this means is that the max-width is 600,

because 600 is the maximum width

at which the media query still works,

so where it still applies.

Now after a 600 pixels,

for example, at 700 pixels, it stops working,

so the code is no longer gonna be applied then.

All right, now let's try another one

because of course we can create

more than just one media query.

So for example, if we wanted to cover the space

from zero to 1200 pixels,

we would write a media query like this.

So now we have max-width to 1200 pixels,

and so this media query basically asks the question,

is the width less or equal than 1200 pixels?

And so if it, is then of course,

this code that is in this media query will be applied.

All right, now inside these media queries here,

we simply overwrite some specific parts of the global CSS,

so the code that is outside of any media query.

But all the rest of the global code

will of course still apply,

and so you can think of media queries as tools for basically

overriding specific parts of CSS at certain viewport width.

Okay, but anyway, switching back to our two media query

examples here, maybe you are wondering what happens

if for example, a certain phone has a width of 400 pixels.

So which media query will apply now in this situation?

And that is of course an excellent question,

and the answer is indeed simple.

So both queries will apply because both of the conditions

are actually true, right?

So these 400 pixels are less than 600 pixels,

and they're also less than 1200 pixels,

and so the code in both media queries will be applied.

Now, if you have conflicting CSS declarations

in these queries, which is in fact usually the case,

then the one which appears less in the code

is the one that will apply.

But now another example this time with the phone

of 1000 pixels of width, or maybe actually a tablet.

So here only the 1200 pixel media query applies

because only that condition is true.

So a thousand is of course, less than 1200 pixels,

but it is not less than 600,

and therefore only this 1200 pixel media query

does apply here.

So with that, I hope you understand now

how the max-width media queries work,

and so let's now switch to our code and try it out there.

And just like in our previous projects,

I will now create a copy of the code from the previous

section for this section.

So basically I will build on the code of course,

from the previous section to now build the responsive

Omnifood version.

So let's call this one here responsive,

but of course you can simply keep working on the same code

that you had in the previous section.

So for you, there's no need to create a new folder here,

I'm just doing that so that in the end I can share the code

with you nicely separated.

So I can just drag that code here onto this icon,

and then here we go.

All right, so here is our index.htmlL again,

and then let's open this one to the other site

and the same for general.

Okay, also let's go live here just to open a new tab,

and it is still the same here let's just reload,

and there we go.

So it's still the same port,

so I can still use this one here

because it is also on port 5500.

So this port number here needs to be the same one

as down here.

All right, but anyway, let's now write

our first media query here.

And what I'm gonna do here

is to change some background color maybe.

So here at this section Hero.

So at media, and then max-width,

and let's try the ones that we just saw.

So 1200 pixels.

And for now I'm back to using pixels here

but we will change that in a second

or maybe just in the next lecture,

but here let's keep rolling now with pixels.

Now, inside of this media query,

so in between these curly brackets here,

we can simply write CSS rules,

just like we do outside of the query,

so just like here.

So we can simply now select that section Hero again.

So section Hero, and then let's change the background color,

just like this, and let's make it orange red like this,

give it a save, and let's actually try it out.

So let me open up the DevTools here,

then we can see the width right here in the corner.

So can you see the width there?

It's 13 and now we're getting close to our media query,

so let's see if it applies.

So if everything works,

now our Hero should become red and there we go.

So indeed, that worked, beautiful.

Let's just make this here bigger again,

for some reason it's not really small,

it's maybe a bit too much, but yeah,

let's select this one here and you see that indeed

now this code,

so our media query is here and it is now the code

that is being applied.

So this one is now overriding this other background color

that we set by default outside of any media query, right?

Of course, if we make it bigger again,

then that will disappear.

So now that CSS rule here is gone, but if we go back,

then there it is.

Okay, now let's try another one here.

So now let's try the 600 pixel one.

And again, I'm going to work on the section Hero,

and in this case,

let's try to change the color here to white,

or maybe let's add a border, why not?

And a really big one just so we can see this working,

so a blue one, so making this like really, really ugly

on purpose.

Okay, so let's see.

So we're still far away from 600, but as we approach it,

let's see almost there, and there we go,

there is our nice blue border all around this section Hero.

So let's check out our inspector

right here.

And so you see that now both of them

are indeed being applied.

So just like in that example that we saw during the slide.

But now let's try another thing,

which is to add a conflicting CSS declaration.

So let's say that we wanted the background color to be blue

starting at 600 pixels, right?

So let's see, and so, indeed now the blue is being applied

and it is overriding the orange red here from before.

So hopefully you can see that,

so let's make it even bigger.

So these DevTools, they become really, really important

as we start building our responsive version here.

So you see that the background color

now has been defined three times.

So first it has been overwritten by this one here,

at 1200 pixels,

but now 600 pixels since it appears later in the code

is now the one that is being applied.

So of course before the 600,

it will become orange because now that other media query

is not yet being applied.

So in this situation,

only the 1200 pixel query is being applied,

but then of course at 600 both of them are being applied.

And so then when there is conflicts like here,

then the last one is being applied.

And let me actually prove that to you

because if we move this one here back,

so if we switch them basically,

then, well here you immediately see it,

that it is now still the orange one who is being applied

all the way from 1200 to 600 and less, right?

So of course the blue border is still being applied

because there is no conflict there,

but then here with the background color of course

there is a conflict,

and so now it is this one who is being applied

simply because it appears the less in our code.

Okay, and with this, I hopefully you understood

the fundamentals of media queries.

Now, usually during development,

we keep this window here big,

and instead what we do, we click on this icon here,

so to toggle this device toolbar.

And so what this gives us is basically a way to simulate

smaller view ports right here.

So without having to manually resize

the browser all the time.

So here in this menu,

we can select from different devices,

and so then we get basically the dimensions

of those devices.

So the iPhone 6 Plus for example, has a width of 414

and a height of 736, and yeah.

Here you have all these different devices,

the iPhone X for example,

but the one that we are interested in here for now

is simply this one here.

So simply responsive because then

we can drag or size as we wish.

So just like this,

and here we then have also this scale factor.

So we can like set this to 75 and then we can nicely see

what's going on at different viewports.

So let's see, and indeed now our media query

is being applied because we just passed

our 600 threshold here.

So see, it changes exactly at 600.

So we can even manually set that here to 600

and then there we go.

So at 600 it applies but not at 601.

All right, so this is the tooling for media queries,

and you also already learned how they work.

Now in the next lecture,

we will figure out which breakpoints...

So which width here we should actually use in our design,

because there are of course

many different ways in which we can select these.

So 600 and 1200 are just some examples,

but we could use any value here, of course.

So this could just be like 857,

or really whatever we want it.

So how do we know which values we should choose here,

and also how many media queries we should write?

Well, let's learn that as I just said in the next lecture.