1
00:00:00,450 --> 00:00:01,140
Welcome back.

2
00:00:01,170 --> 00:00:07,680
This is the second lesson for our media queries with SAS, and in this lesson we're going to continue

3
00:00:07,710 --> 00:00:11,720
working on our Lakeview project to make it responsive.

4
00:00:12,330 --> 00:00:18,000
So as you saw in the previous lesson, we've set up our Lakeview project already to be responsive.

5
00:00:18,010 --> 00:00:22,970
We're one step ahead because we have created everything with relative units.

6
00:00:23,370 --> 00:00:28,770
We've given percentage values for the font sizes, for the root font sizes, so that everything else

7
00:00:28,770 --> 00:00:31,860
gets automatically resized accordingly.

8
00:00:31,860 --> 00:00:38,730
Because everything else in our website is Ingrams is given in Durham units, whether it's a button or

9
00:00:38,730 --> 00:00:45,690
an image or a simple box or a font, anything or heading everything is given in RAM units, which is

10
00:00:45,690 --> 00:00:48,560
a relative unit, and it is relative to the root font size.

11
00:00:48,990 --> 00:00:55,950
So when the device changes its root font size automatically, all the sizes also get reduced or increased

12
00:00:55,950 --> 00:00:56,690
as required.

13
00:00:57,210 --> 00:01:01,260
So this is one good thing about using relative units or REM's.

14
00:01:02,110 --> 00:01:08,630
But one thing we forgot to do is we forgot to change the units in our mix in the breakpoint units.

15
00:01:08,910 --> 00:01:10,310
We still have it in pixels.

16
00:01:10,740 --> 00:01:13,020
It's better to have it in relative units.

17
00:01:13,020 --> 00:01:14,130
And I'll tell you why.

18
00:01:14,630 --> 00:01:17,700
Now you know that there are some people who have accessibility issues.

19
00:01:17,880 --> 00:01:23,940
So what they usually do is when they use their browser, they said the browser to enlarge all the fonts

20
00:01:23,940 --> 00:01:28,920
and all the text, which is in all the pictures, let's say, which they are going to see in their different

21
00:01:28,920 --> 00:01:29,390
websites.

22
00:01:30,090 --> 00:01:37,980
So when you set the width in pixels or when you said anything at all in pixel values, this is an absolute

23
00:01:37,980 --> 00:01:38,390
value.

24
00:01:38,610 --> 00:01:42,990
And so it does not depend on the size settings for that.

25
00:01:42,990 --> 00:01:46,970
The browser is set and it doesn't take the browser settings into consideration.

26
00:01:46,980 --> 00:01:51,450
So if the person wants something to be enlarged, he will not see it as in light.

27
00:01:51,450 --> 00:01:54,840
You will see it in the same way as we have given it, but we don't want that.

28
00:01:54,840 --> 00:02:00,060
We want our website to adapt to the requirements of our viewers.

29
00:02:00,180 --> 00:02:05,910
So if our viewers need to see something in large, we want to give that benefit to our user.

30
00:02:06,720 --> 00:02:12,420
And for that, what we need to do is we need to give these pixel values actually in relative units,

31
00:02:12,870 --> 00:02:15,630
depending on the root font size provided by the browser.

32
00:02:15,840 --> 00:02:17,880
So the browser wants something to be large.

33
00:02:17,880 --> 00:02:20,190
It'll probably give the root font size instead of 16.

34
00:02:20,370 --> 00:02:25,000
It'll have the root font sizes 18 or 20 depending on the requirement of the user.

35
00:02:25,830 --> 00:02:30,730
So in order to make sure that we take the root font size into consideration, we have to use either

36
00:02:30,730 --> 00:02:32,150
REM's or Ms.

37
00:02:33,270 --> 00:02:38,190
Now, one thing you need to know is media queries.

38
00:02:38,190 --> 00:02:38,970
In general.

39
00:02:39,210 --> 00:02:43,910
They are not affected by the root font size that you specify in your base file.

40
00:02:44,370 --> 00:02:45,720
It's not affected by this.

41
00:02:45,990 --> 00:02:47,910
So you have to set it separately.

42
00:02:48,780 --> 00:02:53,430
And there have been a lot of research done on whether MS or MS are better.

43
00:02:53,820 --> 00:02:59,790
And finally, the verdict that has come out is that it's better to use Ms.

44
00:03:00,990 --> 00:03:03,120
Munitz in your media queries.

45
00:03:03,750 --> 00:03:09,030
And actually, whether you use Raymore M, both of them are going to depend on the root font size,

