As already mentioned earlier in this module,
the units are a complex topic in the end.
And what you're applying right here
is not the only correct solution.
As I said, in the course,
we'll use rem for font sizes
and a mix of rem and percentages,
and sometimes pixels for other properties.
You can, of course, all the changes in play around.
We just want to give you something at hand,
which helps you to work with these units
and to build your own websites
as close to a real world environment as possible.
But don't take our recommendation as giving for any case.
You're basically free on how to apply the units,
because the important takeaway right here is
that you understand that we have these different units
and how this work under the hood.
Enough of the roots though.
Let's go back to the code
and let's see what we can change here now.
Before we do this though,
I can see that we still have a marker here
for our list items.
So for the food items in the end,
we could quickly get rid of this marker by going
to our food item class down here.
Now is it here,
and simply add list style, none
just a cosmetical change here.
But I think it looks better with this.
Yeah,
this highlighting option of the dev tools is gone.
And now we can finally jump back into the code
to update our units.
In the code at the top.
I want to get started with our main header selector here.
At the moment, the height is set to 80 pixels,
but as we learned the user
might want to change the font size,
and with this in our main header,
which is basically here,
the entire navigation part,
we should make sure that the header height adjusts,
if the user applies a bigger default font size
in the browser.
At the moment this does not work
because in the code we have a fixed font size
set for the logo, for example.
We of course changed this.
Therefore we should also make the header height
a bit more dynamic.
This means I'll simply go for a rem value here.
And we'll go for five rem.
So basically five times the size,
the user sets for the font size.
Besides this, we could also change the padding.
The zero value top bottom is okay.
But here to the left and to the right,
here in our head header.
These green parts you can see, um,
should maybe also be a bit more dynamic,
depending on the actual screen width.
For this I'll go with a percentage value here at this stage,
because with that, as we saw it in the last lecture,
the padding is relative to width of the page,
which is basically a good approach here.
In the logo, as I said,
I don't want to work with the pixel value anymore.
Here would like to use rem.
As you saw a common default setting
for the font size are 16 pixels.
So translating these default 16 pixels into rem,
what mean we go with 1.5 rem at this stage
to make the font size here more dynamic.
For the main header and the corresponding unordered list,
the zero values are what they are.
For the list items here,
we could again go for a percentage value,
but as the list items contain our anchor tags,
where we defined the font size right here,
I think this should also be kind of related to each other.
As we saw it right here,
the font size is slightly bigger than the margin
we add to the left and to the right.
Therefore we could first change the font size
of our links in the navigation items
to, well, 1.2 rem.
Again, assuming that the default size
would be 16 pixels in the browser.
So 20 pixels would exactly translate into,
into 1.25 rem,
and to be in line with that,
as I said,
the left and right margin
should then be equal to one rem here.
Besides that we don't have any values to change right here.
The h1 element, well,
I think this is quite straightforward.
Here we have a value of 48 pixels.
So we'll simply go for three rem here,
three times 16 pixels by default.
For our latest products,
we have a width of 80% here.
The percentage is absolutely fine.
We want to have a percentage value.
If we go back here and check our latest products
relative to the width of the entire page,
so of the main element,
in the end which will be this element.
So going with the percentage value is fine.
Just perfectly adapts to the requirements of our page here.
And we also have
a margin of 50 pixels top and bottom.
Let me quickly see this.
I think we could produce this a bit
to maybe roundabout two rem.
I think that's totally sufficient.
Let's have a look.
Yeah, I think this looks better.
So let's go with two rem, right here.
Again with the same logic that we basically had
up here for the header.
So depending on the actual font size the user applies,
we also want to make sure that the margin top and bottom
margin here adjust accordingly.
With that, we can continue with our unordered list here.
And what I first see here is maybe it makes even more sense
to add the list style non-property here
to the unordered list,
not the individual food items.
Let's do it like this,
such as the slide cosmetical change.
There is not a lot to change.
Maybe also the grid should be displayed in rem again,
same logic.
If our font sizes change,
then also the gap between our columns
should also be more dynamic.
So we'll also use one rem right here.
Down here, we have our food item class now,
and here we have a pixel value.
And this is one of the cases where I would recommend to
stick with the pixel value.
Why?
Because well, making the border radios
or borders in general dynamic
often leads to unwanted behaviors,
meaning that the border or the border radius here increases
more and more.
And this doesn't make sense in many cases
because only, because the element might become bigger,
the border radius should of course remain,
the way it was defined initially,
and not also scale with the increased size of the element.
Therefore going with the border radius in pixels right here
is totally fine.
So let's scroll down even further.
Here we now have our images
and for the images while we can again
follow the logic that we had implemented earlier.
For the width, 100% is totally fine.
Here the container should define the space
our image has from a width perspective.
For the height though, again,
we should scale by using the rem unit and here
240 pixels would translate into 15 rem again,
assuming a default font size of 16 pixels.
With this in place,
we only have to clean up our food item,
content selector here.
Which basically means we're moving
this out commented part and also removing the font size.
And we might also,
let's quickly check this,
food item content.
Here we are.
Yeah, we might also add a bit more padding.
So I'll go with a padding of one rem right here.
Yep, now this looks a lot more organized.
And then if we scroll down further,
we have our h2 element with the font size,
which is actually not required because as we learned
the h2 element has a nice styling, but you fold.
So in this rare case,
we can go with the default values here,
at least in the Chrome browser.
And this means the only element that's left
or the only selector that is left
at this stage,
is our button and the button has again a border radius.
As we saw it earlier,
we'll keep this border radius the way it is in pixels.
And for the padding, we could use the rem unit here.
So let's say zero dot five rem,
0.5 rem top bottom,
and one dot five rem left and right.
With this in place,
if we go back to the website and open our settings,
once again.
Here we are.
And if, and I'll increase the font size,
you'll see that the page nicely adapts.
So this means we did an important step to having a more
responsive site and the more pleasant user experience.
However,
let me close the settings here.
And let me reopen a dev tools.
What we did not implement so far
is the actual responsive design.
Because by decreasing the width again,
you'll see that, well, we have a nice scaling font,
but the page still breaks.
The nav up here is still not looking good
if we have a mobile view.
So responsive design is not only knowing about units.
There is more to explore.