1
00:00:02,260 --> 00:00:04,030
We finished a theory.

2
00:00:04,030 --> 00:00:06,510
Now it's time to apply media queries

3
00:00:06,510 --> 00:00:09,030
in practice in our project.

4
00:00:09,030 --> 00:00:10,580
As I mentioned earlier,

5
00:00:10,580 --> 00:00:12,690
please make sure to set the zoom level

6
00:00:12,690 --> 00:00:15,100
in your browser command on the Mac

7
00:00:15,100 --> 00:00:16,470
or control on Windows,

8
00:00:16,470 --> 00:00:21,470
and the plus or minus key on the keyboard to 100%.

9
00:00:21,490 --> 00:00:23,091
This makes it easier for you

10
00:00:23,091 --> 00:00:24,800
to follow along here

11
00:00:24,800 --> 00:00:27,070
and to have the exact same styling

12
00:00:27,070 --> 00:00:30,320
and layout that I have here in the video.

13
00:00:30,320 --> 00:00:31,640
With that out of the way,

14
00:00:31,640 --> 00:00:34,490
we can now focus onto the media queries.

15
00:00:34,490 --> 00:00:36,300
And I would like to get started

16
00:00:36,300 --> 00:00:39,890
with changing our grid layout here.

17
00:00:39,890 --> 00:00:41,920
At the moment if we again,

18
00:00:41,920 --> 00:00:43,800
check the width of our page,

19
00:00:43,800 --> 00:00:48,800
I'm here at a bit more than 1,500 pixels.

20
00:00:49,070 --> 00:00:51,620
If we think back about the breaking points

21
00:00:51,620 --> 00:00:53,820
that we had on the slide earlier,

22
00:00:53,820 --> 00:00:58,340
we saw that the breaking point at 768 pixels

23
00:00:58,340 --> 00:00:59,430
is a good one

24
00:00:59,430 --> 00:01:02,500
to make the differentiation between a landscape

25
00:01:02,500 --> 00:01:05,823
or the portrait way to display the website.

26
00:01:06,720 --> 00:01:08,050
For our example here,

27
00:01:08,050 --> 00:01:13,050
this would mean that going down to 768 pixels,

28
00:01:13,490 --> 00:01:16,363
so right here,

29
00:01:18,940 --> 00:01:19,950
this one,

30
00:01:19,950 --> 00:01:21,730
this would be the breaking point

31
00:01:21,730 --> 00:01:24,390
where we assume that users

32
00:01:24,390 --> 00:01:27,500
browse our website in portrait mode,

33
00:01:27,500 --> 00:01:31,070
using smartphones or tablets.

34
00:01:31,070 --> 00:01:32,380
Therefore right here,

35
00:01:32,380 --> 00:01:35,410
I would like to change the way our grid is displayed

36
00:01:35,410 --> 00:01:37,260
from the horizontal layout,

37
00:01:37,260 --> 00:01:39,060
so basically two columns

38
00:01:39,060 --> 00:01:40,550
to a vertical layout,

39
00:01:40,550 --> 00:01:42,203
so a single column only.

40
00:01:43,220 --> 00:01:45,150
This means what we need right here is

41
00:01:45,150 --> 00:01:46,640
we need a media query

42
00:01:46,640 --> 00:01:50,730
stating that starting from the desktop view,

43
00:01:50,730 --> 00:01:55,730
and coming down to a width of 768 pixels or less,

44
00:01:56,200 --> 00:01:58,763
well, the grid layout should change.

45
00:02:00,000 --> 00:02:02,430
Let's implement this together now.

46
00:02:02,430 --> 00:02:04,550
For this, we go back to the code

47
00:02:04,550 --> 00:02:07,890
and we add the media query here at the bottom

48
00:02:07,890 --> 00:02:10,150
of our CSS file.

49
00:02:10,150 --> 00:02:13,110
I'll come back to why this is not the worst idea

50
00:02:13,110 --> 00:02:14,760
in a few minutes.

51
00:02:14,760 --> 00:02:17,350
So, we'll first add the media query.

52
00:02:17,350 --> 00:02:20,520
So tell the browser that we want to gather information

53
00:02:20,520 --> 00:02:21,790
about the media,

