1
00:00:00,460 --> 00:00:01,310
Welcome back.

2
00:00:01,960 --> 00:00:07,510
In this lesson, we're going to be discussing how to write media queries with says so we're going to

3
00:00:07,510 --> 00:00:11,850
go back to our Lakeview project for this and we are going to make it responsive.

4
00:00:12,250 --> 00:00:15,340
But this time we're going to be using SACE media queries.

5
00:00:16,150 --> 00:00:17,300
Now, what do I mean by that?

6
00:00:17,860 --> 00:00:22,240
So if you remember, this is the Digitas Project's media queries that we had written.

7
00:00:22,480 --> 00:00:27,360
We had created a separate access file that we had written all the media queries in one place.

8
00:00:27,670 --> 00:00:28,150
All right.

9
00:00:28,480 --> 00:00:29,890
And we had written it like this.

10
00:00:30,070 --> 00:00:37,090
We had written Adric media grade as the media directive and specified different max width for different

11
00:00:37,090 --> 00:00:37,960
devices.

12
00:00:38,650 --> 00:00:46,600
And within each of these media queries, we gave all the required settings or all the required properties

13
00:00:46,600 --> 00:00:47,200
that we needed.

14
00:00:48,150 --> 00:00:56,190
OK, so we wanted this class to have this property for this media gallery, for this device, we wanted

15
00:00:56,190 --> 00:01:00,290
this class to have this property and this class to have these properties.

16
00:01:00,780 --> 00:01:03,870
So we had put everything into one page.

17
00:01:04,870 --> 00:01:07,890
But when you're using SAS, you could do this.

18
00:01:08,460 --> 00:01:12,810
But it's better if you use make sense for it.

19
00:01:13,270 --> 00:01:15,270
OK, and why do I say that?

20
00:01:15,630 --> 00:01:20,460
It's because then it makes it more relevant to your cell structure.

21
00:01:20,460 --> 00:01:25,790
Your cell structure is made in such a way that your website is scalable.

22
00:01:25,800 --> 00:01:27,160
It's easily editable.

23
00:01:27,540 --> 00:01:34,180
And so it's better if you have if you include it into all your other SACE stylesheets.

24
00:01:34,200 --> 00:01:37,260
OK, because again, you want it all to come inside.

25
00:01:37,260 --> 00:01:40,290
Your CSIR ultimately compiles this file.

26
00:01:40,320 --> 00:01:41,700
OK, so let me just show you.

27
00:01:42,880 --> 00:01:44,740
Let's go back to our Lakeview.

28
00:01:46,470 --> 00:01:49,710
So this is the fast folder and you have all your source files in this.

29
00:01:50,190 --> 00:01:50,760
All right.

30
00:01:52,280 --> 00:01:53,930
Let's go into the base.

31
00:01:55,130 --> 00:02:01,520
This is where we start and the base font size for the whole document is given us sixty two point five

32
00:02:01,520 --> 00:02:07,550
percent because we wanted one ram to be equal to 10 pixels for this whole document.

33
00:02:08,030 --> 00:02:14,030
And the purpose for putting this for putting this percentage and specifying everything in RAM was,

34
00:02:14,030 --> 00:02:22,820
if you remember, is because we wanted this whole website to be easily responsive so that just by changing

35
00:02:22,820 --> 00:02:29,150
the font size for the different devices, for the different media queries, I can change the sizes of

36
00:02:29,150 --> 00:02:30,560
everything accordingly.

37
00:02:31,370 --> 00:02:38,030
So if I want, let's say A for a device which has a screen width of, let's see, nine hundred pixels,

38
00:02:38,450 --> 00:02:44,720
nine hundred to twelve hundred pixels is for landscape tablets, OK, tablets which are in landscape

39
00:02:44,720 --> 00:02:46,550
format which are in landscape.

40
00:02:47,380 --> 00:02:54,610
So for that, what I would do is I would write the media query like this, I would write at let me just

41
00:02:54,610 --> 00:02:55,180
copy this.

42
00:02:55,980 --> 00:02:57,780
OK, I would say this one, OK.

43
00:03:00,610 --> 00:03:01,510
So I would say.

44
00:03:02,740 --> 00:03:10,330
At media only screen and Max with one thousand twenty three pixels and inside this, I would say I want

45
00:03:10,330 --> 00:03:11,290
the font size.

46
00:03:14,560 --> 00:03:15,100
To be.

47
00:03:16,210 --> 00:03:17,440
How much, let's see.

