‫Hey, there.
‫Welcome back.
‫Now it's good time for us to jump on the responsive part.
‫So in the previous lectures, we have cloned everything that was required.
‫But now it's time for us to move towards things like changing the background or changing the font size
‫when we are decreasing our weight.
‫So there are multiple things that we need to focus.
‫The first thing is we are going to walk with responsive, not KST y, so we can have all the information
‫regarding our media query here.
‫And the other thing is, I need to include it.
‫So remember, you need to include this responsive DOCSIS after your style, your test y so you are not
‫overwriting.
‫That means your style system is not overwriting the changes.
‫You need to add changes after the style or CSE's.
‫Let me add a link here.
‫OK, so I just directly need to select their sponsor darts, yes, and that should be fine.
‫That's great.
‫Now we need to do all the changes here.
‫I hope you have information about the break points like we have break points from zero to 40 pixel.
‫Then we have 48 760 and then we have 768 to one two seven nine.
‫And then above that so we can control things according to that.
‫So the first one I'm going to art is about Media Aquarium Oxford, which is auditing, and this is going
‫to hold all the changes from zero to 40.
‫Then we have another one, which is Mox with 768, that means this is going to hold zero two seven six
‫eight Martella 02 for Deville or what I did.
‫Why?
‫Because we are calling top to bottom.
‫Remember this point, and then we can have changes from zero to one two seven nine.
‫And then we will have anything about that, so minimumweight, there's one two, seven, nine and there
‫is no maximum limit, so anything above that will be here.
‫OK.
‫I hope you got the base idea.
‫So the first thing we are going to change is, I guess you will have the idea that is going to be our
‫exercise, which is our banner one size.
‫If you remember at this point, our next.
‫This is our banner one.
‫So this is a banner H1, and we need to change its size.
‫So what I'm going to do is simply, I'm going to select this action.
‫And he said, I'm going to utilize dark banner and then I'm going to select one here.
‫Now, all the changes that I want to add will be here in this section itself.
‫So by default, this will be applied, so by default, the size currently we are following is this realm.
‫So I don't need to override this because this will be applied for the top section itself.
‫I don't need to override, but we can override things here.
‫So maybe as soon as I decrease my size, I want to change my H1.
‫So if you look at this size.
‫Maybe we are a thousand pixels, so that means this is going to work because this is going to work from
‫seven six eight two one two seven nine and here I can update my phone size.
‫Do maybe Benham.
‫Currently, we are following, well, remember, we are following 12m head changing to 10.
‫So if you observe this is tell.
‫This is Ben.
‫Let me take this down.
‫Yep.
‫So at this point of time, if you see one, this is to blame.
‫And let me also add this toggle device so I continue not adopting.
‫Knife fight, this is one two three zero.
‫As soon as I go down.
‫Now you can see this is one six four zero, that means we are applying the default setting of 12m FOIA
‫degrees, you can see it's decreasing had.
‫You see the edges changing.
‫We need to add something similar for all settings, so that means at the time of 768 pixel, I need
‫to update it and I need to go with maybe six Adam.
‫And similarly, I need to follow with the R photo depiction, and I need to update it to maybe five
‫trim.
‫Save this one.
‫Get back here.
‫OK, this is walking, right?
‫You need to test the 350 pixel only because I don't think there is any end of a smartphone, which is
‫less than that in general cases.
‫So this is walking fine.
‫Now you also see one issue that this this whole Big Dog is creating some problems.
‫It might take it on the right side to remove the struggle.
‫If I try to decrease the size.
‫You see this, Peter, it's creating some issue.
‫What I am going to do is either the margin on the boat side and also I'm going to align the sticks to
‫the center.
‫Let me get back here on this petard here.
‫Let me add.
‫Next, a line, and I'm going to outline it to the center, so this is a decent dinner.
‫And if I warned I can increase this margin, but I think after doing it and get it done now.
‫So great, great work that our force genuinely responsiveness.
‫Now we need to change this banner.
‫Remember, this banner is behind the scene, but since the color is same, it's creating something.
‫Shall I say, if you have some banner, that is.
‫What I mean is if you have any behind the scene which has background image that is of different sizes
‫of different color, it's great.
‫But if you want to change, you can do that.
‫We have this responsive part now.
‫We can change our background image every now and then.
‫So the first thing I'm going to update is for my 480 pixel.
‫I'm going to go forward section and I'm going to select the banner, this complete banner itself.
‫And how do we have three properties if you remember our background image size as well as position?
‫Also, no repeat will be followed with oil.
‫So let me copy this one.
‫This is going to be background image.
‫Now, head, I need to change this because we are inside the mobile device authority pixels.
‫What?
‫I'm going to use this mobile and see this one.
‫I need to change the size.
‫My jumper looks good, but if I try to stretch it, I can go with better because it's maybe one.
‫Save this one.
‫Much better.
‫Let me try to move this a bit up or down something like this.
‫Get back here on.
‫I can move it down to self like center top.
‫Save this one.
‫Get back.
‫Maybe 30 percent more, 20 percent save this one.
‫Great.
‫So if you observe now, if I try to decrease the size.
‫This is Grandma mobile screen, and this looks better.
‫Yep.
‫From how we are changing our background much better now.
‫And I don't think there will be any device that is using 200 pixels, but this is great.
‫I you can move it to bed up.
‫Maybe use 50 percent, save this one.
‫You can see this gap is improving.
‫Now we need to change our tablets so that it's going to be from 40 to 768.
‫Let me copy this whole section added here.
‫Save this one on head.
‫I'm going to release tablet, save this one.
‫And then we have this so fussy this chick.
‫OK, I need to decrease the size of this.
‫OK.
‫This is stupid.
‫So let me try to change it to maybe one 50 something again.
‫Save.
‫Much better, this looks to me, actually.
‫E.R., we can follow this.
‫This is.
‫768.
‫And currently we are.
‫OK, 770.
‫So I think I need to add this setting.
‫On it not.
‫On this.
‫Save it back.
‫OK, great.
‫We can do this also, we can play with this setting, maybe I want to go with a little bit more up down.
‫We can change that.
‫And also, we can revolve around it.
‫So maybe I want to go with the right side, 40 percent and then center.
‫Save this one, and these are all practice things you will see ahead and try.
‫But that's how this is going to follow.
‫And this looks great to me.
‫So this whole thing is done.
‫We are responsive.
‫Our banner side is responsive now.
‫I hope you got the idea how we did it.
‫Now there are a few things.
‫The first thing that you need to play with this odd header.
‫Remember, this part is not responsive.
‫What I mean this this is not working because we need to utilize JavaScript for that, and I don't want
‫to try to mess things here.
‫We will discuss about this, about animation and all the things how we can have slide down onto how
‫we can have some other things later.
‫But I don't want to mess with this button right now.
‫Things are much easier to implement with JavaScript for these specific tasks.
‫Mark Restaurant The thing we can control with CSS.
‫So that's all for this section.
‫In the next section, what we are going to do is do one small change.
‫Talk about this hamburger icon.
‫I hope you got the idea what we did in this specific lecture.
‫Thank you for calling and I see you guys in the next one.