1 00:00:00,210 --> 00:00:07,140 OK, guys, so in this video, we're going to start with the medium screen, the first thing we can 2 00:00:07,140 --> 00:00:15,040 do right here is to go to the X and find we can add X are here, reload. 3 00:00:15,060 --> 00:00:17,880 So now where is the horizontal line? 4 00:00:20,310 --> 00:00:21,380 It must be here. 5 00:00:22,230 --> 00:00:23,740 Let's make it here. 6 00:00:24,510 --> 00:00:25,830 What about now? 7 00:00:26,280 --> 00:00:36,240 OK, so now we got the horizontal line after this part we can give here, give us a row and then each 8 00:00:36,240 --> 00:00:48,990 side we can make or we can just copy all of the previous copies, all in the video we will make for 9 00:00:49,290 --> 00:00:51,090 the medium screen. 10 00:00:53,260 --> 00:01:04,920 OK, let's go now to assess what we can do as first is to here the class of medium and one we can copy 11 00:01:04,920 --> 00:01:24,540 this part to be one, two, three, four, five, six, seven, eight, nine. 12 00:01:30,010 --> 00:01:34,910 10, 11 and 12. 13 00:01:35,470 --> 00:01:36,440 OK, that's good. 14 00:01:36,760 --> 00:01:45,570 And now after this part, we can go to the Green Dot team and see what we can do for this part here. 15 00:01:45,580 --> 00:01:47,700 We got the beginning. 16 00:01:47,710 --> 00:01:50,240 This could be making medium. 17 00:01:51,830 --> 00:01:53,890 Medium I. 18 00:01:56,440 --> 00:01:57,220 OK. 19 00:02:04,530 --> 00:02:05,260 OK. 20 00:02:05,280 --> 00:02:14,580 Again and again, and now the next mission is to go to the responsive design just because here it will 21 00:02:14,580 --> 00:02:17,210 not be very good will reach the screen. 22 00:02:17,400 --> 00:02:20,310 It will be always one and 11. 23 00:02:22,590 --> 00:02:30,030 OK, so after this part, what we can do is to just a moment, please. 24 00:02:32,140 --> 00:02:40,230 OK, we got something here for the response because of this text, if would you like this text in this 25 00:02:40,230 --> 00:02:40,620 text? 26 00:02:40,920 --> 00:02:44,110 I think this ones we be having no problem. 27 00:02:46,170 --> 00:02:53,880 So now when we go and do this design, we can just copy this one. 28 00:02:53,880 --> 00:03:00,030 And very soon we will add a class of container to prevent this exercise. 29 00:03:00,360 --> 00:03:02,070 It's actually scrolling. 30 00:03:02,460 --> 00:03:10,320 We can cover this one from here and add some white space and basically here. 31 00:03:10,680 --> 00:03:18,630 But instead of from this one, we can make from nine nine two pixels on two or three, this one to be 32 00:03:18,840 --> 00:03:29,780 seven, six, eight pixels until we reach the nine nine one point nine eight pixels instead of the small. 33 00:03:29,820 --> 00:03:33,870 I want it to be a medium we can call the medium. 34 00:03:34,710 --> 00:03:37,110 Here, here, here. 35 00:03:37,500 --> 00:03:39,630 Again and again. 36 00:03:40,650 --> 00:03:41,250 Yes. 37 00:03:42,150 --> 00:03:42,510 So. 38 00:03:50,880 --> 00:04:02,390 OK, that's good after this part we've seen before, a 12 B column, 11 column here where it gets. 39 00:04:03,960 --> 00:04:13,530 Here we've seen that it will be column one and 11 all the time, but what when we add these classes, 40 00:04:14,160 --> 00:04:15,420 we can go here. 41 00:04:15,430 --> 00:04:19,860 Let's go to the first one, OK? 42 00:04:21,480 --> 00:04:30,050 We can bring the line here or just add Devon Marshall and put them before for here. 43 00:04:30,240 --> 00:04:31,380 We can't print the line. 44 00:04:33,120 --> 00:04:35,070 OK, so now we got this distance. 45 00:04:35,310 --> 00:04:37,970 We can make this one to be for the medium. 46 00:04:38,610 --> 00:04:45,300 I mean, as we've seen before, it will be always one and 11. 47 00:04:45,300 --> 00:04:51,090 But this was in case that we didn't add the responsive design for the medium screen. 48 00:04:51,750 --> 00:04:56,020 We can go and reload it when we go here. 49 00:04:56,040 --> 00:04:57,380 This was the small screen. 50 00:04:57,390 --> 00:04:58,950 We are having nothing different. 51 00:04:59,220 --> 00:05:05,580 But when we're age of a medium, this will be having one and this will be eleven. 52 00:05:06,330 --> 00:05:07,280 OK, that's good. 53 00:05:07,680 --> 00:05:19,820 Now we can try for the second one, this one here, this one to be for the medium ten, this one to 54 00:05:19,830 --> 00:05:20,750 be for the media. 55 00:05:22,230 --> 00:05:25,380 So now this one is taking the colon too. 56 00:05:25,590 --> 00:05:39,150 But when we reach the medium screen, this would be having the colon to when we go here, this is the 57 00:05:39,150 --> 00:05:39,780 small screen. 58 00:05:39,780 --> 00:05:40,950 We got nothing different. 59 00:05:40,950 --> 00:05:50,280 But when we reach the medium, we are having this now with colon and of two and this with colon and 60 00:05:50,460 --> 00:05:54,390 of ten, we can make this small again. 61 00:05:56,950 --> 00:05:58,480 This won't be for. 62 00:06:00,200 --> 00:06:06,910 The medium and medium, let's see what we have here right now. 63 00:06:07,770 --> 00:06:15,390 This is for the column three, but when we reach the medium screen, it will be column nine. 64 00:06:17,550 --> 00:06:18,400 Yes. 65 00:06:22,260 --> 00:06:23,070 Very soon. 66 00:06:27,560 --> 00:06:34,940 It's here, so now we got this with Galloon M.G. Medium and this to be column and the three. 67 00:06:36,480 --> 00:06:39,980 Let's try now for the green one right here. 68 00:06:40,300 --> 00:06:42,850 Let's be medium and just be making. 69 00:06:43,230 --> 00:06:46,950 We just want to make sure that everything is working fine. 70 00:06:47,430 --> 00:06:49,440 We can save a little pack. 71 00:06:49,830 --> 00:06:52,820 This one here, this is column for. 72 00:06:52,830 --> 00:06:54,810 But when we reach the median. 73 00:06:56,280 --> 00:07:00,030 We are having this with Colin MDH. 74 00:07:01,020 --> 00:07:10,500 And this to be with four, OK, that's good, we can go back and forth, this one, we can just make 75 00:07:10,500 --> 00:07:18,030 this to be for the medium and medium we can reload. 76 00:07:18,940 --> 00:07:23,700 OK, so now having the column five when we reach. 77 00:07:27,160 --> 00:07:33,100 The medium screen it will be have been called seven and the second one will be having colon five. 78 00:07:35,140 --> 00:07:39,490 OK, so here we got this column seven and column five. 79 00:07:39,700 --> 00:07:42,550 This is larger than that. 80 00:07:42,940 --> 00:07:54,090 And for the last one, this to be Meanjin and Major, save it, go back, reload. 81 00:07:54,580 --> 00:07:56,230 So this will be always six. 82 00:07:56,230 --> 00:07:57,850 So it will be making those sense. 83 00:08:00,960 --> 00:08:06,190 Thanks all about the medium screen, we can try now for the last screen. 84 00:08:06,210 --> 00:08:07,260 It will be very easy. 85 00:08:07,290 --> 00:08:11,280 We can just copy and paste because it became much easier. 86 00:08:11,430 --> 00:08:14,880 Right now, we can't copy all of that right here. 87 00:08:15,600 --> 00:08:16,800 But let's go here. 88 00:08:16,800 --> 00:08:23,730 And it's one the medium screen. 89 00:08:27,450 --> 00:08:29,520 We can copy this one right here. 90 00:08:30,460 --> 00:08:36,160 OK, all of that and fix it here. 91 00:08:37,830 --> 00:08:40,700 This will be for the large screen. 92 00:08:41,880 --> 00:08:43,860 We can go to the system. 93 00:08:44,610 --> 00:08:53,640 Where is the and from here, all large and things. 94 00:08:53,880 --> 00:08:55,920 We can cover this right here. 95 00:08:58,290 --> 00:09:12,840 One, two, three, four, five, six, seven, eight, 96 00:09:15,600 --> 00:09:23,910 nine, 10, 11 and 12. 97 00:09:26,100 --> 00:09:26,540 OK. 98 00:09:26,610 --> 00:09:27,720 Now, this is good. 99 00:09:27,750 --> 00:09:29,450 This is for the medium screen. 100 00:09:29,880 --> 00:09:33,120 We can just go up here, copy. 101 00:09:33,120 --> 00:09:34,710 We can make this plane larger. 102 00:09:36,000 --> 00:09:39,180 OK, we can cover this one right here. 103 00:09:39,780 --> 00:09:44,580 And, uh, sorry, this one. 104 00:09:44,580 --> 00:09:51,360 And we will just edit the minimum wage and the maximum with we can add some white space in 105 00:09:54,420 --> 00:10:02,790 this one to be from there nine nine to pixels and then we can make four. 106 00:10:05,070 --> 00:10:14,190 The one one nine nine point nine eight pixels, which is the largest screen we have here, the large 107 00:10:14,190 --> 00:10:14,650 right. 108 00:10:14,670 --> 00:10:15,200 Yes. 109 00:10:15,570 --> 00:10:22,350 And then we can tie the algae, we can cut this one, which is the larger 110 00:10:24,840 --> 00:10:26,790 based console. 111 00:10:30,660 --> 00:10:31,810 OK, that's good. 112 00:10:31,830 --> 00:10:36,440 And here, la, la, la. 113 00:10:37,530 --> 00:10:46,020 OK, and here we can just change this one to be four words that no, not this one, this one right here. 114 00:10:46,410 --> 00:10:50,150 And we can scroll here and try for the larger. 115 00:10:50,520 --> 00:10:57,460 This will be larger, larger, larger and larger. 116 00:10:58,380 --> 00:11:02,610 And then after this part, we can save and go back. 117 00:11:03,220 --> 00:11:04,510 This will be 11. 118 00:11:05,670 --> 00:11:12,180 And this will be one until we reach the lower screen, which is from the nine nine two pixels. 119 00:11:12,570 --> 00:11:20,150 We can go up here as sorry, we can make the screen larger right here. 120 00:11:24,570 --> 00:11:31,590 So when we reach the nine nine two pixels, this is having the column 11 and this is having the column 121 00:11:31,890 --> 00:11:44,380 one, we can try now for the second one, which is here larger, larger, larger and larger size. 122 00:11:45,330 --> 00:11:51,290 This one here, we can make a screen larger right now, OK? 123 00:11:51,360 --> 00:12:02,310 When we're using the large screen, we are having Bestway 10 and this we have to we can go back the 124 00:12:02,310 --> 00:12:11,010 second one, which will be for the large nine, larger, larger and larger. 125 00:12:13,390 --> 00:12:22,330 And because they've got a pet, so now we got this page and where is it here, we can make a screen 126 00:12:22,330 --> 00:12:28,530 larger to see that everything, if everything is OK or not OK. 127 00:12:28,540 --> 00:12:31,600 When we read the large screen, we will be. 128 00:12:31,600 --> 00:12:34,230 Yes, three and nine. 129 00:12:34,840 --> 00:12:37,000 And then here we've got four. 130 00:12:37,570 --> 00:12:41,500 The eight cover this one percent here, here. 131 00:12:41,560 --> 00:12:44,470 And no Savea. 132 00:12:44,470 --> 00:12:46,910 Go back for this one. 133 00:12:47,260 --> 00:12:50,290 Let's make this screen larger. 134 00:12:54,370 --> 00:12:55,100 OK. 135 00:12:55,140 --> 00:12:55,730 Uh. 136 00:12:57,780 --> 00:13:05,670 This one here, so here we got Khanum last eight and call them large for and of course inside can add 137 00:13:05,970 --> 00:13:07,680 them small and medium. 138 00:13:08,310 --> 00:13:15,930 Then after this one here we got four large seven and large five. 139 00:13:17,880 --> 00:13:21,780 Reload this one here when we make this clean. 140 00:13:21,810 --> 00:13:25,960 OK for this one. 141 00:13:25,980 --> 00:13:33,690 So here we got the seven and five and for the last one we got here the. 142 00:13:34,890 --> 00:13:36,300 Yes where is it. 143 00:13:38,730 --> 00:13:42,900 This one here, larger and larger. 144 00:13:43,650 --> 00:13:51,600 This to be one for the lower and for the last and can save and go, OK, we can make this crane larger 145 00:13:51,600 --> 00:13:52,430 right now. 146 00:13:52,950 --> 00:13:55,290 It will be always killing six and six. 147 00:13:55,300 --> 00:13:56,500 So there is no difference. 148 00:13:56,570 --> 00:14:03,020 This part, the last golden we've got here is the column X large. 149 00:14:03,480 --> 00:14:11,640 We are done from the medium and Olivant and we will try now for the X large one foot, which will be 150 00:14:11,640 --> 00:14:12,540 the last one. 151 00:14:13,830 --> 00:14:16,110 Or we can just make something different. 152 00:14:16,110 --> 00:14:23,820 We can make from the one, two or three pixels to the one three nine nine point nine pixels and the 153 00:14:23,820 --> 00:14:30,060 x x large to be starting from the one four zero zero pixels. 154 00:14:30,480 --> 00:14:32,310 We can just copy this media. 155 00:14:37,010 --> 00:14:45,130 Some white space based here and this one to be from one to deal with the pitfalls of trying to reach 156 00:14:45,220 --> 00:14:54,830 the one three nine nine point nine eight pixels, then here this would be Ford Explorer, Explorer X 157 00:14:55,750 --> 00:14:56,470 large. 158 00:14:56,470 --> 00:14:57,460 X large. 159 00:14:57,670 --> 00:14:57,990 Yes. 160 00:14:58,010 --> 00:15:01,540 Again, until we reach that 12. 161 00:15:07,740 --> 00:15:17,010 OK, that's great, now we can go to the files and we can copy all of this part right here, did we 162 00:15:17,010 --> 00:15:18,180 add here in each one? 163 00:15:18,960 --> 00:15:25,770 No, that's one the large screen. 164 00:15:26,580 --> 00:15:29,240 And then we can copy this part right here. 165 00:15:31,840 --> 00:15:33,340 All of that. 166 00:15:36,840 --> 00:15:41,000 We can add some space right here, delayed the closure of the plane, 167 00:15:44,430 --> 00:15:47,580 so he'll be got for the large screen when we get to the large. 168 00:15:48,360 --> 00:15:50,490 Got no problem with that. 169 00:15:51,100 --> 00:15:52,200 OK, that's good. 170 00:15:52,440 --> 00:15:57,570 After this part, what we can do is to go where? 171 00:15:58,410 --> 00:16:04,880 To the grid system and add coal class. 172 00:16:04,890 --> 00:16:12,460 And a number would then cover this part because we can add here one, two or three until we reach that 173 00:16:12,460 --> 00:16:37,280 12, two, three, four, five, six, seven, eight, nine, 10, 11 and 12. 174 00:16:38,670 --> 00:16:44,000 And then we can go to the largest and the explorer screen right here. 175 00:16:44,700 --> 00:16:46,720 And that's the last one. 176 00:16:46,750 --> 00:16:47,220 Yes. 177 00:16:47,820 --> 00:16:52,440 This will be for X large screen, OK? 178 00:16:53,160 --> 00:17:00,050 And for this one to be for the X larger X larger explorer explorer. 179 00:17:00,450 --> 00:17:07,800 So we'll be having the call them the one and 11 until we reach the lower X large screen, it will be 180 00:17:07,800 --> 00:17:12,450 having 11 and one we can make the screen larger. 181 00:17:14,090 --> 00:17:18,190 So, man, we got this for the. 182 00:17:20,350 --> 00:17:27,610 For the large screen and now that's good, we learned about the medium and the, uh, 183 00:17:30,610 --> 00:17:33,920 the large and all of that, I think we got something here. 184 00:17:34,990 --> 00:17:36,010 No, no, no. 185 00:17:36,010 --> 00:17:36,970 We got no problem. 186 00:17:37,570 --> 00:17:38,830 OK, that's great. 187 00:17:39,100 --> 00:17:41,410 And then we can go here. 188 00:17:42,400 --> 00:17:44,140 No, no, it didn't refresh. 189 00:17:44,590 --> 00:17:45,660 This was the problem. 190 00:17:46,180 --> 00:17:48,160 Let's make this screen larger here. 191 00:17:48,670 --> 00:17:56,860 When we reach the explosion, this one here and having column one and this one is having thought this 192 00:17:56,860 --> 00:18:00,280 one is having column 11 and this one is having that. 193 00:18:00,610 --> 00:18:03,820 And one, let's make the screen smaller again. 194 00:18:04,540 --> 00:18:14,230 This one to be for the slower and slower and slower and slower fade and go back. 195 00:18:14,650 --> 00:18:21,250 Now we got this and then we can make the screen larger to make sure that everything is working fine. 196 00:18:22,930 --> 00:18:28,000 So now we got here the column ten and the column two. 197 00:18:29,560 --> 00:18:31,290 We can test before. 198 00:18:31,570 --> 00:18:33,070 And this where? 199 00:18:37,740 --> 00:18:40,000 Yes, this one, no. 200 00:18:40,710 --> 00:18:46,020 This one, the right one, expand and we can make it. 201 00:18:46,050 --> 00:18:52,080 Excellent, excellent, excellent again and excellent. 202 00:18:53,490 --> 00:18:56,550 So now we got this when we make this screen larger. 203 00:19:03,600 --> 00:19:11,870 So now we've got these with them three and this will be column nine, we can try now for the Green. 204 00:19:12,990 --> 00:19:21,120 This one right here, a large X large AI class and a class refresh. 205 00:19:21,540 --> 00:19:26,340 We can make the screen larger right now from here. 206 00:19:27,090 --> 00:19:27,680 Yes. 207 00:19:33,200 --> 00:19:35,900 So now we got this and this is perfect. 208 00:19:38,960 --> 00:19:42,830 We can go back and try for this color. 209 00:19:42,920 --> 00:19:55,220 I think it was a violent explosion, x large, x large, x large, save a pack when we make the screen 210 00:19:55,220 --> 00:19:55,910 larger. 211 00:20:00,230 --> 00:20:07,760 So here we got seven, eight, five, the last the last one, which will be for the sixth, it will 212 00:20:07,760 --> 00:20:15,760 be making no sense because they always say, OK, we don't need to test for the last one. 213 00:20:15,790 --> 00:20:23,360 We can just copy and paste it, the media, because it will be the same concept at some space. 214 00:20:25,340 --> 00:20:34,220 But we can just like this one or we can delete the maximum and make this to be one for you. 215 00:20:35,270 --> 00:20:39,680 And also, we've got minimum height if we wish to add some height. 216 00:20:40,380 --> 00:20:41,620 OK, then. 217 00:20:41,630 --> 00:20:42,950 So about this part. 218 00:20:43,190 --> 00:20:51,650 In the next video we will add a dev, which is called container, so we can prevent some of this scrolling. 219 00:20:51,980 --> 00:20:57,550 We can up the impact from here to see this problem starting from. 220 00:21:04,050 --> 00:21:05,120 OK. 221 00:21:12,050 --> 00:21:14,540 I think it will start from the small screen. 222 00:21:16,220 --> 00:21:22,850 Yes, it's starting from the small screen, I think, but before the small screen of the small screen, 223 00:21:22,880 --> 00:21:24,440 starting from. 224 00:21:26,240 --> 00:21:35,780 Uh, just let me see let me see it again, it's starting from where the five six. 225 00:21:39,540 --> 00:21:47,070 Yes, it's starting from the small screen in the next video, we will know how to deal with this part. 226 00:21:47,450 --> 00:21:49,460 So good luck and have fun.