48
00:03:19,030 --> 00:03:19,750
Fifty percent.

49
00:03:23,910 --> 00:03:26,790
OK, so this is how I would typically put the media away.

50
00:03:26,820 --> 00:03:28,170
You could do it both ways.

51
00:03:28,170 --> 00:03:34,290
You could either create a whole file access file and put all the media queries in it, or you could

52
00:03:34,290 --> 00:03:38,880
provide the media queries within each of the relevant selectors.

53
00:03:39,820 --> 00:03:46,690
And I think if you have larger files, this is a better way to design your stylesheets because then

54
00:03:46,690 --> 00:03:51,610
everything is there in one place, you don't have to go to the media file and then see if there is something

55
00:03:51,970 --> 00:03:56,860
for, let's say, for the HTML selector or for some other class selector.

56
00:03:57,130 --> 00:03:59,510
You don't have to separately go over here and find out if it's there.

57
00:03:59,920 --> 00:04:01,600
There is a media query for selector.

58
00:04:01,600 --> 00:04:03,490
It'll be inside the selector itself.

59
00:04:03,820 --> 00:04:11,110
But the disadvantage of that is if at some point you decide that you don't want this breakpoint to be

60
00:04:11,110 --> 00:04:15,520
one thousand twenty three pixels, you want this breakpoint to be one thousand pixels.

61
00:04:16,480 --> 00:04:17,780
So then what will you have to do?

62
00:04:17,920 --> 00:04:20,860
You will be having probably a media queries in lots of places.

63
00:04:20,860 --> 00:04:22,750
You'll be having a media query in the body.

64
00:04:23,020 --> 00:04:25,420
You'll probably have a media query inside.

65
00:04:25,450 --> 00:04:28,150
Let's say you have a media query inside the button file.

66
00:04:28,450 --> 00:04:33,720
You have another media query for the same device inside, let's say the contact file.

67
00:04:33,940 --> 00:04:37,450
So you have so many files with this media query.

68
00:04:37,450 --> 00:04:41,020
And so you have to go to all these places everywhere.

69
00:04:41,020 --> 00:04:49,090
You have a media query for this device and then change the pixel value from 1023, the unit, I mean

70
00:04:49,090 --> 00:04:51,770
the required value from one thousand twenty three.

71
00:04:51,770 --> 00:04:53,670
You'll have to change it to 1000 everywhere.

72
00:04:54,430 --> 00:04:56,350
So that's going to be really tiresome.

73
00:04:56,350 --> 00:05:00,350
And that sort of goes against the whole idea of SAS, right?

74
00:05:00,370 --> 00:05:02,140
I mean, what's the purpose of using SAS?

75
00:05:02,620 --> 00:05:07,000
You want your program to be scalable, easily scalable, easily editable.

76
00:05:07,510 --> 00:05:09,400
You want it to be nicely organised.

77
00:05:09,790 --> 00:05:16,360
So if you have to change a value, one small value, if you have to go to thousands of places to change

78
00:05:16,360 --> 00:05:18,490
it, that actually serves no purpose.

79
00:05:18,500 --> 00:05:18,740
Right.

80
00:05:19,300 --> 00:05:29,590
So that's why a better way to use media queries is by using or taking advantage of a very good SAS concept,

81
00:05:29,590 --> 00:05:30,580
which is the mix.

82
00:05:31,120 --> 00:05:36,130
So if you can use makes sense for media queries, you're going to make things much, much easier and

83
00:05:36,130 --> 00:05:37,810
it's going to make things much more practical.

84
00:05:37,810 --> 00:05:38,730
And I'll show you how.

85
00:05:39,220 --> 00:05:41,800
So let's just go into our mix and file.

86
00:05:47,150 --> 00:05:51,720
And we're here, let's define a mix in for our media queries, right?

87
00:05:53,250 --> 00:05:54,990
We're going to call this mixin.

88
00:05:56,990 --> 00:05:57,710
We call it.

89
00:05:59,240 --> 00:06:05,510
Respond, OK, because he's going to respond or make it make our website responsive.

90
00:06:05,540 --> 00:06:07,330
OK, so we're going to respond.

91
00:06:08,380 --> 00:06:13,150
And then you can define whatever you need to and say this, all right, before we start creating the

92
00:06:13,150 --> 00:06:13,580
mixin.

93
00:06:13,870 --> 00:06:17,770
Let me first write down what are the different break points that we will be using?

