1
00:00:02,260 --> 00:00:05,840
So how can we use this knowledge that we have about em

2
00:00:05,900 --> 00:00:14,380
and specifically rem? Because in the last video, we changed the font size of some elements to rem but

3
00:00:14,410 --> 00:00:22,920
I told you that you can apply rem not only to font sizes of course but also to other properties

4
00:00:23,050 --> 00:00:28,840
and in addition to that, we might have more font sizes that we want to change. Before we do that,

5
00:00:28,850 --> 00:00:37,630
always keep in mind that the rem, no matter if you apply it as font size or a margin for example, always refers

6
00:00:37,780 --> 00:00:44,850
to the font size though, so the calculation basis for rem is the initial font size of the HTML

7
00:00:44,980 --> 00:00:46,360
element.

8
00:00:46,360 --> 00:00:52,330
Let's see what I mean by that because if we go back to the customers page, then we have our font size

9
00:00:52,330 --> 00:00:54,050
here for the testimonial class,

10
00:00:54,070 --> 00:00:57,170
this is totally fine but then we have this margin here,

11
00:00:57,170 --> 00:01:02,360
this is interesting because it's a property we didn't use so far in connection with rem.

12
00:01:02,530 --> 00:01:05,510
This margin is set to 48 pixels,

13
00:01:05,560 --> 00:01:13,260
so this could be 3rem because as I said, the default font size of our browser is 16 pixels,

14
00:01:13,510 --> 00:01:17,870
so 3rem would be three times this default font size,

15
00:01:18,070 --> 00:01:20,440
well and this would be 48 pixels

16
00:01:20,530 --> 00:01:23,810
but then of course applied to the margin property.

17
00:01:24,130 --> 00:01:28,490
So I would prefer making this margin also more dynamic,

18
00:01:28,540 --> 00:01:35,430
so I'm talking about this margin here, this top and bottom margin and you can of course also do that

19
00:01:35,650 --> 00:01:42,070
but it's important to keep in mind that by making this margin more dynamic, the margin will of course

20
00:01:42,130 --> 00:01:47,500
also increase or decrease depending on the font size setting in the browser.

21
00:01:47,500 --> 00:01:52,420
Now let's apply a margin of 3rem right here like that

22
00:01:52,480 --> 00:01:54,520
and let's maybe see what this looks like.

23
00:01:54,670 --> 00:01:59,050
If I reload the page, nothing changed because let me show you this once again,

24
00:01:59,050 --> 00:02:04,120
the computed margin right here is now 48 pixels

25
00:02:04,120 --> 00:02:08,820
and by the way, I forgot that we also have our top margin right here.

26
00:02:09,040 --> 00:02:14,700
You remember, we specified a top margin for first of type, so

27
00:02:14,710 --> 00:02:20,680
this first of type margin also has to be adjusted because at the moment, the change we made for the rem only

28
00:02:20,680 --> 00:02:24,500
affects the bottom margin but not the top margin,

29
00:02:24,530 --> 00:02:31,750
we will change that soon. But if we look at this gap now between the two images and now change the font

30
00:02:31,750 --> 00:02:41,470
size to very large again, right here, then you can also see that this gap right here, inspect that, it increased

31
00:02:41,920 --> 00:02:48,940
because the bottom margin now although you cannot really see it very well right here increased to 72

32
00:02:48,940 --> 00:02:54,620
pixels, that's important to keep in mind, that's what I meant when I said be careful when you use the

33
00:02:54,650 --> 00:02:56,800
rem for margins for example,

34
00:02:56,800 --> 00:02:58,050
it's not a problem to do it,

35
00:02:58,120 --> 00:03:01,140
you only have to know that this will be the effect.

36
00:03:01,170 --> 00:03:03,490
However I like to use rem right here,

37
00:03:03,490 --> 00:03:04,950
I think this is fine.

38
00:03:04,990 --> 00:03:06,190
We have the width,

39
00:03:06,220 --> 00:03:08,510
this is ok with the 80%,

40
00:03:08,560 --> 00:03:13,410
then we have this first of type margin, here we should change it to rem also.

41
00:03:13,410 --> 00:03:15,330
So this should be 69 pixels,

42
00:03:15,460 --> 00:03:23,310
so 6 times 16 is 69, so this should be 6rem, like that. As you can see,

43
00:03:23,440 --> 00:03:24,450
nothing changed right here,

44
00:03:25,350 --> 00:03:26,910
then let's go on.

45
00:03:26,910 --> 00:03:29,750
We have the width and the max width defined,

46
00:03:29,760 --> 00:03:35,520
I might come back to this max width in the responsive part because we have these pixels right here.

47
00:03:35,520 --> 00:03:40,050
I'm not sure yet if I want to keep the pixels but for the moment, this is ok.

48
00:03:40,680 --> 00:03:43,040
Then we have this box shadow here,

49
00:03:43,050 --> 00:03:47,340
this is this nice shadow we have around our image container.

50
00:03:47,340 --> 00:03:49,750
Now you could change this to rem also

51
00:03:49,800 --> 00:03:51,180
if you want to

52
00:03:51,450 --> 00:03:54,730
but I would not recommend doing it.

53
00:03:54,840 --> 00:03:56,090
Why am I saying this?

54
00:03:56,370 --> 00:04:03,000
Well I don't think that the box shadow is something that should increase or decrease with the actual

55
00:04:03,000 --> 00:04:03,900
font size,

56
00:04:03,960 --> 00:04:10,530
I think a shadow should just be there, it should be visible but increasing the shadow a lot, I don't think this

