1
00:00:01,170 --> 00:00:01,740
‫Hey, there.

2
00:00:01,890 --> 00:00:02,640
‫Welcome back.

3
00:00:02,880 --> 00:00:08,490
‫Welcome to our new section in which we'll be discussing about mobile responsiveness.

4
00:00:09,030 --> 00:00:14,460
‫Then now we have been discussing everything according to the screen size of our laptop, Beckstrom or

5
00:00:14,460 --> 00:00:16,050
‫whatever the device you have.

6
00:00:16,710 --> 00:00:23,100
‫But now let us decide how things will change if I try to decrease the size or if maybe I'm trying to

7
00:00:23,100 --> 00:00:25,900
‫use the dongle device for responsiveness.

8
00:00:25,920 --> 00:00:32,910
‫Maybe I'm using different device iPad, or maybe I'm using some iPhone or maybe any other Android device.

9
00:00:33,510 --> 00:00:36,510
‫How responsive my gourd is, I need to check that.

10
00:00:36,930 --> 00:00:41,910
‫So this is the only device that can help us to check all type of responsiveness.

11
00:00:42,300 --> 00:00:48,300
‫For now, I'm going to go into the manual mode, or I should take the off mode.

12
00:00:48,450 --> 00:00:51,510
‫If you click it, it will give you all the options.

13
00:00:51,930 --> 00:00:57,510
‫This is the most common one, so you can see all type of device and let me off this one for you.

14
00:00:58,080 --> 00:00:59,520
‫So this is the current state.

15
00:00:59,550 --> 00:01:07,740
‫I have added three images and gave them a class of mobile tablet and extra so I can control.

16
00:01:08,400 --> 00:01:15,420
‫And then had I just added weight, height as well as margin so I can have all of them easily visible

17
00:01:16,050 --> 00:01:18,720
‫what we are going through and why this lecture is important.

18
00:01:19,440 --> 00:01:25,680
‫The first thing is we are going to understand how to apply CSF to specific device size only.

19
00:01:26,220 --> 00:01:32,580
‫For example, I want maybe this image should have border when I'm on my mobile.

20
00:01:33,300 --> 00:01:37,350
‫Maybe this image should have water when I'm working on my tablet.

21
00:01:38,220 --> 00:01:42,960
‫Or maybe if this image should have border when I'm working on my stop.

22
00:01:43,380 --> 00:01:45,000
‫Now why I'm discussing this.

23
00:01:45,390 --> 00:01:49,780
‫If you understand how to control the image, you can control anything else.

24
00:01:49,800 --> 00:01:51,540
‫It's just a different selector.

25
00:01:52,110 --> 00:01:53,910
‫So that's the only difference.

26
00:01:54,210 --> 00:02:00,690
‫Suppose I want to change the font size of my bag, so I just need to understand what type of size I

27
00:02:00,690 --> 00:02:01,350
‫need to walk.

28
00:02:01,620 --> 00:02:05,430
‫So maybe I just need to control the meter inside my mobile weight.

29
00:02:06,180 --> 00:02:10,980
‫Let us take a quick example, and then we will discuss about all of the other thing.

30
00:02:11,250 --> 00:02:15,120
‫So first, I'm going to do is I'm going to device the same text.

31
00:02:15,540 --> 00:02:19,270
‫That means how we are going to add this sizing thing.

32
00:02:19,800 --> 00:02:21,780
‫So you need to use added.

33
00:02:23,800 --> 00:02:30,250
‫And then how you can see what option about media screen, what is this and how this is important?

34
00:02:30,730 --> 00:02:32,350
‫So this is the media type.

35
00:02:32,830 --> 00:02:33,570
‫No immediate.

36
00:02:33,580 --> 00:02:35,680
‫I can be related to print media.

37
00:02:35,770 --> 00:02:38,560
‫I can relate it to screen or anything else.

38
00:02:38,890 --> 00:02:41,710
‫And even if you don't use it, it's going to work.

39
00:02:41,710 --> 00:02:46,450
‫Fine print basically means if someone is going to print your page, you can give us bits of.

40
00:02:47,200 --> 00:02:48,760
‫We don't need to discuss about this.

41
00:02:48,760 --> 00:02:50,710
‫We just want our screen, actually.

42
00:02:51,310 --> 00:02:52,270
‫So get back here.