46
00:03:09,030 --> 00:03:14,100
which has come from the browser, not the root font size which you have specified in your base file.

47
00:03:14,340 --> 00:03:18,790
OK, so we are also going to specify in MS.

48
00:03:19,020 --> 00:03:21,990
Since that is what most of the experts have told.

49
00:03:22,590 --> 00:03:26,460
And so how do we make convert this pixel value to an M value?

50
00:03:26,880 --> 00:03:31,100
Now in general, the font size is, say, 16 pixels.

51
00:03:31,140 --> 00:03:35,130
OK, so one M equals sixteen pixel lawyer.

52
00:03:39,490 --> 00:03:46,510
And so what will six hundred pixels be, how much and will it be five hundred seventy six pixels will

53
00:03:46,510 --> 00:03:51,160
be equal to five hundred seventy six divided by.

54
00:03:52,260 --> 00:03:52,800
16.

55
00:03:53,720 --> 00:03:58,700
That'll give you the value for it, and so let me just calculate and find out how much is going to be

56
00:03:58,910 --> 00:04:00,730
it's going to be thirty six am, OK?

57
00:04:02,280 --> 00:04:05,850
All right, let's look at the next one.

58
00:04:05,880 --> 00:04:15,330
Seven hundred seventy six pixels divided by 16 will be forty eight, so this will be forty eight and

59
00:04:15,330 --> 00:04:22,710
then nine hundred and ninety one pixels will be divided by 16 will be sixty one point nine and.

60
00:04:27,030 --> 00:04:32,940
Finally, twelve hundred pixels will be rendered by sixteen is seventy five, so this will be.

61
00:04:34,580 --> 00:04:35,840
Seventy five and.

62
00:04:38,850 --> 00:04:40,740
Let me change this thirty six am.

63
00:04:42,820 --> 00:04:50,380
All right, so now that we have our set up, good to go, we can now start making proper changes to

64
00:04:50,680 --> 00:04:55,010
individual elements that require changes in our B2K.

65
00:04:56,860 --> 00:04:59,200
And let's see the.

66
00:05:00,500 --> 00:05:01,430
Responsive to.

67
00:05:03,480 --> 00:05:05,910
All right, let's start from twelve hundred.

68
00:05:07,410 --> 00:05:10,470
OK, so now let's start reducing things.

69
00:05:28,080 --> 00:05:30,120
There's a lot of changes that need to be made.

70
00:05:33,740 --> 00:05:40,560
But first and foremost, I don't want this white border when our page becomes smaller, I mean narrower.

71
00:05:40,970 --> 00:05:45,890
So when you have these portrait tablets, when it's a landscape tablet form, it's fine.

72
00:05:45,900 --> 00:05:52,070
But when it's in portrait tablet form, I would like this white part to go and so I can remove it from

73
00:05:52,070 --> 00:05:52,970
the body.

74
00:05:53,190 --> 00:05:57,170
OK, so anybody let me add the response mixin.

75
00:05:58,920 --> 00:05:59,910
So I see.

76
00:06:01,010 --> 00:06:02,750
At include.

77
00:06:04,170 --> 00:06:10,910
Respond and for which devices, only water tablets so become so easy, you don't need to always remember

78
00:06:10,910 --> 00:06:15,290
the width or the different devices, you can just write the name of the device so it becomes so much

79
00:06:15,290 --> 00:06:15,980
easier to code.

80
00:06:17,810 --> 00:06:21,860
And we'll give all padding equal to zero.

81
00:06:22,160 --> 00:06:25,610
OK, next time the portrait was.

82
00:06:26,410 --> 00:06:32,020
We just write this down here, tablet's in portrait mode, OK, so that is easy to remember.

83
00:06:32,270 --> 00:06:33,780
OK, so 768 onwards.

84
00:06:34,090 --> 00:06:34,990
Let me see.

85
00:06:37,030 --> 00:06:42,220
OK, so right now it has the betting and let's go down and it'll go to seven sixty eight and below.

86
00:06:43,420 --> 00:06:44,340
And there you go.

87
00:06:45,200 --> 00:06:46,720
The betting is gone.

88
00:06:48,240 --> 00:06:49,860
You see, there's no more betting.

89
00:06:51,440 --> 00:06:57,950
All right, so that's one thing done and now we're going to go step by step now, how do you know how

90
00:06:57,950 --> 00:07:00,080
to go about making a baby responsive?

91
00:07:00,860 --> 00:07:02,180
You can go one by one.