94
00:06:18,220 --> 00:06:22,510
The break points usually like before we use these break points.

95
00:06:22,510 --> 00:06:22,700
Right.

96
00:06:22,720 --> 00:06:25,240
We had used one thousand two hundred for our source project.

97
00:06:25,250 --> 00:06:31,360
We had used one thousand two hundred one thousand twenty three pixels for larger tablet screens than

98
00:06:31,360 --> 00:06:35,200
seven hundred and sixty eight for smaller screens, etc..

99
00:06:35,200 --> 00:06:36,730
A better way of doing it.

100
00:06:36,740 --> 00:06:39,130
This was actually just based on the theory.

101
00:06:39,130 --> 00:06:39,430
Right.

102
00:06:39,880 --> 00:06:42,130
But devices are always changing.

103
00:06:42,430 --> 00:06:49,480
Each year there are newer iPhones, there are Android phones and each device has a different screen

104
00:06:49,480 --> 00:06:49,780
with.

105
00:06:50,470 --> 00:06:50,830
Right.

106
00:06:51,190 --> 00:06:52,690
So then how do you keep up?

107
00:06:52,720 --> 00:06:53,470
You have to keep up.

108
00:06:53,470 --> 00:06:53,760
Right.

109
00:06:54,340 --> 00:06:58,450
So what we do for that is go online, do a quick Google search.

110
00:06:59,410 --> 00:07:02,470
We can see success, breakpoints.

111
00:07:03,480 --> 00:07:09,390
Let's see what big points, twenty, twenty one and you get.

112
00:07:10,340 --> 00:07:16,550
Usually the first website is good enough to give you quite authoritative websites where you have websites

113
00:07:16,550 --> 00:07:19,310
which have good authority over the keyword that you type.

114
00:07:19,670 --> 00:07:22,400
So this is going to be good enough.

115
00:07:22,710 --> 00:07:27,780
OK, so you can use these breakpoints for your design.

116
00:07:28,100 --> 00:07:29,330
These are going to be the latest ones.

117
00:07:29,660 --> 00:07:32,120
So let me just copy this into my file.

118
00:07:51,980 --> 00:07:58,550
So we have zero to five hundred seventy six seventy six pixels for portrait phones, then we have five

119
00:07:58,550 --> 00:08:05,320
hundred and seventy seven to seven hundred and sixty eight pixels for tablets.

120
00:08:05,630 --> 00:08:07,630
OK, and there's something missing over here.

121
00:08:07,670 --> 00:08:10,370
This is for tablets that are in portrait mode, OK.

122
00:08:10,820 --> 00:08:16,700
And we also need one for tablets that are in landscape mode.

123
00:08:17,210 --> 00:08:22,710
So we'll see tablets in landscape mode.

124
00:08:22,770 --> 00:08:31,370
OK, and that will be seven hundred and sixty nine pixels to around nine hundred and ninety one pixels.

125
00:08:33,900 --> 00:08:34,370
OK.

126
00:08:35,800 --> 00:08:42,380
After that, nine hundred and ninety two pixels on words were left off 10 or 20 to two, we'll see still

127
00:08:42,400 --> 00:08:44,560
around twelve hundred pixels for laptops.

128
00:08:45,800 --> 00:08:52,490
And finally, there's one more device that you can take into account, and that is devices which are

129
00:08:52,940 --> 00:08:57,020
bigger screens, you know, desktop monitors, which are larger in size.

130
00:08:57,050 --> 00:09:00,090
So these have around more than eighteen hundred pixels, actually.

131
00:09:00,740 --> 00:09:02,090
So we'll do this.

132
00:09:02,090 --> 00:09:04,850
Nine hundred ninety two to eight hundred.

133
00:09:06,000 --> 00:09:07,320
OK, we'll just do this, OK?

134
00:09:07,680 --> 00:09:11,910
All right, and now let's start devising our mixin.

135
00:09:12,870 --> 00:09:17,190
First of all, no, how do you create this mix mixing is going to be a little bit different from the

136
00:09:17,190 --> 00:09:19,290
usual remixing that we've been writing so far.

137
00:09:20,010 --> 00:09:26,100
One thing you need to know is mixing can also have values passed to them so they can even have parameters

138
00:09:26,100 --> 00:09:26,960
just like functions.

139
00:09:26,970 --> 00:09:30,340
So you can put these brackets here and you can pass any parameter.

