Instructor: 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-with 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 would write @media and then max-width 600 pixels.
So basically, this media query checks
if the current viewport width a 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 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 mix-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 override 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 our 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 a thousand pixels off 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.html again,
and then, let's open this one to the other side,
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 @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 dev tools here
because 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 now 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 here.
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 this slide, right?
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 dev tools, 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, well, 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 less in our code.
Okay.
And with this, 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 I icon here
so to toggle this device toolbar.
And so what this gives us is basically a way
to simulate smaller viewports 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 we 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 break points,
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 wanted.
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.