92
00:07:02,180 --> 00:07:05,480
I mean, the best way I feel is to go section by section.

93
00:07:05,660 --> 00:07:06,640
So start with the header.

94
00:07:06,650 --> 00:07:08,870
I always start with the header and the footer.

95
00:07:09,560 --> 00:07:12,860
And once I'm done with that, then I move section by section.

96
00:07:12,860 --> 00:07:15,690
I go to the first section, then I go to the second section and so on.

97
00:07:16,280 --> 00:07:19,310
OK, this thing is going to take a lot of time.

98
00:07:19,310 --> 00:07:20,390
So I'm going to do this last.

99
00:07:21,700 --> 00:07:25,720
And the rest is going to be fairly easy to see how our work is already done.

100
00:07:26,650 --> 00:07:29,080
Very few things that that need to be changed.

101
00:07:29,110 --> 00:07:29,500
All right.

102
00:07:30,010 --> 00:07:30,960
So let's move on.

103
00:07:31,000 --> 00:07:32,350
Let's do the Whitter first.

104
00:07:32,650 --> 00:07:35,350
And I think everything seems fine for the header so far.

105
00:07:35,350 --> 00:07:36,970
Less reduce it, reduce the width.

106
00:07:36,970 --> 00:07:43,090
And only only when it becomes 640 is four, which once you kind of 40 is around.

107
00:07:43,930 --> 00:07:48,880
Here are four tablets imported, more so as soon as it goes below seven hundred and sixty eight, we

108
00:07:48,880 --> 00:07:52,780
want to give a little more margin for the buttons, right.

109
00:07:53,870 --> 00:07:56,320
So we want to do that, so let's do that now.

110
00:07:57,700 --> 00:07:59,890
Let's go to the buttons file.

111
00:08:02,120 --> 00:08:04,490
Which is inside the components.

112
00:08:04,560 --> 00:08:04,920
OK.

113
00:08:07,190 --> 00:08:19,040
And I just want to change for the brown one over here, inside this include the respond mixin you'd

114
00:08:19,130 --> 00:08:20,090
respond.

115
00:08:22,510 --> 00:08:28,750
And for water tablets again, so usually the issues start when you are near the end, when you go below

116
00:08:28,750 --> 00:08:32,140
the water tablet size for the portrait of Mahmoud.

117
00:08:33,550 --> 00:08:34,000
OK.

118
00:08:39,240 --> 00:08:42,270
And here and this.

119
00:08:43,510 --> 00:08:46,630
OK, over here, then I will need to give a margin.

120
00:08:46,850 --> 00:08:48,850
So let me just give a margin of.

121
00:08:50,130 --> 00:08:51,630
One room, that's enough, actually.

122
00:08:53,250 --> 00:08:55,020
That'll be a little separated then.

123
00:08:55,960 --> 00:08:57,580
And let's see if it makes the change.

124
00:08:58,580 --> 00:09:01,130
Let's go down seven hundred and sixty eight.

125
00:09:04,310 --> 00:09:05,840
And the change didn't get maybe it.

126
00:09:08,090 --> 00:09:09,890
I think the rendering is not complete, that's why.

127
00:09:14,260 --> 00:09:15,970
Still don't see a difference.

128
00:09:21,500 --> 00:09:23,690
Airport, he was called to airport, I think, right?

129
00:09:24,740 --> 00:09:27,530
I gave the wrong name, it's called D'abord.

130
00:09:31,510 --> 00:09:32,740
I that portrait.

131
00:09:38,990 --> 00:09:40,580
OK, and let's see now.

132
00:09:45,070 --> 00:09:46,090
That would get rendered.

133
00:09:48,420 --> 00:09:55,340
And we're done, so you see now there's a good separation between the two and looks much better.

134
00:09:57,410 --> 00:09:59,480
OK, so this looks good.

135
00:10:00,410 --> 00:10:01,810
So I think we're done with our hair.

136
00:10:01,850 --> 00:10:03,140
Everything else seems just fine.

137
00:10:04,110 --> 00:10:05,790
Now we'll move on to the footer.

138
00:10:07,890 --> 00:10:13,290
So the future looks fine as it is, but I think it would have looked better if we have because since

139
00:10:13,290 --> 00:10:18,960
the it is reducing now, we want them to make each of these sections, these columns take up the whole

140
00:10:18,960 --> 00:10:19,710
space here.

141
00:10:20,400 --> 00:10:21,270
So for that.

142
00:10:22,760 --> 00:10:26,530
I think we have to make some changes to the grid, so why don't we do that first?