140
00:09:30,630 --> 00:09:33,930
So let's say we'll call the parameter for this mix in breakpoint.

141
00:09:34,290 --> 00:09:39,000
So wherever you're going to be, including this mixin, you're going to be passing a breakpoint value

142
00:09:39,000 --> 00:09:39,230
there.

143
00:09:39,510 --> 00:09:40,020
All right.

144
00:09:40,170 --> 00:09:47,630
And that breakpoint value will be the text value, which will contain the device that you want to give

145
00:09:47,640 --> 00:09:54,180
the military for those breakpoint parameters and let's say, have different values that can have maybe

146
00:09:55,020 --> 00:09:56,190
a value like phone.

147
00:09:56,430 --> 00:10:02,270
OK, these are all text values, string values, or you can have a value for tablet phones.

148
00:10:02,280 --> 00:10:06,510
It's going to have a value of tableful, let's say a d'abord.

149
00:10:07,910 --> 00:10:17,780
Because tablet in portrait mode and or you can have tablet in landscape mode or you can have big desktop,

150
00:10:18,530 --> 00:10:20,900
so you can have these kinds of different device names.

151
00:10:21,410 --> 00:10:26,410
She can have portrait the device sizes between zero to five hundred seventy six pixels.

152
00:10:26,720 --> 00:10:32,930
It's going to be a portrait for five hundred and seventy seven to 768 pixels, tablet and portrait mode.

153
00:10:33,140 --> 00:10:39,310
If it's between 769 and 991, that is going to be a tablet in landscape mode if it is between.

154
00:10:39,620 --> 00:10:42,320
You don't need this because we already create.

155
00:10:42,320 --> 00:10:44,510
This is a desktop first approach, right?

156
00:10:44,540 --> 00:10:45,820
This is a desktop first website.

157
00:10:45,830 --> 00:10:47,930
So we've already designed the whole thing for the website.

158
00:10:47,930 --> 00:10:51,290
So we don't need a media query for this breakpoint.

159
00:10:51,740 --> 00:10:57,230
And if it is above twelve hundred pixels, then it's going to be then the breakpoint variable is going

160
00:10:57,230 --> 00:10:59,240
to have the value of big desktop.

161
00:10:59,990 --> 00:11:06,740
OK, so what we can do is inside McKesson's or inside SACE, we can also use something called an if

162
00:11:06,740 --> 00:11:12,980
DirecTV and if DirecTV is something like an if statement or a condition where you can compare values.

163
00:11:13,010 --> 00:11:15,170
OK, so if you can say if.

164
00:11:16,140 --> 00:11:17,220
Breakpoint.

165
00:11:18,370 --> 00:11:20,950
The point is, this variable here, this parameter here, OK?

166
00:11:21,190 --> 00:11:22,690
So if this so this one.

167
00:11:23,820 --> 00:11:25,290
So if this breakpoint.

168
00:11:27,090 --> 00:11:30,720
Foon, the breakpoint has the value Foon then.

169
00:11:31,840 --> 00:11:32,590
What are we going to do?

170
00:11:32,890 --> 00:11:34,670
We're going to have a media gallery over here.

171
00:11:35,140 --> 00:11:39,370
Similarly, if the breakpoint has a value.

172
00:11:40,500 --> 00:11:41,220
D'abord.

173
00:11:45,190 --> 00:11:49,810
Then what are we going to do then again, if it has a value?

174
00:11:52,800 --> 00:11:53,610
Tableland.

175
00:12:01,070 --> 00:12:02,450
And if it has the value.

176
00:12:05,640 --> 00:12:06,480
Big desktop.

177
00:12:12,440 --> 00:12:18,500
So for each of these if conditions or if directives, we're going to have a separate media query, so

178
00:12:18,500 --> 00:12:20,930
we're going to write how how the media are you supposed to go?

179
00:12:21,950 --> 00:12:23,030
Supposed to go like this.

180
00:12:27,680 --> 00:12:28,850
So media.

181
00:12:29,750 --> 00:12:34,640
Only screen and max width will be the phone is going to be.

182
00:12:35,580 --> 00:12:40,320
Max, with 576 pixels, OK, and you need curly braces inside.

183
00:12:41,410 --> 00:12:49,720
So similarly, we're going to have a media query for portrait doublets, a media query for landscape

184
00:12:49,720 --> 00:12:52,210
tablets and a media query for big desktops.

185
00:12:52,270 --> 00:12:55,210
OK, let's just copy the breakpoints.

