So how can we use this knowledge that we have about em
and specifically rem? Because in the last video, we changed the font size of some elements to rem but
I told you that you can apply rem not only to font sizes of course but also to other properties
and in addition to that, we might have more font sizes that we want to change. Before we do that,
always keep in mind that the rem, no matter if you apply it as font size or a margin for example, always refers
to the font size though, so the calculation basis for rem is the initial font size of the HTML
element.
Let's see what I mean by that because if we go back to the customers page, then we have our font size
here for the testimonial class,
this is totally fine but then we have this margin here,
this is interesting because it's a property we didn't use so far in connection with rem.
This margin is set to 48 pixels,
so this could be 3rem because as I said, the default font size of our browser is 16 pixels,
so 3rem would be three times this default font size,
well and this would be 48 pixels
but then of course applied to the margin property.
So I would prefer making this margin also more dynamic,
so I'm talking about this margin here, this top and bottom margin and you can of course also do that
but it's important to keep in mind that by making this margin more dynamic, the margin will of course
also increase or decrease depending on the font size setting in the browser.
Now let's apply a margin of 3rem right here like that
and let's maybe see what this looks like.
If I reload the page, nothing changed because let me show you this once again,
the computed margin right here is now 48 pixels
and by the way, I forgot that we also have our top margin right here.
You remember, we specified a top margin for first of type, so
this first of type margin also has to be adjusted because at the moment, the change we made for the rem only
affects the bottom margin but not the top margin,
we will change that soon. But if we look at this gap now between the two images and now change the font
size to very large again, right here, then you can also see that this gap right here, inspect that, it increased
because the bottom margin now although you cannot really see it very well right here increased to 72
pixels, that's important to keep in mind, that's what I meant when I said be careful when you use the
rem for margins for example,
it's not a problem to do it,
you only have to know that this will be the effect.
However I like to use rem right here,
I think this is fine.
We have the width,
this is ok with the 80%,
then we have this first of type margin, here we should change it to rem also.
So this should be 69 pixels,
so 6 times 16 is 69, so this should be 6rem, like that. As you can see,
nothing changed right here,
then let's go on.
We have the width and the max width defined,
I might come back to this max width in the responsive part because we have these pixels right here.
I'm not sure yet if I want to keep the pixels but for the moment, this is ok.
Then we have this box shadow here,
this is this nice shadow we have around our image container.
Now you could change this to rem also
if you want to
but I would not recommend doing it.
Why am I saying this?
Well I don't think that the box shadow is something that should increase or decrease with the actual
font size,
I think a shadow should just be there, it should be visible but increasing the shadow a lot, I don't think this
helps improving the accessibility and maybe readability of the content of your site.
So I will stick to pixels right here and this will also be the approach we follow throughout this course.
Then we have the image with the width of 100%,
this is totally fine as I think, then we are in the testimonial info class,
so this is the class right here, this one, so basically the element wrapping our text. Here we have the
padding of 14 pixels, well for the padding,
I would approach it with the same relational we had for the margin.
I changed the margin to rem, so the margin increases and decreases with the font size setting in the
browser.
In the end, it depends on your personal preferences but I think if we do this for the margin, doing it
for the padding is a good idea.
We have 14 pixels right here,
let's maybe change it to 0.9rem,
this should be 14.4 pixels.
So let's reload the page, as you can see not a lot of change
and if we go to the computed value, you can see that we have a padding of 14.4 pixels to all sites.
So this is nice,
with that we also have the padding in a more dynamic way.
The width for 30% is fine,
then we have the margin again for the testimonial name,
so this time we are in this class right here.
Well I think we also change it to rem, so 3 pixels,
this should be round about, 0.2rem like that
and if we go further down, we have the testimonial subtitle,
this is already changed so this is fine
and in the end, we have the margin for testimonial text.
Well I think we follow again our approach of applying 0.2rem right here, like that. With that, our CSS
file is a lot more dynamic
now, I talked about the image container that we might have to come back in the responsive part
but generally if I reload the page now and change the font size to very large, let's see. We can see it's
indeed large, the gap also increased but the general styling is ok in my opinion because now everything
right here is more dynamic.
The nav bar is also not fixed yet
of course, we work on that throughout the course but generally, I think we achieved a lot so far just by adding
this rem unit to our website right here.
And with that, I am now handing over to you because now it's time for your challenge because we finished
this customers part, at least from the rem perspective but we also have this packages page right here,
this is the page you mainly created on your own. On this packages page,
we have the same issue.
If we go to our packages.css file right here, we can see that the padding is still pixels, we can
see that the margin is still pixels, the border can remain as pixel,
this is actually the same logic I explained when talking about the box shadow,
so I wouldn't change the border
but if you go through that side, you will find a lot of properties where
it definitely makes sense to change them from pixels to the corresponding rem unit.
Always keep in mind that the basic setting in the browser, so the default setting is 16 pixels,
so 1rem is 16 pixels,
this means for example for the padding top, you would apply 2rem right here.
And with that, this is your chance to practice this rem unit,
feel free to also apply em if you want to
but as I said, I personally prefer rem to be honest and we'll also follow the rem approach throughout
this course.
And with that, I wish you good luck,
have fun with rem,
play around and in the next video, we'll have a look at it together.