143
00:10:26,540 --> 00:10:28,160
Let's just make some changes to the grid.

144
00:10:28,190 --> 00:10:28,620
All right.

145
00:10:29,390 --> 00:10:32,530
In fact, that is something we should have done right after the Whitter anyway.

146
00:10:33,430 --> 00:10:35,060
So let's open the grid.

147
00:10:35,110 --> 00:10:37,060
There are a lot of things that we need to make to the grid.

148
00:10:38,680 --> 00:10:43,080
And you'll notice after we've made the change to the grid at once, we've made the grid responsive,

149
00:10:43,690 --> 00:10:46,570
a lot of our effort is going to get reduced.

150
00:10:49,840 --> 00:10:56,650
So let's open the grid and now let's make some changes here and now we're going to be making big changes

151
00:10:56,650 --> 00:11:01,510
to our page, right, because we're going to be changing the basic grid set up of it.

152
00:11:02,170 --> 00:11:07,260
So far, we've been having the columns one row with two columns, three columns for columns or whatever.

153
00:11:07,630 --> 00:11:15,430
And now we want every row to have just one column or we want one column to occupy the whole width of

154
00:11:15,430 --> 00:11:18,800
the screen when it is in tablet portrait mode.

155
00:11:19,150 --> 00:11:19,660
All right.

156
00:11:20,380 --> 00:11:25,150
So first thing we want is for all the columns to take up one hundred percent of the width as soon as

157
00:11:25,150 --> 00:11:28,040
the width is that of a water tablet.

158
00:11:28,450 --> 00:11:28,900
All right.

159
00:11:29,440 --> 00:11:31,400
When it's narrow enough at that time.

160
00:11:31,450 --> 00:11:31,780
All right.

161
00:11:32,110 --> 00:11:35,490
So we say we're here inside the column selector.

162
00:11:35,900 --> 00:11:36,200
OK.

163
00:11:38,390 --> 00:11:42,490
And include respond to support.

164
00:11:43,430 --> 00:11:44,990
I hope I'm right this time.

165
00:11:45,200 --> 00:11:45,620
All right.

166
00:11:46,080 --> 00:11:49,610
Which is one hundred percent.

167
00:11:50,540 --> 00:11:56,050
And we want this to be followed every time the wind reduces to anything less than double portrait.

168
00:11:56,600 --> 00:12:00,350
So we see one hundred percent important.

169
00:12:03,830 --> 00:12:08,150
I know I had said that we should avoid it as much as possible, but in this case it's important to put

170
00:12:08,150 --> 00:12:09,110
it when it's in the grid.

171
00:12:09,530 --> 00:12:11,510
It's important to put important.

172
00:12:11,990 --> 00:12:12,440
All right.

173
00:12:16,390 --> 00:12:19,790
Now, as you can see, it's all been changed.

174
00:12:19,840 --> 00:12:22,570
See, all the columns are taking up.

175
00:12:24,860 --> 00:12:30,860
The full with that, it has got right, except for a few things over here, like, for example, you

176
00:12:30,860 --> 00:12:32,980
have a lot of padding over your margin over here.

177
00:12:33,800 --> 00:12:34,640
We don't want that.

178
00:12:35,060 --> 00:12:37,800
And it's all like, you know, it's move to the left.

179
00:12:37,820 --> 00:12:38,660
We don't want that.

180
00:12:39,050 --> 00:12:41,840
So we have to remove this because the margin.

181
00:12:41,840 --> 00:12:42,350
Right.

182
00:12:42,350 --> 00:12:44,710
Has been given us this horizontal gutter value.

183
00:12:44,720 --> 00:12:44,940
Right.

184
00:12:45,260 --> 00:12:49,910
So we don't want to margin right when you have a screen, which is less than a tablet portrait.

185
00:12:49,940 --> 00:12:53,120
OK, so let us include this.

186
00:12:56,270 --> 00:12:58,280
Another media query here.

187
00:13:00,860 --> 00:13:05,720
And what you will see instead of Margarite or let, you will see margin rate.

188
00:13:08,550 --> 00:13:09,030
Zero.

189
00:13:09,060 --> 00:13:10,260
We don't want a margin rate.

190
00:13:19,200 --> 00:13:20,430
OK, and so.

191
00:13:22,400 --> 00:13:23,770
No, it hasn't worked yet.

192
00:13:25,060 --> 00:13:30,620
Let's deal with that later when we deal with this part, when we deal with weddings and events.

193
00:13:30,640 --> 00:13:35,950
I mean, nobody determines the section amenity section where we will deal with it at that time.