186
00:12:56,420 --> 00:12:57,710
So the sixty.

187
00:12:59,490 --> 00:13:01,680
Then there's nine ninety one.

188
00:13:04,450 --> 00:13:05,830
And there is.

189
00:13:06,930 --> 00:13:14,220
OK, 12000 pixels plus Sawaya, it's not going to be Max, which is going to be obviously Menwith.

190
00:13:14,430 --> 00:13:14,910
All right.

191
00:13:16,240 --> 00:13:20,230
All right, and now what are we going to have inside this inside this we want?

192
00:13:21,230 --> 00:13:22,520
Whatever content.

193
00:13:23,410 --> 00:13:28,870
That we want inside each of these different selectors now for different selectors, you're going to

194
00:13:28,870 --> 00:13:32,740
have different content, right, for the media, very like for the selector.

195
00:13:32,750 --> 00:13:38,560
Maybe you want to change the font size for, let's say, for the button selected, maybe one.

196
00:13:38,560 --> 00:13:41,260
You might want a different colour for the buttons in a different device.

197
00:13:41,620 --> 00:13:45,670
Let's see the background color property is going to be different for a mobile device.

198
00:13:45,700 --> 00:13:49,180
OK, so you're going to have different content for different media queries.

199
00:13:49,570 --> 00:13:50,920
How are you going to handle that?

200
00:13:50,930 --> 00:13:56,020
How are you going to make sure that no matter what content you have for different media queries, it's

201
00:13:56,020 --> 00:13:58,930
all going to get copied into here?

202
00:14:00,030 --> 00:14:00,900
Will that be possible?

203
00:14:01,890 --> 00:14:08,370
It is possible, actually, and how it's possible is by using one more directive called the content

204
00:14:08,370 --> 00:14:11,640
directive and what this does is the content.

205
00:14:12,270 --> 00:14:17,430
It just puts in whatever content you have inside the include statement, like, for example, I'll just

206
00:14:17,430 --> 00:14:21,990
show you how this works, because let me just put this content everywhere first and then you'll see

207
00:14:21,990 --> 00:14:22,670
how it works.

208
00:14:27,810 --> 00:14:35,220
So I have the same thing, content, content directive, and now let's see, I define a font size for

209
00:14:35,850 --> 00:14:37,700
this HTML selector.

210
00:14:37,800 --> 00:14:39,550
OK, and how will I do it?

211
00:14:39,690 --> 00:14:40,460
How will I define it?

212
00:14:40,470 --> 00:14:40,980
Obviously.

213
00:14:40,990 --> 00:14:43,500
How do you include Markson's inside a selector?

214
00:14:43,890 --> 00:14:45,960
You use the include.

215
00:14:48,600 --> 00:14:49,180
Directive.

216
00:14:49,470 --> 00:14:55,770
And then you say include include the name of the mixin is respond, and you passed the parameter here

217
00:14:55,770 --> 00:14:57,810
because we wanted a parameter.

218
00:14:59,050 --> 00:15:04,510
For this point, so let's say you want a parameter for the phone, so whenever there is a phone device,

219
00:15:04,780 --> 00:15:10,430
there is a variable, there is a device which has a width of zero to five hundred seventy six pixels.

220
00:15:11,080 --> 00:15:12,010
We want.

221
00:15:13,000 --> 00:15:18,380
This to be called, and what do we want to happen, we want it size to become 50 percent.

222
00:15:19,510 --> 00:15:25,540
Now, how is this going to work when you use this include DirecTV with this mix in name, so that mix

223
00:15:25,540 --> 00:15:32,710
in this mix and gets included in this place and this value phone gets passed into this.

224
00:15:34,030 --> 00:15:34,630
Parameter.

225
00:15:35,850 --> 00:15:42,450
And what else happens, the content, which is inside the curly brackets of the include, gets copied

226
00:15:42,450 --> 00:15:44,510
into this content part over here.

227
00:15:45,180 --> 00:15:48,480
Over here, you'll get it better when I run this.

228
00:15:48,480 --> 00:15:51,900
When I compile this and I show you how the filesystems file looks.

229
00:15:51,930 --> 00:15:55,260
OK, so the file is getting compiled.

230
00:15:56,410 --> 00:15:57,440
And it's rendered.

231
00:15:57,460 --> 00:15:59,260
So let me open the access file.

232
00:16:01,730 --> 00:16:02,900
It's here.

233
00:16:04,950 --> 00:16:06,900
And now let's see.

