1
00:00:02,330 --> 00:00:06,090
We added our first media query to the project.

2
00:00:06,090 --> 00:00:07,460
Now it's your turn.

3
00:00:07,460 --> 00:00:11,310
It's time for the next little challenge, in this challenge,

4
00:00:11,310 --> 00:00:15,172
I want you to change three different properties

5
00:00:15,172 --> 00:00:17,493
in our existing media query.

6
00:00:18,630 --> 00:00:23,630
The first change I would like you to apply is the font size

7
00:00:23,830 --> 00:00:28,200
of our H one element up here, in the mobile view,

8
00:00:28,200 --> 00:00:32,720
the font size should be set to one dot five REM.

9
00:00:32,720 --> 00:00:35,310
This is your first task.

10
00:00:35,310 --> 00:00:39,520
Your second task is related to the NAV elements up here.

11
00:00:39,520 --> 00:00:43,400
So this lists items in the ad, in the desktop view,

12
00:00:43,400 --> 00:00:45,240
these should of course be visible,

13
00:00:45,240 --> 00:00:47,360
but once we enter the mobile view,

14
00:00:47,360 --> 00:00:50,660
so the current view we have here in our media query,

15
00:00:50,660 --> 00:00:52,460
then these items,

16
00:00:52,460 --> 00:00:55,236
these elements should not be visible anymore.

17
00:00:55,236 --> 00:00:57,500
This is your second task.

18
00:00:57,500 --> 00:01:00,634
So think about the property you have to use right here.

19
00:01:00,634 --> 00:01:04,450
And finally, the third task is just a little one.

20
00:01:04,450 --> 00:01:08,710
This is related to the value used for the max

21
00:01:08,710 --> 00:01:11,450
width here in our media theory.

22
00:01:11,450 --> 00:01:16,376
At the moment we used a pixel value here, 768 pixels.

23
00:01:16,376 --> 00:01:21,376
I want you to change this to REM, based on the assumption

24
00:01:21,400 --> 00:01:22,517
that the user,

25
00:01:22,517 --> 00:01:26,579
so the person browsing our website is using the default

26
00:01:26,579 --> 00:01:29,960
settings for the font size that we learned about throughout

27
00:01:29,960 --> 00:01:31,770
this module.

28
00:01:31,770 --> 00:01:33,610
Good luck with this little challenge.

29
00:01:33,610 --> 00:01:37,170
Now is the time for you to pause this video and then we'll

30
00:01:37,170 --> 00:01:38,793
solve this together.

31
00:01:43,630 --> 00:01:45,960
How did it go, very successful?

32
00:01:45,960 --> 00:01:49,800
Well, let's have a look at this task together now.

33
00:01:49,800 --> 00:01:53,470
I want to get started with the H one element up here.

34
00:01:53,470 --> 00:01:54,303
This one,

35
00:01:55,460 --> 00:01:56,293
here,

36
00:01:56,293 --> 00:01:59,670
we simply have to add this element to our existing media

37
00:01:59,670 --> 00:02:03,590
theory and set a new value for the font size.

38
00:02:03,590 --> 00:02:06,230
At the moment, if we click the inspectors,

39
00:02:06,230 --> 00:02:10,210
we see that we have used the main H one selector here and

40
00:02:10,210 --> 00:02:12,750
set the font size to free REM.

41
00:02:12,750 --> 00:02:16,010
So we can go back to our code actually,

42
00:02:16,010 --> 00:02:18,873
and scroll up to this selector,

43
00:02:18,873 --> 00:02:20,193
here we got it.

44
00:02:21,180 --> 00:02:22,013
Now,

45
00:02:22,013 --> 00:02:26,290
copy this and go down to our media query that we created.

46
00:02:26,290 --> 00:02:29,754
And now in here, where do we add this selector?

47
00:02:29,754 --> 00:02:30,860
Well,

48
00:02:30,860 --> 00:02:34,680
theoretically we can add it below our initial selector that

49
00:02:34,680 --> 00:02:37,030
we have, so have a look at the structure.

50
00:02:37,030 --> 00:02:40,190
We have the first curly braces right here,

51
00:02:40,190 --> 00:02:41,969
opening one and closing one.

52
00:02:41,969 --> 00:02:45,470
Then we have the first selector with the corresponding CSS

