1 00:00:00,570 --> 00:00:01,170 ‫Hey, there. 2 00:00:01,410 --> 00:00:02,160 ‫Welcome back. 3 00:00:02,440 --> 00:00:05,580 ‫Now it's good time for us to jump on the responsive part. 4 00:00:06,090 --> 00:00:10,620 ‫So in the previous lectures, we have cloned everything that was required. 5 00:00:11,160 --> 00:00:17,430 ‫But now it's time for us to move towards things like changing the background or changing the font size 6 00:00:17,760 --> 00:00:19,590 ‫when we are decreasing our weight. 7 00:00:20,130 --> 00:00:22,860 ‫So there are multiple things that we need to focus. 8 00:00:23,220 --> 00:00:30,540 ‫The first thing is we are going to walk with responsive, not KST y, so we can have all the information 9 00:00:30,540 --> 00:00:33,150 ‫regarding our media query here. 10 00:00:33,780 --> 00:00:36,240 ‫And the other thing is, I need to include it. 11 00:00:36,750 --> 00:00:44,460 ‫So remember, you need to include this responsive DOCSIS after your style, your test y so you are not 12 00:00:44,470 --> 00:00:45,360 ‫overwriting. 13 00:00:45,810 --> 00:00:50,280 ‫That means your style system is not overwriting the changes. 14 00:00:50,430 --> 00:00:53,850 ‫You need to add changes after the style or CSE's. 15 00:00:55,030 --> 00:00:56,470 ‫Let me add a link here. 16 00:00:57,100 --> 00:01:02,500 ‫OK, so I just directly need to select their sponsor darts, yes, and that should be fine. 17 00:01:03,040 --> 00:01:03,700 ‫That's great. 18 00:01:04,420 --> 00:01:06,560 ‫Now we need to do all the changes here. 19 00:01:07,120 --> 00:01:14,530 ‫I hope you have information about the break points like we have break points from zero to 40 pixel. 20 00:01:14,770 --> 00:01:20,710 ‫Then we have 48 760 and then we have 768 to one two seven nine. 21 00:01:20,710 --> 00:01:24,580 ‫And then above that so we can control things according to that. 22 00:01:24,850 --> 00:01:33,160 ‫So the first one I'm going to art is about Media Aquarium Oxford, which is auditing, and this is going 23 00:01:33,160 --> 00:01:36,340 ‫to hold all the changes from zero to 40. 24 00:01:37,360 --> 00:01:44,020 ‫Then we have another one, which is Mox with 768, that means this is going to hold zero two seven six 25 00:01:44,020 --> 00:01:47,170 ‫eight Martella 02 for Deville or what I did. 26 00:01:47,530 --> 00:01:48,010 ‫Why? 27 00:01:48,040 --> 00:01:50,080 ‫Because we are calling top to bottom. 28 00:01:50,950 --> 00:01:57,550 ‫Remember this point, and then we can have changes from zero to one two seven nine. 29 00:02:01,830 --> 00:02:07,170 ‫And then we will have anything about that, so minimumweight, there's one two, seven, nine and there 30 00:02:07,170 --> 00:02:11,910 ‫is no maximum limit, so anything above that will be here. 31 00:02:12,510 --> 00:02:13,000 ‫OK. 32 00:02:13,020 --> 00:02:15,000 ‫I hope you got the base idea. 33 00:02:15,570 --> 00:02:22,310 ‫So the first thing we are going to change is, I guess you will have the idea that is going to be our 34 00:02:22,350 --> 00:02:25,650 ‫exercise, which is our banner one size. 35 00:02:26,160 --> 00:02:28,560 ‫If you remember at this point, our next. 36 00:02:29,370 --> 00:02:31,200 ‫This is our banner one. 37 00:02:32,350 --> 00:02:35,280 ‫So this is a banner H1, and we need to change its size. 38 00:02:35,560 --> 00:02:39,220 ‫So what I'm going to do is simply, I'm going to select this action. 39 00:02:42,320 --> 00:02:48,770 ‫And he said, I'm going to utilize dark banner and then I'm going to select one here. 40 00:02:49,860 --> 00:02:54,060 ‫Now, all the changes that I want to add will be here in this section itself. 41 00:02:55,040 --> 00:03:02,550 ‫So by default, this will be applied, so by default, the size currently we are following is this realm. 42 00:03:03,320 --> 00:03:09,380 ‫So I don't need to override this because this will be applied for the top section itself. 43 00:03:09,720 --> 00:03:13,160 ‫I don't need to override, but we can override things here. 44 00:03:13,370 --> 00:03:18,030 ‫So maybe as soon as I decrease my size, I want to change my H1. 45 00:03:18,050 --> 00:03:19,760 ‫So if you look at this size. 46 00:03:20,970 --> 00:03:26,640 ‫Maybe we are a thousand pixels, so that means this is going to work because this is going to work from 47 00:03:27,090 --> 00:03:32,790 ‫seven six eight two one two seven nine and here I can update my phone size. 48 00:03:35,360 --> 00:03:36,620 ‫Do maybe Benham. 49 00:03:37,990 --> 00:03:43,990 ‫Currently, we are following, well, remember, we are following 12m head changing to 10. 50 00:03:44,800 --> 00:03:47,560 ‫So if you observe this is tell. 51 00:03:49,300 --> 00:03:50,240 ‫This is Ben. 52 00:03:51,340 --> 00:03:52,870 ‫Let me take this down. 53 00:03:52,960 --> 00:03:53,250 ‫Yep. 54 00:03:53,890 --> 00:03:57,670 ‫So at this point of time, if you see one, this is to blame. 55 00:03:58,720 --> 00:04:03,610 ‫And let me also add this toggle device so I continue not adopting. 56 00:04:05,150 --> 00:04:07,790 ‫Knife fight, this is one two three zero. 57 00:04:07,810 --> 00:04:09,610 ‫As soon as I go down. 58 00:04:13,640 --> 00:04:19,760 ‫Now you can see this is one six four zero, that means we are applying the default setting of 12m FOIA 59 00:04:19,760 --> 00:04:21,890 ‫degrees, you can see it's decreasing had. 60 00:04:23,270 --> 00:04:25,520 ‫You see the edges changing. 61 00:04:26,390 --> 00:04:34,310 ‫We need to add something similar for all settings, so that means at the time of 768 pixel, I need 62 00:04:34,310 --> 00:04:37,940 ‫to update it and I need to go with maybe six Adam. 63 00:04:39,750 --> 00:04:45,620 ‫And similarly, I need to follow with the R photo depiction, and I need to update it to maybe five 64 00:04:45,630 --> 00:04:45,990 ‫trim. 65 00:04:47,880 --> 00:04:48,780 ‫Save this one. 66 00:04:48,810 --> 00:04:49,620 ‫Get back here. 67 00:04:52,610 --> 00:04:54,110 ‫OK, this is walking, right? 68 00:04:55,960 --> 00:05:03,010 ‫You need to test the 350 pixel only because I don't think there is any end of a smartphone, which is 69 00:05:03,460 --> 00:05:06,190 ‫less than that in general cases. 70 00:05:06,310 --> 00:05:08,170 ‫So this is walking fine. 71 00:05:09,350 --> 00:05:16,450 ‫Now you also see one issue that this this whole Big Dog is creating some problems. 72 00:05:16,560 --> 00:05:21,770 ‫It might take it on the right side to remove the struggle. 73 00:05:23,500 --> 00:05:25,090 ‫If I try to decrease the size. 74 00:05:26,060 --> 00:05:29,280 ‫You see this, Peter, it's creating some issue. 75 00:05:29,300 --> 00:05:35,030 ‫What I am going to do is either the margin on the boat side and also I'm going to align the sticks to 76 00:05:35,030 --> 00:05:35,760 ‫the center. 77 00:05:36,530 --> 00:05:40,220 ‫Let me get back here on this petard here. 78 00:05:40,220 --> 00:05:40,910 ‫Let me add. 79 00:05:42,210 --> 00:05:47,220 ‫Next, a line, and I'm going to outline it to the center, so this is a decent dinner. 80 00:05:50,610 --> 00:05:55,830 ‫And if I warned I can increase this margin, but I think after doing it and get it done now. 81 00:05:56,840 --> 00:06:01,190 ‫So great, great work that our force genuinely responsiveness. 82 00:06:01,610 --> 00:06:03,290 ‫Now we need to change this banner. 83 00:06:04,100 --> 00:06:08,930 ‫Remember, this banner is behind the scene, but since the color is same, it's creating something. 84 00:06:08,930 --> 00:06:12,680 ‫Shall I say, if you have some banner, that is. 85 00:06:13,100 --> 00:06:18,620 ‫What I mean is if you have any behind the scene which has background image that is of different sizes 86 00:06:18,620 --> 00:06:20,480 ‫of different color, it's great. 87 00:06:20,750 --> 00:06:23,510 ‫But if you want to change, you can do that. 88 00:06:24,320 --> 00:06:26,540 ‫We have this responsive part now. 89 00:06:26,540 --> 00:06:29,390 ‫We can change our background image every now and then. 90 00:06:29,810 --> 00:06:34,460 ‫So the first thing I'm going to update is for my 480 pixel. 91 00:06:34,520 --> 00:06:40,550 ‫I'm going to go forward section and I'm going to select the banner, this complete banner itself. 92 00:06:41,300 --> 00:06:47,870 ‫And how do we have three properties if you remember our background image size as well as position? 93 00:06:48,650 --> 00:06:51,050 ‫Also, no repeat will be followed with oil. 94 00:06:51,200 --> 00:06:52,840 ‫So let me copy this one. 95 00:06:52,900 --> 00:06:54,650 ‫This is going to be background image. 96 00:06:55,220 --> 00:07:01,040 ‫Now, head, I need to change this because we are inside the mobile device authority pixels. 97 00:07:01,400 --> 00:07:01,670 ‫What? 98 00:07:01,670 --> 00:07:05,420 ‫I'm going to use this mobile and see this one. 99 00:07:05,540 --> 00:07:07,060 ‫I need to change the size. 100 00:07:07,250 --> 00:07:14,060 ‫My jumper looks good, but if I try to stretch it, I can go with better because it's maybe one. 101 00:07:14,870 --> 00:07:15,740 ‫Save this one. 102 00:07:17,460 --> 00:07:18,180 ‫Much better. 103 00:07:18,490 --> 00:07:22,230 ‫Let me try to move this a bit up or down something like this. 104 00:07:22,260 --> 00:07:24,210 ‫Get back here on. 105 00:07:25,200 --> 00:07:29,160 ‫I can move it down to self like center top. 106 00:07:30,790 --> 00:07:31,720 ‫Save this one. 107 00:07:31,870 --> 00:07:32,440 ‫Get back. 108 00:07:33,580 --> 00:07:38,110 ‫Maybe 30 percent more, 20 percent save this one. 109 00:07:39,640 --> 00:07:40,090 ‫Great. 110 00:07:40,840 --> 00:07:44,470 ‫So if you observe now, if I try to decrease the size. 111 00:07:47,300 --> 00:07:50,750 ‫This is Grandma mobile screen, and this looks better. 112 00:07:52,420 --> 00:07:52,930 ‫Yep. 113 00:07:53,560 --> 00:07:57,940 ‫From how we are changing our background much better now. 114 00:08:00,320 --> 00:08:04,760 ‫And I don't think there will be any device that is using 200 pixels, but this is great. 115 00:08:05,860 --> 00:08:07,690 ‫I you can move it to bed up. 116 00:08:07,840 --> 00:08:11,110 ‫Maybe use 50 percent, save this one. 117 00:08:11,650 --> 00:08:13,540 ‫You can see this gap is improving. 118 00:08:14,790 --> 00:08:20,820 ‫Now we need to change our tablets so that it's going to be from 40 to 768. 119 00:08:21,210 --> 00:08:25,080 ‫Let me copy this whole section added here. 120 00:08:25,260 --> 00:08:26,870 ‫Save this one on head. 121 00:08:26,880 --> 00:08:30,570 ‫I'm going to release tablet, save this one. 122 00:08:31,290 --> 00:08:35,310 ‫And then we have this so fussy this chick. 123 00:08:36,420 --> 00:08:39,150 ‫OK, I need to decrease the size of this. 124 00:08:40,990 --> 00:08:41,310 ‫OK. 125 00:08:41,560 --> 00:08:42,370 ‫This is stupid. 126 00:08:42,640 --> 00:08:46,880 ‫So let me try to change it to maybe one 50 something again. 127 00:08:46,900 --> 00:08:47,440 ‫Save. 128 00:08:49,210 --> 00:08:52,090 ‫Much better, this looks to me, actually. 129 00:08:55,740 --> 00:08:57,840 ‫E.R., we can follow this. 130 00:08:58,980 --> 00:09:00,030 ‫This is. 131 00:09:01,290 --> 00:09:02,720 ‫768. 132 00:09:02,760 --> 00:09:04,380 ‫And currently we are. 133 00:09:05,500 --> 00:09:06,820 ‫OK, 770. 134 00:09:07,600 --> 00:09:10,630 ‫So I think I need to add this setting. 135 00:09:11,730 --> 00:09:12,500 ‫On it not. 136 00:09:14,600 --> 00:09:15,290 ‫On this. 137 00:09:15,680 --> 00:09:17,180 ‫Save it back. 138 00:09:22,170 --> 00:09:22,910 ‫OK, great. 139 00:09:22,980 --> 00:09:30,510 ‫We can do this also, we can play with this setting, maybe I want to go with a little bit more up down. 140 00:09:30,510 --> 00:09:31,530 ‫We can change that. 141 00:09:31,830 --> 00:09:33,450 ‫And also, we can revolve around it. 142 00:09:34,500 --> 00:09:39,410 ‫So maybe I want to go with the right side, 40 percent and then center. 143 00:09:41,870 --> 00:09:46,230 ‫Save this one, and these are all practice things you will see ahead and try. 144 00:09:46,580 --> 00:09:48,620 ‫But that's how this is going to follow. 145 00:09:48,920 --> 00:09:50,360 ‫And this looks great to me. 146 00:09:51,080 --> 00:09:52,650 ‫So this whole thing is done. 147 00:09:52,670 --> 00:09:54,140 ‫We are responsive. 148 00:09:54,140 --> 00:09:56,120 ‫Our banner side is responsive now. 149 00:09:56,660 --> 00:09:58,700 ‫I hope you got the idea how we did it. 150 00:09:59,270 --> 00:10:00,440 ‫Now there are a few things. 151 00:10:00,500 --> 00:10:03,800 ‫The first thing that you need to play with this odd header. 152 00:10:04,280 --> 00:10:06,740 ‫Remember, this part is not responsive. 153 00:10:07,550 --> 00:10:13,850 ‫What I mean this this is not working because we need to utilize JavaScript for that, and I don't want 154 00:10:13,850 --> 00:10:16,130 ‫to try to mess things here. 155 00:10:16,670 --> 00:10:22,130 ‫We will discuss about this, about animation and all the things how we can have slide down onto how 156 00:10:22,130 --> 00:10:24,590 ‫we can have some other things later. 157 00:10:24,860 --> 00:10:27,720 ‫But I don't want to mess with this button right now. 158 00:10:28,250 --> 00:10:32,960 ‫Things are much easier to implement with JavaScript for these specific tasks. 159 00:10:33,500 --> 00:10:36,560 ‫Mark Restaurant The thing we can control with CSS. 160 00:10:37,160 --> 00:10:38,690 ‫So that's all for this section. 161 00:10:38,690 --> 00:10:42,050 ‫In the next section, what we are going to do is do one small change. 162 00:10:42,380 --> 00:10:44,420 ‫Talk about this hamburger icon. 163 00:10:45,720 --> 00:10:48,870 ‫I hope you got the idea what we did in this specific lecture. 164 00:10:49,290 --> 00:10:52,130 ‫Thank you for calling and I see you guys in the next one.