We added our first media query to the project.
Now it's your turn.
It's time for the next little challenge, in this challenge,
I want you to change three different properties
in our existing media query.
The first change I would like you to apply is the font size
of our H one element up here, in the mobile view,
the font size should be set to one dot five REM.
This is your first task.
Your second task is related to the NAV elements up here.
So this lists items in the ad, in the desktop view,
these should of course be visible,
but once we enter the mobile view,
so the current view we have here in our media query,
then these items,
these elements should not be visible anymore.
This is your second task.
So think about the property you have to use right here.
And finally, the third task is just a little one.
This is related to the value used for the max
width here in our media theory.
At the moment we used a pixel value here, 768 pixels.
I want you to change this to REM, based on the assumption
that the user,
so the person browsing our website is using the default
settings for the font size that we learned about throughout
this module.
Good luck with this little challenge.
Now is the time for you to pause this video and then we'll
solve this together.
How did it go, very successful?
Well, let's have a look at this task together now.
I want to get started with the H one element up here.
This one,
here,
we simply have to add this element to our existing media
theory and set a new value for the font size.
At the moment, if we click the inspectors,
we see that we have used the main H one selector here and
set the font size to free REM.
So we can go back to our code actually,
and scroll up to this selector,
here we got it.
Now,
copy this and go down to our media query that we created.
And now in here, where do we add this selector?
Well,
theoretically we can add it below our initial selector that
we have, so have a look at the structure.
We have the first curly braces right here,
opening one and closing one.
Then we have the first selector with the corresponding CSS
code in there, and now no semi-colon or anything like that.
We just add a space, an empty line.
And now at the second selector,
and here we could start with the curly braces again,
as I want to be in line with core CSS logic in the core
store where we have the CSS code starting from top to bottom
in line with the order of the elements in the HTML file.
I will now take this code, cut it, and add it ahead of the
second selector here.
So like this, and let's quickly format this maybe,
to have more structure and add this empty line here
once again, and now in the selector,
we'll add the font,
size property and change it to one dot five REM.
With this change in place,
we should be able
to see the new font size in practice, yes,
there it is, now we have it smaller.
If we increase the width,
we have the old bigger one for the desktop view.
Task one solved, what about task two now?
Well, task two was a bit more complex,
but nothing you can't do, the navigation items or the list
items actually should be hidden in the mobile view.
If we go to our header and check the code,
we know that the
list items.
So these two items here,
which contain the anchor text with the dummy links are part
of an algorithm list and off the NAV element in the end.
So we could, you know, of course hide
the individual list items,
but wouldn't it be easier to simply say that in the mobile
view, the NAV element here should not be visible anymore.
If we click onto the NAV element,
we also see how we can achieve this, by default,
our browser applies to display block property
to this element.
So if we change this play block to this play non, well,
this would make this element invisible, and with that,
the second task would be solved.
So back in the code,
we can quickly check if we have a dedicated selector
for the NAV element in here, because I think we do, yes,
we use the main header ID and then the NAV element.
So we can also select this right here and copy it.
Then go down to the bottom.
And here I'll add the rule now ahead of the H one element as
the page starts with the header, of course.
So we have to select, or now again to curly braces,
and now we enter the display property and set it to none.
With this, once our media queries active,
the NAV element,
and therefore also the list items should not be visible
anymore, let's see, yes, this is working.
Now we have no navigation bar in the mobile view,
not the final solution obviously, but,
and we have the desktop navigation bar only in desktop mode.
So this task is also solved.
The last task was changing the pixel value in the media
query, well from the pixel value to REM,
as I said,
we assume that the user takes the default font size
in the browser that's given,
this default font size is 16 pixels.
Therefore,
if we take the 768 pixels
and divide it
by this default value of 16 pixels,
we arrive at the correct REM value
we should apply right here.
7, 6, 8
divided by 16
is 48.
Therefore 48 is our missing value here.
Let's implement this quickly for the max width value.
So 48
REM
and with this, nothing should change in here.
Let's see if the breaking point is still working.
Yeah, this looks good.
So with this, we solved this task,
I hope you were successful.
And we also finished our core concepts related
to media queries here, what you're not done with yet though,
is learning about responsive design because our mobile view
here looks better, I guess,
but there is one important thing missing.
If we, again, look at the target structure,
the target look and layout of this website,
which I have right here.
Then we see some minor issues with the height of the cards,
but nothing that really bothers me,
but in the finished result,
we have this hamburger icon up here.
And if we click onto this icon,
then we have the two navigation options right there.
If we, again, click the hamburger icon, the icon is gone,
and this is something we also have to implement.
This means we have to learn more concepts about responsive
design as a next step.