1 00:00:00,690 --> 00:00:01,140 ‫Hey, there. 2 00:00:01,230 --> 00:00:01,980 ‫Welcome back. 3 00:00:02,330 --> 00:00:02,490 ‫All right. 4 00:00:02,580 --> 00:00:05,400 ‫Good time for us to jump on to responsiveness. 5 00:00:05,790 --> 00:00:10,950 ‫Well, we are going to face a lot of issues with our Flexbox upgrade and alignment. 6 00:00:11,370 --> 00:00:13,140 ‫And that's where the fun begins. 7 00:00:13,770 --> 00:00:15,240 ‫So why just right click here? 8 00:00:15,300 --> 00:00:16,200 ‫Click on Inspect. 9 00:00:16,680 --> 00:00:17,760 ‫Try to squeeze it. 10 00:00:18,270 --> 00:00:21,480 ‫There are few things that we need to notice from top to bottom. 11 00:00:21,960 --> 00:00:27,720 ‫First, we are going to remove, or I should say that display will be none or our current nav bar. 12 00:00:28,140 --> 00:00:29,340 ‫So we need to do that. 13 00:00:29,760 --> 00:00:32,940 ‫Then we are going to align everything on the center. 14 00:00:33,510 --> 00:00:37,800 ‫Then we need to remove our elements, our objects regarding our subject. 15 00:00:38,100 --> 00:00:41,190 ‫So we need to remove this chemistry as that as matchbox. 16 00:00:42,060 --> 00:00:45,120 ‫And if I scroll down, OK, everything looks good. 17 00:00:46,810 --> 00:00:51,490 ‫And if I scroll down more so you can see these on sequence than I have my image. 18 00:00:51,550 --> 00:00:56,740 ‫And these are in sequence and all of them are on this side of flex start. 19 00:00:57,490 --> 00:00:58,930 ‫Everything looks good to me. 20 00:00:59,500 --> 00:01:03,420 ‫So this is the basic requirement that currently we have in Norway now. 21 00:01:03,430 --> 00:01:10,480 ‫Later on, you will also observe that this whole now bar is currently on a position of sticky. 22 00:01:10,510 --> 00:01:16,090 ‫That means we are moving this now bar that is going to be the second step. 23 00:01:16,510 --> 00:01:23,170 ‫The third step is going to be this hamburger menu, which is going to require some knowledge of JavaScript. 24 00:01:23,290 --> 00:01:26,400 ‫Don't worry, we are not going to experiment but skip. 25 00:01:26,590 --> 00:01:27,940 ‫It will be a lecture. 26 00:01:28,360 --> 00:01:28,990 ‫And that's it. 27 00:01:29,470 --> 00:01:32,410 ‫So this is the current task. 28 00:01:32,860 --> 00:01:37,720 ‫What I'm going to do is I'm going to jump here and let's start playing with this. 29 00:01:38,050 --> 00:01:40,630 ‫So the first thing I'm going to do is jump around. 30 00:01:40,630 --> 00:01:46,030 ‫My voice could create a responsive gutsiest and add these five mediocrities. 31 00:01:46,540 --> 00:01:54,040 ‫So this will be five zero to CoriTy, then seven six nine nine two one two seven nine and then anything 32 00:01:54,040 --> 00:01:55,510 ‫about one two seven nine. 33 00:01:56,020 --> 00:01:57,010 ‫Oh, OK, looks good. 34 00:01:57,130 --> 00:02:00,790 ‫Let me get back here and I simply need to import it here. 35 00:02:01,520 --> 00:02:05,710 ‫That said, Lane, then I'm going to go with my CSF and head. 36 00:02:05,710 --> 00:02:09,340 ‫I will have my response if North Coast looks good to me. 37 00:02:09,390 --> 00:02:16,030 ‫And if I get back here now, all the calls that I need to ask will be in one of them. 38 00:02:16,630 --> 00:02:19,770 ‫Skip if zone, right click Inspect. 39 00:02:19,780 --> 00:02:25,100 ‫And if you observe here, make sure your screen is not zoomed in and not tuned out. 40 00:02:25,120 --> 00:02:30,210 ‫It shouldn't be 100 percent because these pixels varies when you have so many us almost. 41 00:02:30,910 --> 00:02:39,850 ‫So the first task miniaturize as soon as we head this 992 pixel, we need to remove this now, but looks 42 00:02:39,850 --> 00:02:40,500 ‫good to me. 43 00:02:40,570 --> 00:02:47,020 ‫All I have to do is jump here inside my 992, and then I can just select my navigation bar. 44 00:02:47,200 --> 00:02:49,190 ‫So I'm going to go with the. 45 00:02:50,700 --> 00:02:54,660 ‫Let me squeeze all of them inside my head. 46 00:02:54,990 --> 00:02:56,820 ‫I will have my the menu. 47 00:02:58,380 --> 00:03:00,410 ‫I can simply remove this. 48 00:03:00,470 --> 00:03:02,370 ‫I just need to select my menu. 49 00:03:03,630 --> 00:03:05,640 ‫Re-elected now, Dr. Emmanuel. 50 00:03:08,920 --> 00:03:15,550 ‫And I need to see if you display none to me, get back here. 51 00:03:19,230 --> 00:03:21,270 ‫So now if I try to experiment that. 52 00:03:22,480 --> 00:03:24,040 ‫Yup, it's working fine. 53 00:03:24,280 --> 00:03:24,790 ‫Okay. 54 00:03:25,120 --> 00:03:26,920 ‫This step is great. 55 00:03:27,760 --> 00:03:32,230 ‫Now the second step is to divide them if you see these two section. 56 00:03:32,680 --> 00:03:35,350 ‫Let me open this morning inside my men. 57 00:03:35,920 --> 00:03:38,620 ‫Inside this section, you see these two section. 58 00:03:39,040 --> 00:03:43,360 ‫What I need to do is I need to utilize my power energy to flex it up. 59 00:03:43,840 --> 00:03:48,700 ‫So let me see if I've added in cross-section and to flex it up if I jump here. 60 00:03:48,920 --> 00:03:49,720 ‫Scroll up. 61 00:03:53,920 --> 00:03:58,930 ‫This is my intersection, there is no Flagstaff, so let me add Flex. 62 00:04:00,460 --> 00:04:08,950 ‫Rob, now I also need to mention a word that we need to maintain at this point of time, even if I maintain 63 00:04:08,950 --> 00:04:15,910 ‫my flex it out, nothing is going to up because I need to mention of it to these individual section 64 00:04:16,090 --> 00:04:22,060 ‫that I need to maintain at least this amount of weight at this point of time, we have provided of it. 65 00:04:22,360 --> 00:04:27,580 ‫But in the form of percentages, that 50 percent will be for this item and 50 percent will be for this 66 00:04:27,580 --> 00:04:27,910 ‫site. 67 00:04:28,450 --> 00:04:35,860 ‫So one thing we can do is as soon as we reach this 992 pixel mark, we can say, OK, this is going 68 00:04:35,860 --> 00:04:38,650 ‫to be 100 percent and this is going to be 100 percent. 69 00:04:38,680 --> 00:04:46,180 ‫These bought section, or we can change the format of our Flex from Flex Direction Row to Flex Direction 70 00:04:46,180 --> 00:04:46,630 ‫column. 71 00:04:46,990 --> 00:04:50,350 ‫That means both of these will follow our direction of column. 72 00:04:50,890 --> 00:04:52,720 ‫We can choose any one method. 73 00:04:52,990 --> 00:04:59,380 ‫What I'm going to do is I'm going to change their size, so that means I'm going to simply update the 74 00:04:59,710 --> 00:05:02,860 ‫width and I'm going to select my entire text width. 75 00:05:05,170 --> 00:05:08,380 ‫It means slick marks where stars are not basking. 76 00:05:08,830 --> 00:05:13,930 ‫That means the wait for this item, this section will be maximum of 100 percent. 77 00:05:14,290 --> 00:05:20,110 ‫So the other item will definitely move down because I'll fix it up if I get back here. 78 00:05:20,590 --> 00:05:22,540 ‫You can see that's how it is going to work. 79 00:05:23,080 --> 00:05:28,300 ‫So we have given 100 percent to this element, and the other item is now moved down. 80 00:05:28,840 --> 00:05:30,680 ‫There are few things that we need to update. 81 00:05:31,270 --> 00:05:32,740 ‫Definitely the alignment. 82 00:05:32,800 --> 00:05:35,800 ‫Now we need to follow the up content center. 83 00:05:36,100 --> 00:05:38,710 ‫Also, we need to align these specs to center. 84 00:05:39,220 --> 00:05:42,550 ‫What I'm going to do is I'm going to select the whole section. 85 00:05:42,550 --> 00:05:44,830 ‫So if you remember this part. 86 00:05:45,870 --> 00:05:47,850 ‫I'm going to select the section itself. 87 00:05:52,460 --> 00:05:59,690 ‫In cross, cross-section and head, I'm going to say just to my accountant center now and also my next 88 00:05:59,690 --> 00:06:03,350 ‫arraignment should be sent to save this one and get back here. 89 00:06:04,280 --> 00:06:05,420 ‫This looks much better. 90 00:06:07,380 --> 00:06:07,830 ‫Here. 91 00:06:09,440 --> 00:06:16,850 ‫And if you observe, we need to remove these clothing now, so if I get back here and they are removed, 92 00:06:17,330 --> 00:06:23,000 ‫I know they are still there, but they are removed maybe around 700 or something. 93 00:06:23,450 --> 00:06:31,130 ‫So I need to jump here, get onto my responsiveness and 760 and I need to remove my floater air and 94 00:06:31,130 --> 00:06:32,000 ‫float people. 95 00:06:32,990 --> 00:06:40,220 ‫So let me select my floater diet as well as my lord, the end. 96 00:06:41,270 --> 00:06:44,480 ‫And here I am going to say display as none. 97 00:06:47,960 --> 00:06:49,350 ‫Now they are walking. 98 00:06:50,020 --> 00:06:51,410 ‫And now they are removed. 99 00:06:52,080 --> 00:07:00,080 ‫Now here, if you observe a mid-section, that means are into images, you can see the images capturing 100 00:07:00,080 --> 00:07:03,740 ‫only 50 percent of the event, as we have mentioned earlier. 101 00:07:04,190 --> 00:07:10,580 ‫So I need to update this word 200 percent, because now we can take this 100 percent space on, I have 102 00:07:10,580 --> 00:07:14,150 ‫to do is just select my intro and I just. 103 00:07:16,600 --> 00:07:19,630 ‫And had I can mention, they were at 100 percent. 104 00:07:22,130 --> 00:07:26,580 ‫Now, if you observe this is working fine now, this is one important thing. 105 00:07:26,630 --> 00:07:30,830 ‫The other thing if you observe, we need some gap here between my button as well as image. 106 00:07:31,250 --> 00:07:37,340 ‫So what I can do is I can add margin job here, and that's a five room should be fine now. 107 00:07:37,760 --> 00:07:38,450 ‫OK. 108 00:07:38,480 --> 00:07:39,440 ‫This is great. 109 00:07:40,070 --> 00:07:42,050 ‫So this looks better now. 110 00:07:43,260 --> 00:07:46,890 ‫And if you compare, this looks quite. 111 00:07:50,000 --> 00:07:55,790 ‫Now here, this is the next section, and I think this should work fine automatically because we have 112 00:07:55,790 --> 00:08:02,210 ‫maintained the Flexbox as well as all the other properties that are required earlier, except if you 113 00:08:02,330 --> 00:08:03,230 ‫get back here. 114 00:08:04,520 --> 00:08:12,830 ‫And I hope on any individual did OK, so they are directly dependent on the wealth of this one size 115 00:08:13,220 --> 00:08:14,450 ‫great looks good to me. 116 00:08:14,550 --> 00:08:15,230 ‫No issue. 117 00:08:17,190 --> 00:08:21,670 ‫If I won't, I can decrease the size, decrease that one size if I want. 118 00:08:22,390 --> 00:08:23,910 ‫Totally different on our requirement. 119 00:08:24,630 --> 00:08:26,910 ‫I also need to decrease the size. 120 00:08:28,080 --> 00:08:29,370 ‫Yes. 121 00:08:29,400 --> 00:08:30,390 ‫If you examine. 122 00:08:33,040 --> 00:08:36,660 ‫So what I can do is I can make my image depend on the world. 123 00:08:36,940 --> 00:08:41,470 ‫So if I go over it and go, Okay, there are multiple images, I need to give it a name. 124 00:08:42,150 --> 00:08:43,480 ‫Oh, where is the image? 125 00:08:44,110 --> 00:08:46,570 ‫Of course, there are multiple images I'm going to select. 126 00:08:46,570 --> 00:08:51,310 ‫This mean I have to get back here and I'm going to select this. 127 00:08:51,310 --> 00:08:54,760 ‫Me and I am gypsum vaccine task 100 percent. 128 00:08:55,090 --> 00:09:01,120 ‫And then I I'm doing this for auditive so that on mobile screen it is going to work with. 129 00:09:02,150 --> 00:09:02,720 ‫Yeah. 130 00:09:04,730 --> 00:09:05,480 ‫Looks good. 131 00:09:08,260 --> 00:09:14,170 ‫My bicycle down this section looks fine to me, even this section looks fine. 132 00:09:14,470 --> 00:09:15,370 ‫Nigeria. 133 00:09:16,630 --> 00:09:17,710 ‫The gap is OK. 134 00:09:18,400 --> 00:09:21,040 ‫OK, this section is going to create some trouble. 135 00:09:21,130 --> 00:09:25,720 ‫Why we need to update our sixth grade. 136 00:09:26,140 --> 00:09:30,910 ‫So what I'm going to do is I'm going to play with my 92% itself on. 137 00:09:30,910 --> 00:09:34,510 ‫I think I should go with 768 pixel hair. 138 00:09:34,520 --> 00:09:38,290 ‫What do I need to do is I need to select my section, which was demo. 139 00:09:38,890 --> 00:09:42,130 ‫And inside this, I just need to update this whole part. 140 00:09:44,100 --> 00:09:45,150 ‫I scroll down a bit. 141 00:09:47,420 --> 00:09:50,240 ‫Yeah, I just directly need to update everything. 142 00:09:51,530 --> 00:09:56,810 ‫Let's keep this guy on, let's dig, everything's like and explain everything again. 143 00:09:57,410 --> 00:10:02,660 ‫What I'm going to do is this is a script by default, OK, the gap is going to be one room itself, 144 00:10:03,050 --> 00:10:05,270 ‫but I need a big desk column. 145 00:10:05,510 --> 00:10:10,340 ‫Now we are going to have only one column, but we are going to divide everything in rows. 146 00:10:10,850 --> 00:10:12,470 ‫So what I mean by this? 147 00:10:14,450 --> 00:10:15,650 ‫It's called on a bed. 148 00:10:16,460 --> 00:10:18,520 ‫So this is the whole column itself. 149 00:10:19,220 --> 00:10:20,270 ‫Let me right click here. 150 00:10:21,900 --> 00:10:23,360 ‫Oh, okay, this is item. 151 00:10:23,360 --> 00:10:23,600 ‫Yeah. 152 00:10:23,720 --> 00:10:29,540 ‫So this is the whole column, but we have divided multiple rows, so one column, but we have multiple 153 00:10:29,540 --> 00:10:29,900 ‫rules. 154 00:10:30,080 --> 00:10:35,060 ‫So this is going to be a one or two or three if I scroll down a bit. 155 00:10:36,980 --> 00:10:41,360 ‫Then we have a row of four and five, six and seven. 156 00:10:41,780 --> 00:10:43,640 ‫So if I just remove it. 157 00:10:45,040 --> 00:10:48,400 ‫Rule one, two, three, four, five, six and seven. 158 00:10:48,430 --> 00:10:50,140 ‫That's how this is going to be arranged. 159 00:10:51,100 --> 00:10:51,490 ‫OK. 160 00:10:51,730 --> 00:10:53,200 ‫I hope you got the idea. 161 00:10:53,260 --> 00:10:56,530 ‫Now we only have one column, but everything will be inside drawer. 162 00:10:57,130 --> 00:11:03,460 ‫So how this story is going to be distributed, we need to either go with each individual or size. 163 00:11:03,880 --> 00:11:10,110 ‫But what I'm going to do in the first three elements, which are items I'm going to give them are 0.5. 164 00:11:10,900 --> 00:11:18,880 ‫Let's say repeat three common 0.5 five, then four image I'm going to take big space that has three 165 00:11:18,970 --> 00:11:19,360 ‫five. 166 00:11:19,780 --> 00:11:24,430 ‫And then again, I'm going to take repeat three and 0.5. 167 00:11:26,200 --> 00:11:28,780 ‫So that means while my first item. 168 00:11:30,020 --> 00:11:38,090 ‫0.54, 0.54, five, 0.55, five, then for four that I dumped, I'm taking 0.5, five, five, 0.5 169 00:11:38,480 --> 00:11:41,390 ‫and 0.5 that looks good to me. 170 00:11:41,690 --> 00:11:46,790 ‫But now we need to arrange all the items to help off this great template area. 171 00:11:47,240 --> 00:11:50,560 ‫So what I need to do is I need to say I done one. 172 00:11:50,630 --> 00:11:57,260 ‫This is going to be the one, then I need to define other items as well, so I'm going to remove one 173 00:11:57,260 --> 00:11:57,680 ‫of them. 174 00:11:58,370 --> 00:12:02,210 ‫Item one, then I'm going to have my item do. 175 00:12:03,200 --> 00:12:04,760 ‫Now, this is for Rule one. 176 00:12:05,390 --> 00:12:06,770 ‫This is one rule, too. 177 00:12:07,250 --> 00:12:09,370 ‫Similarly, I need to follow up on all three. 178 00:12:09,380 --> 00:12:10,430 ‫This is going to be. 179 00:12:13,040 --> 00:12:19,750 ‫I've done three or three, then these three are distributed among these three, remember? 180 00:12:20,750 --> 00:12:23,120 ‫Then I'm going to take my image. 181 00:12:23,180 --> 00:12:24,950 ‫That's the name I have given. 182 00:12:25,730 --> 00:12:27,950 ‫So this is going to take three four. 183 00:12:28,820 --> 00:12:30,640 ‫Then again, three items will be there. 184 00:12:30,960 --> 00:12:32,750 ‫Item four. 185 00:12:34,580 --> 00:12:43,820 ‫Item five, item six looks good to me, and then there will be a gap up one them if I get back here. 186 00:12:43,850 --> 00:12:44,690 ‫Scroll down. 187 00:12:45,050 --> 00:12:46,040 ‫OK, looks good. 188 00:12:46,850 --> 00:12:48,770 ‫At least we have arranged everything. 189 00:12:50,170 --> 00:12:51,880 ‫Yeah, walking that. 190 00:12:54,950 --> 00:12:58,710 ‫The only thing we need to take care about is this whole alignment. 191 00:12:58,730 --> 00:13:00,620 ‫And I think that we can do easily. 192 00:13:00,890 --> 00:13:03,350 ‫So I like to do is select my demo. 193 00:13:03,590 --> 00:13:07,310 ‫And I think all of them are inside deep dive all of the text. 194 00:13:07,790 --> 00:13:13,110 ‫I need to get into my walking on these orange feedbacks. 195 00:13:13,140 --> 00:13:15,980 ‫OK, even the Pro-Chancellor description, everything. 196 00:13:16,400 --> 00:13:23,270 ‫So I can just jump here and I can directly select my feet and I can see text align center. 197 00:13:23,420 --> 00:13:25,070 ‫Save this one and get back here. 198 00:13:27,560 --> 00:13:28,340 ‫Looks good. 199 00:13:32,390 --> 00:13:35,480 ‫Oh, we need to add some padding if you observe. 200 00:13:36,290 --> 00:13:38,240 ‫We need to maintain some distance. 201 00:13:39,890 --> 00:13:43,160 ‫And we can directly add some water margin to our description. 202 00:13:43,580 --> 00:13:53,390 ‫So what I'm going to do is for a demo, your description and how we can add some margin mortem elected 203 00:13:53,390 --> 00:13:54,230 ‫three RAM. 204 00:13:54,480 --> 00:13:56,000 ‫Save this one and get back here. 205 00:13:57,820 --> 00:14:00,670 ‫OK, much greater now we have some space. 206 00:14:05,530 --> 00:14:09,880 ‫If you're thinking this is going to trouble you, this whole background thing does remove it. 207 00:14:14,980 --> 00:14:18,080 ‫Looks good now, there are few things that we can play with. 208 00:14:18,100 --> 00:14:26,600 ‫Maybe if there's images creating some issue the can then, but you need to take care of these guys. 209 00:14:26,620 --> 00:14:29,890 ‫And this is the perfect size to match what looks good. 210 00:14:30,220 --> 00:14:32,950 ‫No one is going to have this type of screen. 211 00:14:34,270 --> 00:14:39,580 ‫So, yeah, this is walking fine if you want what you can do is you can select this image and you can 212 00:14:39,580 --> 00:14:44,500 ‫provide the maximum height, maximum weight as well as a margin if you want. 213 00:14:44,530 --> 00:14:48,400 ‫If you have a problem with this whole image, you can that rest. 214 00:14:48,400 --> 00:14:51,130 ‫Everything looks fine to me for this particular section. 215 00:14:52,240 --> 00:14:53,640 ‫Have I scored on a bet? 216 00:14:53,880 --> 00:14:55,350 ‫We have our photo section. 217 00:14:55,830 --> 00:14:58,140 ‫So I think this lecture is getting pretty big. 218 00:14:58,290 --> 00:15:00,570 ‫Let's continue this topic in the next one. 219 00:15:01,110 --> 00:15:02,370 ‫I hope this was helpful. 220 00:15:02,490 --> 00:15:05,370 ‫Thank you for calling and I see you guys in the next one.