We finished a theory.
Now it's time to apply media queries
in practice in our project.
As I mentioned earlier,
please make sure to set the zoom level
in your browser command on the Mac
or control on Windows,
and the plus or minus key on the keyboard to 100%.
This makes it easier for you
to follow along here
and to have the exact same styling
and layout that I have here in the video.
With that out of the way,
we can now focus onto the media queries.
And I would like to get started
with changing our grid layout here.
At the moment if we again,
check the width of our page,
I'm here at a bit more than 1,500 pixels.
If we think back about the breaking points
that we had on the slide earlier,
we saw that the breaking point at 768 pixels
is a good one
to make the differentiation between a landscape
or the portrait way to display the website.
For our example here,
this would mean that going down to 768 pixels,
so right here,
this one,
this would be the breaking point
where we assume that users
browse our website in portrait mode,
using smartphones or tablets.
Therefore right here,
I would like to change the way our grid is displayed
from the horizontal layout,
so basically two columns
to a vertical layout,
so a single column only.
This means what we need right here is
we need a media query
stating that starting from the desktop view,
and coming down to a width of 768 pixels or less,
well, the grid layout should change.
Let's implement this together now.
For this, we go back to the code
and we add the media query here at the bottom
of our CSS file.
I'll come back to why this is not the worst idea
in a few minutes.
So, we'll first add the media query.
So tell the browser that we want to gather information
about the media,
about the device our user is using,
and the specifications
with the @media command right here.
Afterwards, we add deeper emphasis,
and in there
we should now decide if we want
to have a min-width media query,
or a max-width media query.
As we are starting from the desktop device,
we want to have a media query
for a certain width and less.
This means, we need the max-width keyword in here,
this one.
Afterwards, we add a colon
and we now define this max-width
so the limit basically,
up to which point this property or these properties we add
should be applied in our code.
As I said,
our breaking point
should be 768 pixels.
We'll soon change this to rem here,
but I want to get started with the pixels
to really focus on to the media query logic first.
Afterwards, we add a space,
and now we open and close the curly braces,
and inside these curly braces now,
we can start a new line.
We now have to define the element,
the class or the idea.
So basically what part of the website
this media query should be related to.
In our case,
if we check our CSS code,
we see here that our ID with the latest products
and in there, the unordered list
has the grid applied.
Well, it definitely should remain a grid.
So this property will remain unchanged.
But here the template columns,
we don't need two columns here,
we just need one single column.
So this property
and the corresponding value should be changed
in the media query.
The gap by the way, can remain in here.
If we turn this into a single column grid,
the gap code here will no longer be active,
because well which gap should it create?
There is no gap if you only have a single column.
Therefore, we now go down to our media query
and copy the selector here,
including the unordered list.
And now simply paste this.
Now add a space and again,
the curly braces,
and in there we now add the property
that should be changed in the media query.
This is our grid template columns property,
and this should be changed to well,
one fraction or simply 100%
of the available space that we have inside our grid.
With this change in place
we should save this of course,
and go back to the project.
We see,
that now,
once we hit our breaking point here
that the grid column changes.
And we can also see this inside our code.
If we go into the main element
section,
and here the unordered list,
you see that at the moment if we are equal to
or below our breaking point,
that the grid template columns 100% property is applied.
But if I increase the width,
we jump back to our well two fractions layout
that we initially created for the desktop site.
If we would go back,
and change this from max-width to min-width,
what would happen then?
Well, let's find it out.
Let's go back to the website,
and there you see
by adding min-width,
we have the actual mobile layout
for the desktop site.
And if we go below our defined breaking point of 768 pixels,
then the desktop design kicks in.
Again, because the max-width
is used if you go from desktop to mobile.
So you say for this breaking points and lower values,
I want to apply certain styles in the media query,
for the min-width you say,
I'm starting from the mobile view
and for this breaking point and higher values,
I want to apply a certain style.
We want to apply our mobile style for
certain values starting from the desktop world,
therefore we'll go back to max-width
to make this work correctly.
Another thing I wanted to mention
is the position of the media queries in here.
You do not have to position this at the
bottom of the page as I recommended right here,
but it's important that the media queries are positioned
below the initial code you wrote
for the mobile,
or here in our case for the desktop site.
Because if we take this code now
and cut it,
and position it for example, here
ahead of our main header,
like this and save this.
By going back to the website now
you see that if we play around,
well, the media query doesn't have any effect.
Why is this the case?
Well, don't forget about the cascading nature of CSS.
This means in here in the code,
we first have the media query.
Okay?
Then the browser understands
that this media query should be active,
but afterwards,
we actually have our initial definition of the layout here,
this code.
This means this code gets executed,
as I said,
due to the cascading nature,
so the code is read top to bottom.
Therefore, well the media query doesn't have any effect.
If we go back to our media query though,
cut it from here,
and position it
below our latest products unordered list.
Then of course the style would work
because here we defined the desktop style,
and in the media query,
we define a certain breaking point, in here
and say if this rule is active,
then please apply the following property value combination.
So in the website now,
if we go back,
the CSS rule is applied.
So the media query is working.
This was the first step about media queries.
What we can do now of course is,
we can position it back
at the bottom of the page in here,
just to have it organized in a better way.
And with that,
we can continue and see what else can we do now,
when it comes to our mobile design.
Because at the moment,
if we decrease the width,
we have this different grid layout,
but we have more things to do.
For example, the navigation bar up here,
this doesn't look as intended right now.
Therefore there are more things to change here.