54
00:02:21,790 --> 00:02:24,060
about the device our user is using,

55
00:02:24,060 --> 00:02:25,560
and the specifications

56
00:02:25,560 --> 00:02:27,993
with the @media command right here.

57
00:02:28,860 --> 00:02:31,350
Afterwards, we add deeper emphasis,

58
00:02:31,350 --> 00:02:32,330
and in there

59
00:02:32,330 --> 00:02:34,220
we should now decide if we want

60
00:02:34,220 --> 00:02:36,670
to have a min-width media query,

61
00:02:36,670 --> 00:02:38,763
or a max-width media query.

62
00:02:39,710 --> 00:02:42,510
As we are starting from the desktop device,

63
00:02:42,510 --> 00:02:44,340
we want to have a media query

64
00:02:44,340 --> 00:02:48,030
for a certain width and less.

65
00:02:48,030 --> 00:02:52,963
This means, we need the max-width keyword in here,

66
00:02:53,810 --> 00:02:54,643
this one.

67
00:02:56,600 --> 00:02:58,370
Afterwards, we add a colon

68
00:02:58,370 --> 00:03:00,430
and we now define this max-width

69
00:03:00,430 --> 00:03:02,070
so the limit basically,

70
00:03:02,070 --> 00:03:06,250
up to which point this property or these properties we add

71
00:03:06,250 --> 00:03:08,073
should be applied in our code.

72
00:03:09,000 --> 00:03:09,860
As I said,

73
00:03:09,860 --> 00:03:11,930
our breaking point

74
00:03:11,930 --> 00:03:15,720
should be 768 pixels.

75
00:03:15,720 --> 00:03:17,770
We'll soon change this to rem here,

76
00:03:17,770 --> 00:03:19,920
but I want to get started with the pixels

77
00:03:19,920 --> 00:03:22,973
to really focus on to the media query logic first.

78
00:03:24,150 --> 00:03:25,910
Afterwards, we add a space,

79
00:03:25,910 --> 00:03:29,690
and now we open and close the curly braces,

80
00:03:29,690 --> 00:03:32,300
and inside these curly braces now,

81
00:03:32,300 --> 00:03:33,800
we can start a new line.

82
00:03:33,800 --> 00:03:36,680
We now have to define the element,

83
00:03:36,680 --> 00:03:38,470
the class or the idea.

84
00:03:38,470 --> 00:03:41,310
So basically what part of the website

85
00:03:41,310 --> 00:03:44,760
this media query should be related to.

86
00:03:44,760 --> 00:03:45,710
In our case,

87
00:03:45,710 --> 00:03:48,840
if we check our CSS code,

88
00:03:48,840 --> 00:03:52,500
we see here that our ID with the latest products

89
00:03:52,500 --> 00:03:54,810
and in there, the unordered list

90
00:03:54,810 --> 00:03:57,340
has the grid applied.

91
00:03:57,340 --> 00:03:59,510
Well, it definitely should remain a grid.

92
00:03:59,510 --> 00:04:02,740
So this property will remain unchanged.

93
00:04:02,740 --> 00:04:05,310
But here the template columns,

94
00:04:05,310 --> 00:04:07,260
we don't need two columns here,

95
00:04:07,260 --> 00:04:09,560
we just need one single column.

96
00:04:09,560 --> 00:04:10,750
So this property

97
00:04:10,750 --> 00:04:13,350
and the corresponding value should be changed

98
00:04:13,350 --> 00:04:15,080
in the media query.

99
00:04:15,080 --> 00:04:17,579
The gap by the way, can remain in here.

100
00:04:17,579 --> 00:04:20,920
If we turn this into a single column grid,

101
00:04:20,920 --> 00:04:23,550
the gap code here will no longer be active,

102
00:04:23,550 --> 00:04:25,620
because well which gap should it create?

103
00:04:25,620 --> 00:04:28,600
There is no gap if you only have a single column.

104
00:04:28,600 --> 00:04:31,127
Therefore, we now go down to our media query

105
00:04:31,127 --> 00:04:33,950
and copy the selector here,

106
00:04:33,950 --> 00:04:36,023
including the unordered list.

107
00:04:37,560 --> 00:04:39,990
And now simply paste this.