234
00:16:11,360 --> 00:16:13,190
This was in the HTML, right?

235
00:16:13,220 --> 00:16:14,160
OK, so he's here.

236
00:16:14,750 --> 00:16:16,360
Here is your media query.

237
00:16:16,400 --> 00:16:17,000
What happened?

238
00:16:19,010 --> 00:16:21,290
This HTML selector.

239
00:16:22,590 --> 00:16:24,400
Then you have this font, right?

240
00:16:24,420 --> 00:16:25,050
This is fine.

241
00:16:25,230 --> 00:16:29,100
And after that, you had included the mixin for fun, right?

242
00:16:29,820 --> 00:16:31,460
So what got copied here?

243
00:16:32,010 --> 00:16:37,530
You got the media query with Max with five hundred seventy six because five hundred and seventy six

244
00:16:37,530 --> 00:16:40,170
was the width for the phone.

245
00:16:40,890 --> 00:16:45,450
Let's take a look at the break point for the phone with five hundred seventy six pixels.

246
00:16:45,840 --> 00:16:46,160
Right.

247
00:16:46,410 --> 00:16:48,690
So this got copied here.

248
00:16:48,690 --> 00:16:56,030
And what got copied inside the content, the font size 50 percent, which came from our include DirecTV.

249
00:16:56,460 --> 00:17:01,620
So you see, this is how you're going to use make sense for your media queries.

250
00:17:02,100 --> 00:17:09,850
Whatever content you put inside, your include gets copied into your mixes, content, DirecTV.

251
00:17:10,350 --> 00:17:10,980
All right.

252
00:17:11,670 --> 00:17:13,050
So let's complete this now.

253
00:17:14,220 --> 00:17:19,960
So we want whenever it's a phone, we want the font size to be 50 percent.

254
00:17:20,000 --> 00:17:21,880
Now, why did I write 50 percent of the font?

255
00:17:21,880 --> 00:17:22,950
Can you understand?

256
00:17:24,430 --> 00:17:30,340
The same reason I put sixty two point five percent for the road Fonz's, because I want when I was defining

257
00:17:30,340 --> 00:17:37,720
the route font size, I wanted one ram to be equal to 10 pixels so that it was easy for me to convert

258
00:17:37,840 --> 00:17:38,830
the sizes everywhere.

259
00:17:38,830 --> 00:17:39,140
Right.

260
00:17:40,240 --> 00:17:47,650
So since I wanted one ram to be equal to 10 pixels and actually the original root font size is 16 pixels.

261
00:17:48,070 --> 00:17:48,370
Right.

262
00:17:48,370 --> 00:17:51,570
The font size which comes from your browser is 16 pixels.

263
00:17:51,910 --> 00:17:54,400
But I want one ram to be 10 pixels.

264
00:17:54,730 --> 00:18:03,130
So 10 pixels means what, 10 pixels means 10 by 16 times 100.

265
00:18:04,250 --> 00:18:05,200
Important.

266
00:18:05,900 --> 00:18:08,870
OK, sorry, it's 16 here, not 15.

267
00:18:10,300 --> 00:18:18,550
So 10 pixels is ten, divided by 16 because 16 is the original value of your own size of the root font

268
00:18:18,550 --> 00:18:21,030
size, but we want to convert it to 10.

269
00:18:21,100 --> 00:18:23,960
We want one ram to equal to 10 pixels, not 16 pixels.

270
00:18:24,280 --> 00:18:31,630
So that's why we divide a 10 by 16 and then multiply it by one hundred and you get sixty two point five

271
00:18:31,630 --> 00:18:32,230
percent.

272
00:18:33,760 --> 00:18:36,350
Sixty two point five percent of 16 pixels.

273
00:18:36,970 --> 00:18:44,590
All right, similarly, we want whenever the device is a phone, actually, before we go on to the phone,

274
00:18:44,590 --> 00:18:49,930
let's call like from the bigger devices and then go towards the smaller devices, because that's how

275
00:18:49,930 --> 00:18:55,290
you design your media queries for the desktop first designs.

276
00:18:55,300 --> 00:18:55,550
Right?

277
00:18:55,810 --> 00:18:57,130
So we first write.

278
00:18:58,030 --> 00:18:59,940
For tablets, OK?

279
00:19:01,850 --> 00:19:03,050
Landscape tablets.

280
00:19:03,080 --> 00:19:06,070
OK, so tablets which are in landscape mode.