53
00:02:45,470 --> 00:02:49,160
code in there, and now no semi-colon or anything like that.

54
00:02:49,160 --> 00:02:51,800
We just add a space, an empty line.

55
00:02:51,800 --> 00:02:53,249
And now at the second selector,

56
00:02:53,249 --> 00:02:56,473
and here we could start with the curly braces again,

57
00:02:57,500 --> 00:03:01,430
as I want to be in line with core CSS logic in the core

58
00:03:01,430 --> 00:03:05,490
store where we have the CSS code starting from top to bottom

59
00:03:05,490 --> 00:03:09,510
in line with the order of the elements in the HTML file.

60
00:03:09,510 --> 00:03:14,510
I will now take this code, cut it, and add it ahead of the

61
00:03:14,650 --> 00:03:16,460
second selector here.

62
00:03:16,460 --> 00:03:19,390
So like this, and let's quickly format this maybe,

63
00:03:19,390 --> 00:03:22,600
to have more structure and add this empty line here

64
00:03:22,600 --> 00:03:26,190
once again, and now in the selector,

65
00:03:26,190 --> 00:03:27,993
we'll add the font,

66
00:03:28,830 --> 00:03:33,573
size property and change it to one dot five REM.

67
00:03:36,020 --> 00:03:37,833
With this change in place,

68
00:03:39,040 --> 00:03:40,300
we should be able

69
00:03:42,090 --> 00:03:45,360
to see the new font size in practice, yes,

70
00:03:45,360 --> 00:03:47,500
there it is, now we have it smaller.

71
00:03:47,500 --> 00:03:48,890
If we increase the width,

72
00:03:48,890 --> 00:03:53,113
we have the old bigger one for the desktop view.

73
00:03:53,960 --> 00:03:58,042
Task one solved, what about task two now?

74
00:03:58,042 --> 00:04:00,960
Well, task two was a bit more complex,

75
00:04:00,960 --> 00:04:05,960
but nothing you can't do, the navigation items or the list

76
00:04:06,410 --> 00:04:10,460
items actually should be hidden in the mobile view.

77
00:04:10,460 --> 00:04:14,513
If we go to our header and check the code,

78
00:04:15,490 --> 00:04:16,680
we know that the

79
00:04:17,790 --> 00:04:19,029
list items.

80
00:04:19,029 --> 00:04:20,399
So these two items here,

81
00:04:20,399 --> 00:04:25,100
which contain the anchor text with the dummy links are part

82
00:04:25,100 --> 00:04:28,794
of an algorithm list and off the NAV element in the end.

83
00:04:28,794 --> 00:04:31,040
So we could, you know, of course hide

84
00:04:31,040 --> 00:04:32,950
the individual list items,

85
00:04:32,950 --> 00:04:36,120
but wouldn't it be easier to simply say that in the mobile

86
00:04:36,120 --> 00:04:40,167
view, the NAV element here should not be visible anymore.

87
00:04:40,167 --> 00:04:42,440
If we click onto the NAV element,

88
00:04:42,440 --> 00:04:46,670
we also see how we can achieve this, by default,

89
00:04:46,670 --> 00:04:50,280
our browser applies to display block property

90
00:04:50,280 --> 00:04:51,800
to this element.

91
00:04:51,800 --> 00:04:56,090
So if we change this play block to this play non, well,

92
00:04:56,090 --> 00:04:59,670
this would make this element invisible, and with that,

93
00:04:59,670 --> 00:05:02,251
the second task would be solved.

94
00:05:02,251 --> 00:05:03,830
So back in the code,

95
00:05:03,830 --> 00:05:08,510
we can quickly check if we have a dedicated selector

96
00:05:08,510 --> 00:05:12,140
for the NAV element in here, because I think we do, yes,

97
00:05:12,140 --> 00:05:16,140
we use the main header ID and then the NAV element.

98
00:05:16,140 --> 00:05:20,693
So we can also select this right here and copy it.

99
00:05:20,693 --> 00:05:23,580
Then go down to the bottom.

100
00:05:23,580 --> 00:05:27,430
And here I'll add the rule now ahead of the H one element as

101
00:05:27,430 --> 00:05:29,830
the page starts with the header, of course.