57
00:04:10,530 --> 00:04:16,910
helps improving the accessibility and maybe readability of the content of your site.

58
00:04:16,980 --> 00:04:23,750
So I will stick to pixels right here and this will also be the approach we follow throughout this course.

59
00:04:23,840 --> 00:04:27,350
Then we have the image with the width of 100%,

60
00:04:27,350 --> 00:04:32,280
this is totally fine as I think, then we are in the testimonial info class,

61
00:04:32,300 --> 00:04:40,370
so this is the class right here, this one, so basically the element wrapping our text. Here we have the

62
00:04:40,390 --> 00:04:43,690
padding of 14 pixels, well for the padding,

63
00:04:43,700 --> 00:04:48,740
I would approach it with the same relational we had for the margin.

64
00:04:48,830 --> 00:04:54,710
I changed the margin to rem, so the margin increases and decreases with the font size setting in the

65
00:04:54,710 --> 00:04:55,550
browser.

66
00:04:55,940 --> 00:05:01,790
In the end, it depends on your personal preferences but I think if we do this for the margin, doing it

67
00:05:01,790 --> 00:05:03,900
for the padding is a good idea.

68
00:05:04,070 --> 00:05:06,570
We have 14 pixels right here,

69
00:05:06,680 --> 00:05:09,970
let's maybe change it to 0.9rem,

70
00:05:09,980 --> 00:05:14,510
this should be 14.4 pixels.

71
00:05:14,540 --> 00:05:18,670
So let's reload the page, as you can see not a lot of change

72
00:05:18,740 --> 00:05:26,400
and if we go to the computed value, you can see that we have a padding of 14.4 pixels to all sites.

73
00:05:27,440 --> 00:05:28,250
So this is nice,

74
00:05:28,250 --> 00:05:31,770
with that we also have the padding in a more dynamic way.

75
00:05:31,850 --> 00:05:34,430
The width for 30% is fine,

76
00:05:34,460 --> 00:05:37,370
then we have the margin again for the testimonial name,

77
00:05:37,370 --> 00:05:40,540
so this time we are in this class right here.

78
00:05:40,640 --> 00:05:46,020
Well I think we also change it to rem, so 3 pixels,

79
00:05:46,250 --> 00:05:50,710
this should be round about, 0.2rem like that

80
00:05:51,200 --> 00:05:54,680
and if we go further down, we have the testimonial subtitle,

81
00:05:54,680 --> 00:05:56,810
this is already changed so this is fine

82
00:05:57,020 --> 00:06:00,740
and in the end, we have the margin for testimonial text.

83
00:06:00,770 --> 00:06:09,710
Well I think we follow again our approach of applying 0.2rem right here, like that. With that, our CSS

84
00:06:09,710 --> 00:06:11,540
file is a lot more dynamic

85
00:06:11,540 --> 00:06:16,320
now, I talked about the image container that we might have to come back in the responsive part

86
00:06:16,610 --> 00:06:25,980
but generally if I reload the page now and change the font size to very large, let's see. We can see it's

87
00:06:25,980 --> 00:06:33,750
indeed large, the gap also increased but the general styling is ok in my opinion because now everything

88
00:06:33,750 --> 00:06:35,070
right here is more dynamic.

89
00:06:35,070 --> 00:06:36,840
The nav bar is also not fixed yet

90
00:06:36,840 --> 00:06:43,590
of course, we work on that throughout the course but generally, I think we achieved a lot so far just by adding

91
00:06:43,710 --> 00:06:46,720
this rem unit to our website right here.

92
00:06:46,860 --> 00:06:54,630
And with that, I am now handing over to you because now it's time for your challenge because we finished

93
00:06:54,780 --> 00:07:02,290
this customers part, at least from the rem perspective but we also have this packages page right here,

94
00:07:02,310 --> 00:07:06,900
this is the page you mainly created on your own. On this packages page,

95
00:07:06,930 --> 00:07:08,600
we have the same issue.

96
00:07:08,910 --> 00:07:16,260
If we go to our packages.css file right here, we can see that the padding is still pixels, we can

97
00:07:16,260 --> 00:07:20,910
see that the margin is still pixels, the border can remain as pixel,

98
00:07:20,910 --> 00:07:25,990
this is actually the same logic I explained when talking about the box shadow,

99
00:07:26,070 --> 00:07:27,490
so I wouldn't change the border

100
00:07:27,750 --> 00:07:31,300
but if you go through that side, you will find a lot of properties where

101
00:07:31,470 --> 00:07:36,680
it definitely makes sense to change them from pixels to the corresponding rem unit.

102
00:07:36,820 --> 00:07:43,020
Always keep in mind that the basic setting in the browser, so the default setting is 16 pixels,

103
00:07:43,020 --> 00:07:44,940
so 1rem is 16 pixels,

104
00:07:44,940 --> 00:07:49,780
this means for example for the padding top, you would apply 2rem right here.

105
00:07:50,190 --> 00:07:55,920
And with that, this is your chance to practice this rem unit,

106
00:07:55,950 --> 00:07:58,700
feel free to also apply em if you want to

107
00:07:58,710 --> 00:08:05,130
but as I said, I personally prefer rem to be honest and we'll also follow the rem approach throughout

108
00:08:05,130 --> 00:08:06,150
this course.

109
00:08:06,450 --> 00:08:09,810
And with that, I wish you good luck,

110
00:08:09,810 --> 00:08:11,040
have fun with rem,

111
00:08:11,040 --> 00:08:15,170
play around and in the next video, we'll have a look at it together.