281
00:19:06,950 --> 00:19:14,390
So when the device is a tablet, which is in landscape mode, I want one ram to be a little bit smaller

282
00:19:14,390 --> 00:19:20,390
in size so that everything reduces in size, all the images, all the buttons, all the background images.

283
00:19:20,390 --> 00:19:24,410
I want everything to be reduced to a smaller size.

284
00:19:24,830 --> 00:19:30,560
And because everything is in REM's, it's easy if I just define the ram to be of a smaller pixel value

285
00:19:31,040 --> 00:19:34,060
for the landscape, for the tablet in landscape mode.

286
00:19:34,460 --> 00:19:37,340
I want one ram to be not ten pixels.

287
00:19:37,340 --> 00:19:38,620
I want it to be smaller.

288
00:19:38,630 --> 00:19:40,260
I want it to be eight pixels.

289
00:19:41,060 --> 00:19:46,600
OK, so if I want one ram to be eight pixels, how much percentage is that of 16 pixels.

290
00:19:46,700 --> 00:19:53,390
It's 50 percent rate because eight by 16 is half OK times.

291
00:19:53,390 --> 00:19:55,220
One hundred will be 50 percent.

292
00:19:58,060 --> 00:20:04,000
OK, now let's define the the font size for all the other devices.

293
00:20:06,410 --> 00:20:11,460
OK, so let's after a tabloid landscape mode, let's define for tablet in portrait mode.

294
00:20:11,480 --> 00:20:15,940
OK, so when it is important, what I want it to be a little bit smaller in size.

295
00:20:16,640 --> 00:20:21,950
So I want it to be actually if it isn't portrait or landscape mode, let me keep it the same for the

296
00:20:21,950 --> 00:20:22,540
time being now.

297
00:20:22,790 --> 00:20:25,530
And if we need any changes made with me, we'll make it later.

298
00:20:26,480 --> 00:20:30,130
OK, so a tablet in portrait mode, tablet in landscape mode.

299
00:20:30,140 --> 00:20:31,690
I want it to be the same.

300
00:20:32,420 --> 00:20:35,390
And then in fact, let me do this, OK?

301
00:20:35,630 --> 00:20:37,220
Let me make the tablet.

302
00:20:37,700 --> 00:20:42,520
One room equals nine pixels not sorry tablet in landscape mode.

303
00:20:42,530 --> 00:20:43,730
Let me make it one pixel.

304
00:20:43,790 --> 00:20:47,870
One ram is nine pixels and four tablet and portrait mode.

305
00:20:48,050 --> 00:20:48,800
Let it be.

306
00:20:48,800 --> 00:20:50,840
One room equals one eight pixels.

307
00:20:51,080 --> 00:20:56,780
And for the mobile phones let me make it one.

308
00:20:56,780 --> 00:20:58,790
Ram equals eight pixels itself.

309
00:20:58,790 --> 00:20:59,690
I don't want to change that.

310
00:21:01,400 --> 00:21:05,850
And the last one is the large desktops or big desktop.

311
00:21:05,870 --> 00:21:10,130
OK, so I want that to be first because that is a bigger device.

312
00:21:10,580 --> 00:21:10,940
OK.

313
00:21:12,820 --> 00:21:14,150
So we went from big to small.

314
00:21:14,290 --> 00:21:17,410
We'll have to define the larger devices first.

315
00:21:18,510 --> 00:21:20,970
Big desktop.

316
00:21:22,810 --> 00:21:28,590
OK, over here, I want one room to be equal to 12 pixels, it should be bigger than ten.

317
00:21:28,750 --> 00:21:32,620
OK, because Dennis for the normal laptop screens.

318
00:21:32,650 --> 00:21:35,400
OK, so now let's convert this one room.

319
00:21:35,400 --> 00:21:36,750
We want it to be 12 pixels.

320
00:21:37,180 --> 00:21:44,860
So that is how much percentage of pixels that will be 12 by 16 times one hundred, which is seventy

321
00:21:44,860 --> 00:21:45,610
five percent.

322
00:21:45,740 --> 00:21:49,900
OK, so we want it to be 75 percent of 16 pixels.

323
00:21:50,780 --> 00:21:57,530
Then what about this one equals nine pixels, which is how much percentage of 16 pixels, fifty six

324
00:21:57,530 --> 00:21:58,520
point two five.

325
00:22:01,300 --> 00:22:01,770
Percent.

326
00:22:01,890 --> 00:22:02,120
OK.