108
00:04:39,990 --> 00:04:41,948
Now add a space and again,

109
00:04:41,948 --> 00:04:43,770
the curly braces,

110
00:04:43,770 --> 00:04:46,010
and in there we now add the property

111
00:04:46,010 --> 00:04:48,060
that should be changed in the media query.

112
00:04:48,060 --> 00:04:50,927
This is our grid template columns property,

113
00:04:50,927 --> 00:04:53,330
and this should be changed to well,

114
00:04:53,330 --> 00:04:56,117
one fraction or simply 100%

115
00:04:56,117 --> 00:05:00,479
of the available space that we have inside our grid.

116
00:05:00,479 --> 00:05:02,760
With this change in place

117
00:05:02,760 --> 00:05:04,160
we should save this of course,

118
00:05:04,160 --> 00:05:06,133
and go back to the project.

119
00:05:08,800 --> 00:05:09,823
We see,

120
00:05:11,130 --> 00:05:12,470
that now,

121
00:05:12,470 --> 00:05:14,500
once we hit our breaking point here

122
00:05:14,500 --> 00:05:17,240
that the grid column changes.

123
00:05:17,240 --> 00:05:20,550
And we can also see this inside our code.

124
00:05:20,550 --> 00:05:23,540
If we go into the main element

125
00:05:25,140 --> 00:05:27,070
section,

126
00:05:27,070 --> 00:05:29,030
and here the unordered list,

127
00:05:29,030 --> 00:05:32,350
you see that at the moment if we are equal to

128
00:05:32,350 --> 00:05:34,340
or below our breaking point,

129
00:05:34,340 --> 00:05:39,214
that the grid template columns 100% property is applied.

130
00:05:39,214 --> 00:05:41,450
But if I increase the width,

131
00:05:41,450 --> 00:05:45,470
we jump back to our well two fractions layout

132
00:05:45,470 --> 00:05:48,433
that we initially created for the desktop site.

133
00:05:50,850 --> 00:05:52,603
If we would go back,

134
00:05:53,630 --> 00:05:57,130
and change this from max-width to min-width,

135
00:05:57,130 --> 00:05:58,543
what would happen then?

136
00:05:59,460 --> 00:06:01,370
Well, let's find it out.

137
00:06:01,370 --> 00:06:03,280
Let's go back to the website,

138
00:06:03,280 --> 00:06:04,290
and there you see

139
00:06:04,290 --> 00:06:05,810
by adding min-width,

140
00:06:05,810 --> 00:06:08,680
we have the actual mobile layout

141
00:06:08,680 --> 00:06:10,680
for the desktop site.

142
00:06:10,680 --> 00:06:15,680
And if we go below our defined breaking point of 768 pixels,

143
00:06:16,130 --> 00:06:18,970
then the desktop design kicks in.

144
00:06:18,970 --> 00:06:20,649
Again, because the max-width

145
00:06:20,649 --> 00:06:24,130
is used if you go from desktop to mobile.

146
00:06:24,130 --> 00:06:28,570
So you say for this breaking points and lower values,

147
00:06:28,570 --> 00:06:31,700
I want to apply certain styles in the media query,

148
00:06:31,700 --> 00:06:33,070
for the min-width you say,

149
00:06:33,070 --> 00:06:34,664
I'm starting from the mobile view

150
00:06:34,664 --> 00:06:38,010
and for this breaking point and higher values,

151
00:06:38,010 --> 00:06:40,810
I want to apply a certain style.

152
00:06:40,810 --> 00:06:44,800
We want to apply our mobile style for

153
00:06:45,710 --> 00:06:48,280
certain values starting from the desktop world,

154
00:06:48,280 --> 00:06:50,450
therefore we'll go back to max-width

155
00:06:50,450 --> 00:06:52,223
to make this work correctly.

156
00:06:53,600 --> 00:06:55,370
Another thing I wanted to mention

157
00:06:55,370 --> 00:06:58,860
is the position of the media queries in here.

158
00:06:58,860 --> 00:07:01,900
You do not have to position this at the

159
00:07:01,900 --> 00:07:04,710
bottom of the page as I recommended right here,

160
00:07:04,710 --> 00:07:08,000
but it's important that the media queries are positioned