43
00:02:52,570 --> 00:02:57,100
‫This is our screen and we just need to pass the size here.

44
00:02:57,100 --> 00:03:03,640
‫I just need to use and and then I need to pass this size from which to which I need to apply specific

45
00:03:03,670 --> 00:03:04,210
‫CSF.

46
00:03:04,900 --> 00:03:09,070
‫Before discussing this case, let me discuss about this as a spark.

47
00:03:09,700 --> 00:03:15,880
‫So what I'm going to do is I'm going to select the image middle class mobile and then I just need to

48
00:03:15,880 --> 00:03:16,690
‫add a border.

49
00:03:16,870 --> 00:03:21,310
‫So suppose I'm going to add a border big five pixel solid.

50
00:03:21,670 --> 00:03:25,330
‫For now, let's take any color, maybe blue just for now.

51
00:03:25,870 --> 00:03:30,190
‫So this is deceased, which will be applied when we go white in this size.

52
00:03:30,640 --> 00:03:33,820
‫Now, here or now I'm going to take max size.

53
00:03:34,150 --> 00:03:36,520
‫That is my max width.

54
00:03:37,710 --> 00:03:43,890
‫As 600 pixels now, this will be pixels because we are going to take exact size.

55
00:03:44,460 --> 00:03:45,810
‫Now let's test this one.

56
00:03:46,110 --> 00:03:51,990
‫If I jump here, the first thing I need to do is I need to zoom out and go back to 100 percent.

57
00:03:52,260 --> 00:03:53,720
‫I'm going to click on Reset.

58
00:03:54,150 --> 00:03:59,040
‫Now, if it does this out, make sure you check out the right hand corner, right top corner.

59
00:03:59,460 --> 00:04:01,740
‫As soon as I hit 600 pixel.

60
00:04:03,940 --> 00:04:05,560
‫You can see I now have a border.

61
00:04:07,080 --> 00:04:15,150
‫Out in out in that means once I hit this screen size, I'm going to have all these excess inside this

62
00:04:15,150 --> 00:04:15,900
‫activity.

63
00:04:16,620 --> 00:04:18,630
‫Now this 600 is pretty amazing.

64
00:04:19,100 --> 00:04:20,520
‫MEN Brigade 350.

65
00:04:21,600 --> 00:04:22,410
‫Get back here.

66
00:04:23,580 --> 00:04:30,480
‫You can see it's activities, not now, activity, not now, activity, not now.

67
00:04:30,900 --> 00:04:32,460
‫So that's how this is going to work.

68
00:04:32,820 --> 00:04:35,340
‫Now this, I think, just generalization.

69
00:04:35,580 --> 00:04:41,280
‫There are great points that means from retirees to retirees, but we are going to follow mobile from

70
00:04:41,280 --> 00:04:42,500
‫which sites to retirees.

71
00:04:42,510 --> 00:04:43,830
‫We are going to hold tablet.

72
00:04:44,250 --> 00:04:46,680
‫And we also need to understand what is this max with.

73
00:04:48,810 --> 00:04:54,560
‫This was only the example part, so you can understand how this whole grid is going to war.

74
00:04:54,960 --> 00:04:56,610
‫I hope you got the best idea.

75
00:04:56,940 --> 00:04:59,330
‫Now let's understand how we need to pass this size.

76
00:05:01,210 --> 00:05:06,700
‫Also, you can remove this on head if I jump and see everything is working fine.

77
00:05:08,280 --> 00:05:15,190
‫So how this marks and minimumweight walk, Mark, so it means that this is the tolerance level that,

78
00:05:15,220 --> 00:05:17,700
‫OK, still three, 50 percent.

79
00:05:17,910 --> 00:05:21,450
‫We are going to apply this property, then we are not going to apply.

80
00:05:21,660 --> 00:05:24,060
‫That means this is the maximum tolerance.

81
00:05:24,420 --> 00:05:26,940
‫I'm going from zero to 50 to 100.

82
00:05:27,300 --> 00:05:33,020
‫I'm still going to apply this maybe 200 Pixel, 250 Pixel, 349 pixel.

83
00:05:33,030 --> 00:05:34,490
‫I'm still going to apply this.

84
00:05:34,500 --> 00:05:39,950
‫But as soon as we go above 350, this will not allow maximum.