327
00:22:03,390 --> 00:22:04,110
And.

328
00:22:05,290 --> 00:22:06,370
These two are going to be the same.

329
00:22:06,610 --> 00:22:09,420
OK, so let me just change it everywhere.

330
00:22:10,900 --> 00:22:11,710
This will be.

331
00:22:13,750 --> 00:22:15,100
Seventy five percent.

332
00:22:16,280 --> 00:22:18,920
This will be fifty six point two, five percent.

333
00:22:21,280 --> 00:22:23,440
This Lufti and this will be a great.

334
00:22:24,540 --> 00:22:26,700
So we're done with this part as well.

335
00:22:27,480 --> 00:22:31,000
Let me now see how the website looks when I reduce the size.

336
00:22:31,020 --> 00:22:35,820
OK, we've defined the media queries already, so this is our new website.

337
00:22:36,480 --> 00:22:43,740
And you know how to see the different views to see how responsive our pages go to inspect Element after

338
00:22:43,830 --> 00:22:44,230
clicking.

339
00:22:45,870 --> 00:22:49,650
And then click on this responsive design mode button here.

340
00:22:50,850 --> 00:22:53,350
All right, and here we are.

341
00:22:53,940 --> 00:22:57,510
And on top, you can see that the width and the height.

342
00:22:58,550 --> 00:23:03,050
And you can now drag it around so as you can see.

343
00:23:05,230 --> 00:23:11,380
As you reduce the size, the sizes, so you can you see over here the sizes of these buttons and the

344
00:23:11,380 --> 00:23:13,740
fonts and everything reduces accordingly.

345
00:23:14,260 --> 00:23:16,290
For example, see look at the breakpoint.

346
00:23:16,300 --> 00:23:17,380
Okay, what was the break point?

347
00:23:17,380 --> 00:23:21,040
The first break point was tablet landscape.

348
00:23:21,220 --> 00:23:25,630
Tablet landscape was at nine hundred and ninety one pixels.

349
00:23:28,610 --> 00:23:31,230
OK, so let's try nine hundred and ninety one pixels, OK?

350
00:23:31,640 --> 00:23:32,090
So.

351
00:23:33,070 --> 00:23:39,250
Here we are so fast, it's like this, and then we reduce it, we reduce the size to nine hundred and

352
00:23:39,250 --> 00:23:40,630
ninety one, just keep an eye.

353
00:23:41,770 --> 00:23:50,800
There you see from nine hundred and what is it, 1000 and then let it go down, down, down, and you

354
00:23:50,800 --> 00:23:53,290
see a sudden change in the size.

355
00:23:53,290 --> 00:23:54,430
Can you see the change in the size?

356
00:23:54,880 --> 00:23:59,320
Again, the next breakpoint is at seven hundred sixty eight.

357
00:23:59,330 --> 00:24:00,160
So let's take a look.

358
00:24:01,730 --> 00:24:02,970
Let's reduce the size.

359
00:24:04,760 --> 00:24:08,360
Until it comes to seven hundred and sixty eight.

360
00:24:12,420 --> 00:24:14,070
Yeah, we have to improve all these things.

361
00:24:15,160 --> 00:24:17,110
OK, and.

362
00:24:18,680 --> 00:24:21,620
See, it reduces, again, the button size.

363
00:24:22,690 --> 00:24:24,000
Again, let it go down.

364
00:24:26,700 --> 00:24:31,370
And once it is at five hundred and seventy six, it doesn't reduce the size anymore.

365
00:24:32,210 --> 00:24:36,660
OK, once you are at five minutes every six, you don't see any more changes in the size.

366
00:24:38,490 --> 00:24:41,740
OK, we have to think about making these changes here.

367
00:24:41,760 --> 00:24:42,150
All right.

368
00:24:43,320 --> 00:24:50,520
Well, we've defined the basis for our media careers and now what's left to do is go point by point,

369
00:24:50,760 --> 00:24:57,600
go to each of these places, each of these sections, and change whatever needs to be changed.

370
00:24:58,020 --> 00:25:00,990
But also notice how our work is already done.

371
00:25:01,380 --> 00:25:03,000
Most of the work is already done.

372
00:25:03,300 --> 00:25:05,880
We just have a few small things to change here and there.

373
00:25:06,180 --> 00:25:09,720
And then your page will be nicely responsive.

374
00:25:10,800 --> 00:25:12,750
So I'll see you around in the next listen.