102
00:05:29,830 --> 00:05:33,980
So we have to select, or now again to curly braces,

103
00:05:33,980 --> 00:05:38,980
and now we enter the display property and set it to none.

104
00:05:39,271 --> 00:05:43,420
With this, once our media queries active,

105
00:05:43,420 --> 00:05:45,210
the NAV element,

106
00:05:45,210 --> 00:05:48,420
and therefore also the list items should not be visible

107
00:05:48,420 --> 00:05:52,860
anymore, let's see, yes, this is working.

108
00:05:52,860 --> 00:05:55,770
Now we have no navigation bar in the mobile view,

109
00:05:55,770 --> 00:05:58,190
not the final solution obviously, but,

110
00:05:58,190 --> 00:06:02,550
and we have the desktop navigation bar only in desktop mode.

111
00:06:02,550 --> 00:06:04,613
So this task is also solved.

112
00:06:06,030 --> 00:06:09,780
The last task was changing the pixel value in the media

113
00:06:09,780 --> 00:06:13,860
query, well from the pixel value to REM,

114
00:06:13,860 --> 00:06:14,750
as I said,

115
00:06:14,750 --> 00:06:18,960
we assume that the user takes the default font size

116
00:06:18,960 --> 00:06:20,463
in the browser that's given,

117
00:06:21,410 --> 00:06:24,880
this default font size is 16 pixels.

118
00:06:24,880 --> 00:06:25,713
Therefore,

119
00:06:25,713 --> 00:06:28,712
if we take the 768 pixels

120
00:06:28,712 --> 00:06:30,320
and divide it

121
00:06:30,320 --> 00:06:32,667
by this default value of 16 pixels,

122
00:06:32,667 --> 00:06:35,600
we arrive at the correct REM value

123
00:06:35,600 --> 00:06:37,160
we should apply right here.

124
00:06:37,160 --> 00:06:38,210
7, 6, 8

125
00:06:38,210 --> 00:06:40,450
divided by 16

126
00:06:40,450 --> 00:06:41,690
is 48.

127
00:06:41,690 --> 00:06:45,333
Therefore 48 is our missing value here.

128
00:06:46,570 --> 00:06:50,760
Let's implement this quickly for the max width value.

129
00:06:50,760 --> 00:06:52,180
So 48

130
00:06:52,180 --> 00:06:53,180
REM

131
00:06:54,513 --> 00:06:57,570
and with this, nothing should change in here.

132
00:06:57,570 --> 00:07:01,030
Let's see if the breaking point is still working.

133
00:07:01,030 --> 00:07:02,963
Yeah, this looks good.

134
00:07:04,140 --> 00:07:06,325
So with this, we solved this task,

135
00:07:06,325 --> 00:07:08,440
I hope you were successful.

136
00:07:08,440 --> 00:07:13,010
And we also finished our core concepts related

137
00:07:13,010 --> 00:07:17,720
to media queries here, what you're not done with yet though,

138
00:07:17,720 --> 00:07:22,230
is learning about responsive design because our mobile view

139
00:07:22,230 --> 00:07:24,160
here looks better, I guess,

140
00:07:24,160 --> 00:07:26,310
but there is one important thing missing.

141
00:07:26,310 --> 00:07:30,370
If we, again, look at the target structure,

142
00:07:30,370 --> 00:07:33,370
the target look and layout of this website,

143
00:07:33,370 --> 00:07:35,060
which I have right here.

144
00:07:35,060 --> 00:07:38,820
Then we see some minor issues with the height of the cards,

145
00:07:38,820 --> 00:07:40,987
but nothing that really bothers me,

146
00:07:40,987 --> 00:07:43,110
but in the finished result,

147
00:07:43,110 --> 00:07:45,510
we have this hamburger icon up here.

148
00:07:45,510 --> 00:07:47,750
And if we click onto this icon,

149
00:07:47,750 --> 00:07:51,430
then we have the two navigation options right there.

150
00:07:51,430 --> 00:07:55,371
If we, again, click the hamburger icon, the icon is gone,

151
00:07:55,371 --> 00:07:58,628
and this is something we also have to implement.

152
00:07:58,628 --> 00:08:03,628
This means we have to learn more concepts about responsive

153
00:08:03,920 --> 00:08:05,703
design as a next step.