194
00:13:35,980 --> 00:13:36,250
Right.

195
00:13:37,080 --> 00:13:37,450
OK.

196
00:13:39,040 --> 00:13:46,810
One more thing is, I don't want this large margin bottom for every row, OK, so every row should not

197
00:13:46,810 --> 00:13:48,910
have this large white vertical gutter.

198
00:13:48,940 --> 00:13:50,550
We want it to be a little bit smaller.

199
00:13:50,980 --> 00:13:53,320
So if we go to our variables.

200
00:13:56,750 --> 00:14:03,230
You see, the vertical gutter is atrium right now, we want it to be smaller, let's say like five ram

201
00:14:03,980 --> 00:14:12,410
so we can have a new vertical gutter and we call this vertical gutter small and we can define this to

202
00:14:12,410 --> 00:14:17,150
have, let's say, five ram because we want it to be a little bit less than what it was before.

203
00:14:17,150 --> 00:14:20,320
A forearm, I think is better that it be just half the size of it.

204
00:14:21,260 --> 00:14:30,200
So we want that this vertical gutter, if it's a small screen and we want this margin bottom to be smaller.

205
00:14:30,410 --> 00:14:32,150
OK, so we've just changed this.

206
00:14:35,060 --> 00:14:36,950
Vertical gutter smog.

207
00:14:54,090 --> 00:14:57,660
So now that we're done working with the grid, let's move on to the future.

208
00:14:57,900 --> 00:15:02,580
OK, let me disclose this and this and let's move on to the future.

209
00:15:05,910 --> 00:15:07,630
Oh, the future was in the old.

210
00:15:14,660 --> 00:15:20,120
So now we want this whole thing to take up this whole hundred percent area instead of just part, right?

211
00:15:20,690 --> 00:15:26,840
So let's see, these two parts were divided into two divs and I think their names were navigation and

212
00:15:27,080 --> 00:15:27,740
copyright.

213
00:15:28,070 --> 00:15:32,290
OK, so let me make the navigation and copyright both of them.

214
00:15:32,510 --> 00:15:33,800
One hundred percent in width.

215
00:15:33,920 --> 00:15:34,370
All right.

216
00:15:37,140 --> 00:15:40,440
So include respond.

217
00:15:43,910 --> 00:15:45,020
Tabloid portrait.

218
00:15:49,940 --> 00:15:51,260
And we want.

219
00:15:52,230 --> 00:15:53,640
The width of this to be.

220
00:16:00,530 --> 00:16:04,820
And fixed a line, we want it to be centered.

221
00:16:12,800 --> 00:16:13,970
Yeah, that's better.

222
00:16:14,300 --> 00:16:17,720
Similarly, we want to cooperate also to take up one hundred percent of the width.

223
00:16:18,990 --> 00:16:21,090
And we also want them spacing between the two, right?

224
00:16:21,110 --> 00:16:22,340
OK, so let's do that.

225
00:16:22,830 --> 00:16:26,610
That's gonna be the same thing here for the copyright.

226
00:16:28,680 --> 00:16:35,220
And we'll also give a margin drop of around one point for REM's.

227
00:16:36,790 --> 00:16:37,900
At one point five Rehm's.

228
00:16:44,010 --> 00:16:48,090
I can maybe we need a little more space, let's make it a little more space would be good.

229
00:16:48,120 --> 00:16:49,250
Two point five is fine.

230
00:16:54,290 --> 00:16:56,360
We also want a little more padding here.

231
00:16:58,510 --> 00:17:02,350
I mean, a little less padding here, so we will change this.

232
00:17:03,650 --> 00:17:04,730
Let me add this here.

233
00:17:07,540 --> 00:17:14,950
And we'll see padding first, it was three ram and zero, and now we want it to be a little less, would

234
00:17:14,950 --> 00:17:16,240
make it to ram and zero.

235
00:17:26,010 --> 00:17:27,090
And this is perfect.

236
00:17:31,700 --> 00:17:33,500
OK, that looks great.

237
00:17:34,970 --> 00:17:39,020
So we're done with the footwork, we're done with the header and we're done with the grid, and now

238
00:17:39,020 --> 00:17:43,160
we're going to go section by section making whatever changes we need to make.

239
00:17:44,150 --> 00:17:46,250
All right, so.

240
00:17:50,760 --> 00:17:54,570
So we're going to do that in the next listen, I'm going to see you around in that listen, right.

241
00:17:54,580 --> 00:17:55,100
Bye bye.