85
00:05:39,960 --> 00:05:44,490
‫It is going to support this medium build 350 zero to 350.

86
00:05:44,940 --> 00:05:48,050
‫Now here we can also add minimum minimum means.

87
00:05:48,060 --> 00:05:51,960
‫That means we know that we are not going to support above that with this support.

88
00:05:52,560 --> 00:05:56,340
‫For example, if I choose minimum here as.

89
00:05:57,640 --> 00:06:02,260
‫500 pixels and stuff mobile, if I select the tablet one.

90
00:06:02,980 --> 00:06:05,620
‫Get back here, you can see in our selected tablet.

91
00:06:05,830 --> 00:06:10,060
‫If I just go at 235, increase increase.

92
00:06:10,060 --> 00:06:11,500
‫Increase, increase increase.

93
00:06:13,570 --> 00:06:18,850
‫Nothing is going to happen as soon as we select 500, as soon as 500 is touched.

94
00:06:19,240 --> 00:06:20,770
‫We can see our border.

95
00:06:21,610 --> 00:06:24,180
‫But again, if I increase, nothing is going to happen.

96
00:06:24,190 --> 00:06:24,540
‫Why?

97
00:06:25,050 --> 00:06:28,880
‫Because our 500, it will select this minimum.

98
00:06:28,900 --> 00:06:30,220
‫It shouldn't be 500.

99
00:06:30,340 --> 00:06:34,180
‫However, it can be anything that is the tolerance level, as you can see.

100
00:06:35,370 --> 00:06:40,950
‫That minimum, it can tolerate 500 below that it will not tolerate if I say maximum.

101
00:06:41,220 --> 00:06:46,470
‫That means the market value, it can tolerate this above that it will not tolerate.

102
00:06:46,650 --> 00:06:48,510
‫That's how you are going to remember this.

103
00:06:49,230 --> 00:06:51,900
‫Now, if you remember, I use a dumb breakpoint.

104
00:06:52,290 --> 00:06:53,160
‫What was that?

105
00:06:54,480 --> 00:07:02,280
‫So most of the company's divided these screen size, and they're defined that zero to 40 will be for

106
00:07:02,280 --> 00:07:03,090
‫smartphones.

107
00:07:03,480 --> 00:07:11,820
‫Then 41 to seven 769 will be for tablets are bigger phones and then 769 to one two seven nine.

108
00:07:12,120 --> 00:07:16,640
‫They'll be for laptop or bigger tablets or maybe smaller desktop.

109
00:07:17,010 --> 00:07:21,480
‫And then from 20 plus, that will be large tech stop or monitor.

110
00:07:22,880 --> 00:07:25,250
‫Now how we can apply on this setting.

111
00:07:25,640 --> 00:07:33,830
‫So, for example, at stake for all three, if I say marks of 40 pixels, that means minimum at zero

112
00:07:33,860 --> 00:07:36,920
‫maximum, it can go till 40 and hit.

113
00:07:36,920 --> 00:07:39,020
‫I'm going to say mobile.

114
00:07:41,810 --> 00:07:44,420
‫Now, if I say maximum weight off 768.

115
00:07:47,260 --> 00:07:50,890
‫That means it is going from zero to a maximum of 768.

116
00:07:51,340 --> 00:07:54,370
‫So what we can do is we can also provide a minimum conditions.

117
00:07:56,410 --> 00:08:03,130
‫Here we can use many word and that will be from ordered one big source.

118
00:08:06,760 --> 00:08:12,640
‫And then we can utilize four large that are seven six nine two one two eight seven nine.

119
00:08:14,760 --> 00:08:18,960
‫And I'm going to utilize Dublin, and then here I'm going to utilize.

120
00:08:20,270 --> 00:08:20,960
‫Next stop.

121
00:08:21,120 --> 00:08:25,820
‫So if I jump here, I will see the current screen size that is one zero three five.

122
00:08:27,920 --> 00:08:29,480
‫It still didn't stop.

123
00:08:31,380 --> 00:08:36,300
‫Now it's down to tablet, it's down to smartphone.

124
00:08:36,720 --> 00:08:38,250
‫So that's how this is going to.

125
00:08:39,350 --> 00:08:40,760
‫I hope you got the idea.