161
00:07:08,000 --> 00:07:10,060
below the initial code you wrote

162
00:07:10,060 --> 00:07:10,910
for the mobile,

163
00:07:10,910 --> 00:07:13,273
or here in our case for the desktop site.

164
00:07:14,370 --> 00:07:16,950
Because if we take this code now

165
00:07:16,950 --> 00:07:18,290
and cut it,

166
00:07:18,290 --> 00:07:21,140
and position it for example, here

167
00:07:21,140 --> 00:07:22,860
ahead of our main header,

168
00:07:22,860 --> 00:07:24,803
like this and save this.

169
00:07:25,850 --> 00:07:27,850
By going back to the website now

170
00:07:27,850 --> 00:07:30,630
you see that if we play around,

171
00:07:30,630 --> 00:07:35,130
well, the media query doesn't have any effect.

172
00:07:35,130 --> 00:07:36,503
Why is this the case?

173
00:07:37,350 --> 00:07:41,860
Well, don't forget about the cascading nature of CSS.

174
00:07:41,860 --> 00:07:43,970
This means in here in the code,

175
00:07:43,970 --> 00:07:45,770
we first have the media query.

176
00:07:45,770 --> 00:07:46,603
Okay?

177
00:07:46,603 --> 00:07:47,690
Then the browser understands

178
00:07:47,690 --> 00:07:49,840
that this media query should be active,

179
00:07:49,840 --> 00:07:51,410
but afterwards,

180
00:07:51,410 --> 00:07:55,600
we actually have our initial definition of the layout here,

181
00:07:55,600 --> 00:07:56,670
this code.

182
00:07:56,670 --> 00:07:59,070
This means this code gets executed,

183
00:07:59,070 --> 00:07:59,903
as I said,

184
00:07:59,903 --> 00:08:01,550
due to the cascading nature,

185
00:08:01,550 --> 00:08:03,910
so the code is read top to bottom.

186
00:08:03,910 --> 00:08:07,423
Therefore, well the media query doesn't have any effect.

187
00:08:08,450 --> 00:08:10,733
If we go back to our media query though,

188
00:08:11,950 --> 00:08:13,860
cut it from here,

189
00:08:13,860 --> 00:08:15,280
and position it

190
00:08:16,650 --> 00:08:19,850
below our latest products unordered list.

191
00:08:19,850 --> 00:08:21,700
Then of course the style would work

192
00:08:21,700 --> 00:08:24,050
because here we defined the desktop style,

193
00:08:24,050 --> 00:08:25,570
and in the media query,

194
00:08:25,570 --> 00:08:28,830
we define a certain breaking point, in here

195
00:08:28,830 --> 00:08:31,340
and say if this rule is active,

196
00:08:31,340 --> 00:08:35,850
then please apply the following property value combination.

197
00:08:35,850 --> 00:08:36,683
So in the website now,

198
00:08:36,683 --> 00:08:37,890
if we go back,

199
00:08:37,890 --> 00:08:39,809
the CSS rule is applied.

200
00:08:39,809 --> 00:08:42,289
So the media query is working.

201
00:08:44,140 --> 00:08:47,490
This was the first step about media queries.

202
00:08:47,490 --> 00:08:49,000
What we can do now of course is,

203
00:08:49,000 --> 00:08:50,560
we can position it back

204
00:08:50,560 --> 00:08:53,230
at the bottom of the page in here,

205
00:08:53,230 --> 00:08:56,040
just to have it organized in a better way.

206
00:08:56,040 --> 00:08:56,873
And with that,

207
00:08:56,873 --> 00:09:00,600
we can continue and see what else can we do now,

208
00:09:00,600 --> 00:09:02,960
when it comes to our mobile design.

209
00:09:02,960 --> 00:09:04,240
Because at the moment,

210
00:09:04,240 --> 00:09:05,490
if we decrease the width,

211
00:09:05,490 --> 00:09:07,830
we have this different grid layout,

212
00:09:07,830 --> 00:09:09,623
but we have more things to do.

213
00:09:10,460 --> 00:09:12,770
For example, the navigation bar up here,

214
00:09:12,770 --> 00:09:15,560
this doesn't look as intended right now.

215
00:09:15,560 --> 00:09:18,003
Therefore there are more things to change here.