126
00:08:42,560 --> 00:08:48,680
‫That means now whatever this year says we are going to add in, this will be applied to these particular

127
00:08:48,710 --> 00:08:49,100
‫sites.

128
00:08:49,610 --> 00:08:55,460
‫So here the best example we can drive, maybe adding some B dogs or maybe some adding some background

129
00:08:55,460 --> 00:08:57,560
‫color or maybe anything else.

130
00:08:57,890 --> 00:09:05,990
‫So suppose let me add it here and inside that let me add a puppy dog and then makeni our lawn and 50

131
00:09:06,170 --> 00:09:07,110
‫cent this one.

132
00:09:07,150 --> 00:09:08,450
‫Get back here.

133
00:09:09,200 --> 00:09:11,150
‫OK, so now we have a dog.

134
00:09:11,330 --> 00:09:18,260
‫So what I can do is I can also control Dispute Dog, and maybe I can change the font size for them or

135
00:09:18,260 --> 00:09:19,060
‫anything else.

136
00:09:20,780 --> 00:09:23,630
‫Or Bragg in mobile, I want the U.S.

137
00:09:25,250 --> 00:09:28,400
‫Font size as zero point atrium.

138
00:09:30,820 --> 00:09:32,380
‫And maybe for my.

139
00:09:34,970 --> 00:09:36,830
‫And I want to use one.

140
00:09:37,430 --> 00:09:39,350
‫And for my next stop.

141
00:09:41,800 --> 00:09:45,090
‫I want to use 1.5 for them, save this one.

142
00:09:45,130 --> 00:09:46,700
‫Get back here now.

143
00:09:46,720 --> 00:09:47,830
‫This is our next stop.

144
00:09:48,490 --> 00:09:52,060
‫Sized decrease with our tablet size decreases with iPhone.

145
00:09:53,270 --> 00:09:54,380
‫That's all this is going to.

146
00:09:54,610 --> 00:10:00,590
‫Now this is the best example that means I'm only using images, I'm using paragraph, but there are

147
00:10:00,650 --> 00:10:02,120
‫several things that you can do.

148
00:10:02,300 --> 00:10:04,820
‫You can customize your team according to the size.

149
00:10:05,120 --> 00:10:10,220
‫Now, since we can verify according to screen size, we can also customize all buttons.

150
00:10:10,220 --> 00:10:12,980
‫We cannot customize how images going to look.

151
00:10:13,220 --> 00:10:16,010
‫So that's why these media queries are important.

152
00:10:16,520 --> 00:10:21,260
‫The first thing is we are in a mix of desktop as well as Mobile World.

153
00:10:21,470 --> 00:10:24,590
‫You can see a big Banjoko website to use more on mobile.

154
00:10:24,590 --> 00:10:25,490
‫A big job.

155
00:10:25,510 --> 00:10:27,920
‫Websites are used more on tablets.

156
00:10:27,920 --> 00:10:34,730
‫A big bunch of websites are used more on laptops, so you cannot fix only one screen size at this point

157
00:10:34,730 --> 00:10:35,180
‫of time.

158
00:10:35,510 --> 00:10:38,360
‫And that's why we use these multiple media queries.

159
00:10:39,080 --> 00:10:43,310
‫If you still want to see some agendas, you can utilize background color.

160
00:10:43,640 --> 00:10:51,950
‫And for this desktop, then you can use this and maybe for a tablet, you can utilize maybe aqua and.

161
00:10:54,590 --> 00:11:00,650
‫And mobile focus you can utilize, maybe this one saved this one, get back here.

162
00:11:02,150 --> 00:11:03,830
‫You're going to see how this is going to work.

163
00:11:04,700 --> 00:11:06,050
‫I hope you got the idea.

164
00:11:08,910 --> 00:11:11,460
‫So that's how we are going to control these media equity.

165
00:11:12,030 --> 00:11:19,110
‫Now the next thing is if I just open the sidebar, there are chances that you want to keep all these

166
00:11:19,110 --> 00:11:21,050
‫media queries in different file.

167
00:11:21,450 --> 00:11:27,960
‫It's possible to depend on company, to company, developer to developer or how they are working.

168
00:11:28,350 --> 00:11:35,820
‫So there are chances that some companies use a separate file and call this as this once it starts.

169
00:11:35,890 --> 00:11:36,450
‫Yes.

170
00:11:37,020 --> 00:11:41,640
‫So we have filed our cases for all the courts and then all these media queries.

171
00:11:44,240 --> 00:11:51,680
‫Are inside responsive Nazi SS, and then what you can do is you can import just after your style or

172
00:11:51,680 --> 00:11:56,330
‫taste, you have option to just use responsive Nazi SS.

173
00:11:56,810 --> 00:12:00,440
‫Everything is fine because this code is loaded in here.

174
00:12:00,440 --> 00:12:03,740
‫That means styluses isn't loaded from this point to this point.

175
00:12:04,220 --> 00:12:09,290
‫And just after that, it will be loaded from this point to this point, exactly the same.

176
00:12:09,380 --> 00:12:10,730
‫It is going to work fine.

177
00:12:11,150 --> 00:12:13,190
‫You can see things are working fine.

178
00:12:14,790 --> 00:12:15,250
‫OK.

179
00:12:15,270 --> 00:12:21,750
‫This is the one we know there are certain companies that want to keep all of them the, you know, different

180
00:12:21,750 --> 00:12:22,140
‫files.

181
00:12:22,470 --> 00:12:25,770
‫For example, they're in search of responsive dart CSF.

182
00:12:25,770 --> 00:12:29,340
‫They create maybe are different cases for love on mobile.

183
00:12:29,370 --> 00:12:33,630
‫Different folder for tablet as well as different folder for next up.

184
00:12:34,050 --> 00:12:35,490
‫We can still do that.

185
00:12:35,820 --> 00:12:41,790
‫So here you can create a mobile dark case and then just copy the part.

186
00:12:43,620 --> 00:12:50,070
‫And keep it inside mobile northeast, and then instead of using this responsive northeast to assess

187
00:12:50,070 --> 00:12:54,050
‫what you can do it, you can attach your mobile doctors to her.

188
00:12:54,060 --> 00:13:00,300
‫You need to apply for stylus cases, then I'm going to apply for Big Storm.

189
00:13:01,760 --> 00:13:02,960
‫Nazi SS.

190
00:13:08,560 --> 00:13:12,160
‫And then I need to have their CFS as well as.

191
00:13:13,410 --> 00:13:14,940
‫My mobile lord CIUSSS.

192
00:13:16,960 --> 00:13:19,030
‫So I just need to apply all of them.

193
00:13:19,180 --> 00:13:25,090
‫Remember, I haven't decided this size yet, so I need to do that four justices Mobile or CSIS.

194
00:13:25,540 --> 00:13:28,670
‫Now I need to create their dogs.

195
00:13:29,680 --> 00:13:30,670
‫Save this one.

196
00:13:31,450 --> 00:13:33,730
‫And then I need to copy this one.

197
00:13:35,120 --> 00:13:39,920
‫Create mixed up Nazi SS, save this one.

198
00:13:40,400 --> 00:13:45,410
‫So now I just find they're there to see us as part, I need to define their size.

199
00:13:47,300 --> 00:13:54,140
‫What I can do is I can utilize the media attribute here, and I can define the minimum as well as maximum

200
00:13:54,140 --> 00:14:01,400
‫bid so hard I just need to use media and all I have to give is I have to provide the minimum as well

201
00:14:01,400 --> 00:14:02,240
‫as maximum.

202
00:14:02,990 --> 00:14:06,040
‫For example, here I'm using the extra boxes.

203
00:14:06,620 --> 00:14:13,250
‫That means I need to use this particular size, which is for next stop that makes up this one and get

204
00:14:13,250 --> 00:14:13,820
‫back here.

205
00:14:14,450 --> 00:14:19,490
‫So this is going to be or let's drop the minimum weight and the maximum weight.

206
00:14:20,180 --> 00:14:25,070
‫Similarly, I need to do red tablet as well as mobile phone.

207
00:14:25,520 --> 00:14:27,800
‫So let me copy or tablet here.

208
00:14:31,030 --> 00:14:33,490
‫And Heather, let me add for mobile phones.

209
00:14:33,670 --> 00:14:38,320
‫So I just need to define the max with her because the minimum will be zero.

210
00:14:39,560 --> 00:14:41,000
‫And let me save this one.

211
00:14:41,390 --> 00:14:48,830
‫So now all these three files that is due next obnoxiousness, the mobile court cases, as well as new

212
00:14:48,840 --> 00:14:55,340
‫tablet or CIUSSS, will work fine with these sizes that we have provided with media attribute.

213
00:14:55,760 --> 00:14:59,540
‫And remember, I haven't attached the responsive dots users.

214
00:15:00,110 --> 00:15:05,380
‫So yeah, so this file is not attached with are indexed on HD immolate.

215
00:15:05,400 --> 00:15:07,160
‫Now if I get back here.

216
00:15:08,560 --> 00:15:10,660
‫You can see this is working fine.

217
00:15:11,760 --> 00:15:13,710
‫So this is our next stop right now.

218
00:15:14,190 --> 00:15:16,320
‫And here you can see its tablet.

219
00:15:17,420 --> 00:15:19,940
‫And now it's going to be a smartphone.

220
00:15:20,390 --> 00:15:21,680
‫So this is working fine.

221
00:15:22,160 --> 00:15:23,300
‫And if I get my kid.

222
00:15:24,630 --> 00:15:25,780
‫Let me do one thing.

223
00:15:25,800 --> 00:15:33,540
‫Let me also connect my responsibilities east and just come in this one, so let me use control and slash.

224
00:15:34,050 --> 00:15:38,190
‫And this is a tragedy that has come in, so this is not going to affect any changes.

225
00:15:39,300 --> 00:15:45,800
‫I hope you got the idea how you are going to add all these three this, which is our responsive file,

226
00:15:45,840 --> 00:15:49,620
‫but they are divided into three parked next top tablet as well as mobile.

227
00:15:50,010 --> 00:15:52,200
‫And how do we have defined the mediocrity?

228
00:15:53,360 --> 00:15:55,160
‫I hope you got the best idea.

229
00:15:55,970 --> 00:16:03,530
‫Now let us also understand one other important point, which is overriding that means this style Nazi

230
00:16:03,530 --> 00:16:08,030
‫curses is general file that is applied on all sizes.

231
00:16:08,450 --> 00:16:14,330
‫Now, when we are using the extreme narcissist, that means we are overriding some of the features from

232
00:16:14,330 --> 00:16:17,120
‫style or CIUSSS for this particular size.

233
00:16:17,750 --> 00:16:24,230
‫Similarly, when we go the tablet talks, we are overriding some features and with more wild.

234
00:16:24,440 --> 00:16:27,720
‫Yes, we are overriding at this point of time.

235
00:16:27,770 --> 00:16:34,250
‫We are using this minimumweight as well as maximum work to understand things for a particular shape

236
00:16:34,250 --> 00:16:34,790
‫and size.

237
00:16:35,300 --> 00:16:41,570
‫But you will see in many cases that they directly define the maximum.

238
00:16:41,570 --> 00:16:45,200
‫Not only are they directly defined in minimart, only why?

239
00:16:45,590 --> 00:16:52,580
‫So we can use the power of overwriting head whenever we don't define any type of value.

240
00:16:52,940 --> 00:16:54,710
‫The value by default is zero.

241
00:16:55,010 --> 00:17:01,250
‫So if I don't define minimum with her, that means it is going to be from zero to one two seven nine.

242
00:17:01,850 --> 00:17:09,200
‫Or if I don't define this tablet minimum width, then it is going to be zero two seven six eight.

243
00:17:09,590 --> 00:17:12,890
‫And here it is, going from zero to 14 zero.

244
00:17:13,640 --> 00:17:16,220
‫Now what I mean by this, this is important.

245
00:17:16,250 --> 00:17:18,230
‫Remember, this is important.

246
00:17:18,260 --> 00:17:25,850
‫If I'm going to use this parameter, these values, that means I have stylus CIUSSS, which is applied

247
00:17:25,850 --> 00:17:27,440
‫on all the cases.

248
00:17:28,070 --> 00:17:34,070
‫Then I have this text, Robert CIUSSS, which is applied from zero to one two seven nine.

249
00:17:34,580 --> 00:17:40,870
‫And if I get back here, you can see this is working at zero two one two seven nine and currently it's

250
00:17:40,880 --> 00:17:42,110
‫one zero seven six.

251
00:17:42,110 --> 00:17:47,240
‫Our size is now in the next case, this will overwrite.

252
00:17:47,450 --> 00:17:50,470
‫That means all the changes will be there for the stop.

253
00:17:50,810 --> 00:17:53,420
‫But if there is any common thing, it will overwrite.

254
00:17:53,840 --> 00:17:56,270
‫So as soon as I decrease the size.

255
00:17:57,870 --> 00:18:03,450
‫Now here you can see the deck stop is activated, the feature of the stop is there, but the common

256
00:18:03,450 --> 00:18:07,500
‫feature of tablets are overwritten, so if you see the paragraph, calories changed.

257
00:18:08,470 --> 00:18:12,400
‫Because this was common in both files, that is our next stop.

258
00:18:13,150 --> 00:18:15,300
‫The background color as well as the tablet.

259
00:18:16,990 --> 00:18:20,180
‫Now, tablet is coming after tech stocks will be up over it.

260
00:18:21,280 --> 00:18:22,510
‫Now this is working fine.

261
00:18:22,540 --> 00:18:26,860
‫As soon as I decrease the size now mobile feature is overriding.

262
00:18:27,100 --> 00:18:32,050
‫That means now we have this mobile phone size as well as mobile background color.

263
00:18:32,140 --> 00:18:32,590
‫Why?

264
00:18:32,920 --> 00:18:35,800
‫Because at the end, we have used mobile.

265
00:18:36,670 --> 00:18:39,850
‫So remember, we are using the sequence from top to bottom.

266
00:18:40,060 --> 00:18:43,540
‫This was general and applied on all the cases.

267
00:18:43,990 --> 00:18:50,650
‫So if there will be any type of size, there will be any type of common element, any type of content

268
00:18:50,650 --> 00:18:52,450
‫head inside our style or CSF.

269
00:18:52,810 --> 00:19:00,310
‫It will be applied on all the cases, but as soon as we introduce some overwriting here and next on

270
00:19:00,330 --> 00:19:03,550
‫broadcast, we are going to apply this genius.

271
00:19:03,880 --> 00:19:08,390
‫But as soon as we override something else after this, we are going to apply that genius.

272
00:19:08,410 --> 00:19:11,800
‫If I override something else, we are going to apply that genius.

273
00:19:12,580 --> 00:19:18,820
‫So remember at this point, these what I think works well and we need to work with zero to the maximum

274
00:19:18,820 --> 00:19:19,180
‫limit.

275
00:19:20,180 --> 00:19:25,610
‫I hope you got the best idea, you will learn more about them during the projects because here we are

276
00:19:25,610 --> 00:19:27,230
‫understanding about the concept.

277
00:19:27,590 --> 00:19:30,950
‫We are using some practical examples to understand them.

278
00:19:31,340 --> 00:19:36,530
‫So the next thing you have to do is you have to practice yourself and then later in the project also,

279
00:19:36,530 --> 00:19:37,700
‫we are going to use them.

280
00:19:37,790 --> 00:19:42,080
‫So by the end of projects, you will have good understanding about each of them.

281
00:19:42,560 --> 00:19:43,220
‫Don't worry.

282
00:19:43,400 --> 00:19:45,230
‫Just practice and then project.

283
00:19:46,320 --> 00:19:54,240
‫Also, you can keep either these three or you can use the responsibility as anyone will work fine and

284
00:19:54,240 --> 00:20:00,930
‫as a quick advice when you have tons of code in your responsible CSIS, then it is recommended to divide

285
00:20:00,930 --> 00:20:01,230
‫them.

286
00:20:01,410 --> 00:20:04,380
‫Otherwise, don't use them, don't use them.

287
00:20:04,380 --> 00:20:06,060
‫It is going to create confusion.

288
00:20:06,240 --> 00:20:13,410
‫Just use responsibly to assess it totally depend on project as well as the amount of oil you have if

289
00:20:13,410 --> 00:20:14,550
‫you have tons of coal.

290
00:20:14,820 --> 00:20:17,460
‫It's hard to manage a single file divided them.

291
00:20:18,000 --> 00:20:24,540
‫But if your file is small and you can manage things, then just keep them in one lots.

292
00:20:25,510 --> 00:20:27,400
‫That's all, I hope you got the idea.

293
00:20:28,180 --> 00:20:31,180
‫Thank you for following, and I see you guys in the next one.