‫Hey, there.
‫Welcome back.
‫All right.
‫Good time for us to jump on to responsiveness.
‫Well, we are going to face a lot of issues with our Flexbox upgrade and alignment.
‫And that's where the fun begins.
‫So why just right click here?
‫Click on Inspect.
‫Try to squeeze it.
‫There are few things that we need to notice from top to bottom.
‫First, we are going to remove, or I should say that display will be none or our current nav bar.
‫So we need to do that.
‫Then we are going to align everything on the center.
‫Then we need to remove our elements, our objects regarding our subject.
‫So we need to remove this chemistry as that as matchbox.
‫And if I scroll down, OK, everything looks good.
‫And if I scroll down more so you can see these on sequence than I have my image.
‫And these are in sequence and all of them are on this side of flex start.
‫Everything looks good to me.
‫So this is the basic requirement that currently we have in Norway now.
‫Later on, you will also observe that this whole now bar is currently on a position of sticky.
‫That means we are moving this now bar that is going to be the second step.
‫The third step is going to be this hamburger menu, which is going to require some knowledge of JavaScript.
‫Don't worry, we are not going to experiment but skip.
‫It will be a lecture.
‫And that's it.
‫So this is the current task.
‫What I'm going to do is I'm going to jump here and let's start playing with this.
‫So the first thing I'm going to do is jump around.
‫My voice could create a responsive gutsiest and add these five mediocrities.
‫So this will be five zero to CoriTy, then seven six nine nine two one two seven nine and then anything
‫about one two seven nine.
‫Oh, OK, looks good.
‫Let me get back here and I simply need to import it here.
‫That said, Lane, then I'm going to go with my CSF and head.
‫I will have my response if North Coast looks good to me.
‫And if I get back here now, all the calls that I need to ask will be in one of them.
‫Skip if zone, right click Inspect.
‫And if you observe here, make sure your screen is not zoomed in and not tuned out.
‫It shouldn't be 100 percent because these pixels varies when you have so many us almost.
‫So the first task miniaturize as soon as we head this 992 pixel, we need to remove this now, but looks
‫good to me.
‫All I have to do is jump here inside my 992, and then I can just select my navigation bar.
‫So I'm going to go with the.
‫Let me squeeze all of them inside my head.
‫I will have my the menu.
‫I can simply remove this.
‫I just need to select my menu.
‫Re-elected now, Dr. Emmanuel.
‫And I need to see if you display none to me, get back here.
‫So now if I try to experiment that.
‫Yup, it's working fine.
‫Okay.
‫This step is great.
‫Now the second step is to divide them if you see these two section.
‫Let me open this morning inside my men.
‫Inside this section, you see these two section.
‫What I need to do is I need to utilize my power energy to flex it up.
‫So let me see if I've added in cross-section and to flex it up if I jump here.
‫Scroll up.
‫This is my intersection, there is no Flagstaff, so let me add Flex.
‫Rob, now I also need to mention a word that we need to maintain at this point of time, even if I maintain
‫my flex it out, nothing is going to up because I need to mention of it to these individual section
‫that I need to maintain at least this amount of weight at this point of time, we have provided of it.
‫But in the form of percentages, that 50 percent will be for this item and 50 percent will be for this
‫site.
‫So one thing we can do is as soon as we reach this 992 pixel mark, we can say, OK, this is going
‫to be 100 percent and this is going to be 100 percent.
‫These bought section, or we can change the format of our Flex from Flex Direction Row to Flex Direction
‫column.
‫That means both of these will follow our direction of column.
‫We can choose any one method.
‫What I'm going to do is I'm going to change their size, so that means I'm going to simply update the
‫width and I'm going to select my entire text width.
‫It means slick marks where stars are not basking.
‫That means the wait for this item, this section will be maximum of 100 percent.
‫So the other item will definitely move down because I'll fix it up if I get back here.
‫You can see that's how it is going to work.
‫So we have given 100 percent to this element, and the other item is now moved down.
‫There are few things that we need to update.
‫Definitely the alignment.
‫Now we need to follow the up content center.
‫Also, we need to align these specs to center.
‫What I'm going to do is I'm going to select the whole section.
‫So if you remember this part.
‫I'm going to select the section itself.
‫In cross, cross-section and head, I'm going to say just to my accountant center now and also my next
‫arraignment should be sent to save this one and get back here.
‫This looks much better.
‫Here.
‫And if you observe, we need to remove these clothing now, so if I get back here and they are removed,
‫I know they are still there, but they are removed maybe around 700 or something.
‫So I need to jump here, get onto my responsiveness and 760 and I need to remove my floater air and
‫float people.
‫So let me select my floater diet as well as my lord, the end.
‫And here I am going to say display as none.
‫Now they are walking.
‫And now they are removed.
‫Now here, if you observe a mid-section, that means are into images, you can see the images capturing
‫only 50 percent of the event, as we have mentioned earlier.
‫So I need to update this word 200 percent, because now we can take this 100 percent space on, I have
‫to do is just select my intro and I just.
‫And had I can mention, they were at 100 percent.
‫Now, if you observe this is working fine now, this is one important thing.
‫The other thing if you observe, we need some gap here between my button as well as image.
‫So what I can do is I can add margin job here, and that's a five room should be fine now.
‫OK.
‫This is great.
‫So this looks better now.
‫And if you compare, this looks quite.
‫Now here, this is the next section, and I think this should work fine automatically because we have
‫maintained the Flexbox as well as all the other properties that are required earlier, except if you
‫get back here.
‫And I hope on any individual did OK, so they are directly dependent on the wealth of this one size
‫great looks good to me.
‫No issue.
‫If I won't, I can decrease the size, decrease that one size if I want.
‫Totally different on our requirement.
‫I also need to decrease the size.
‫Yes.
‫If you examine.
‫So what I can do is I can make my image depend on the world.
‫So if I go over it and go, Okay, there are multiple images, I need to give it a name.
‫Oh, where is the image?
‫Of course, there are multiple images I'm going to select.
‫This mean I have to get back here and I'm going to select this.
‫Me and I am gypsum vaccine task 100 percent.
‫And then I I'm doing this for auditive so that on mobile screen it is going to work with.
‫Yeah.
‫Looks good.
‫My bicycle down this section looks fine to me, even this section looks fine.
‫Nigeria.
‫The gap is OK.
‫OK, this section is going to create some trouble.
‫Why we need to update our sixth grade.
‫So what I'm going to do is I'm going to play with my 92% itself on.
‫I think I should go with 768 pixel hair.
‫What do I need to do is I need to select my section, which was demo.
‫And inside this, I just need to update this whole part.
‫I scroll down a bit.
‫Yeah, I just directly need to update everything.
‫Let's keep this guy on, let's dig, everything's like and explain everything again.
‫What I'm going to do is this is a script by default, OK, the gap is going to be one room itself,
‫but I need a big desk column.
‫Now we are going to have only one column, but we are going to divide everything in rows.
‫So what I mean by this?
‫It's called on a bed.
‫So this is the whole column itself.
‫Let me right click here.
‫Oh, okay, this is item.
‫Yeah.
‫So this is the whole column, but we have divided multiple rows, so one column, but we have multiple
‫rules.
‫So this is going to be a one or two or three if I scroll down a bit.
‫Then we have a row of four and five, six and seven.
‫So if I just remove it.
‫Rule one, two, three, four, five, six and seven.
‫That's how this is going to be arranged.
‫OK.
‫I hope you got the idea.
‫Now we only have one column, but everything will be inside drawer.
‫So how this story is going to be distributed, we need to either go with each individual or size.
‫But what I'm going to do in the first three elements, which are items I'm going to give them are 0.5.
‫Let's say repeat three common 0.5 five, then four image I'm going to take big space that has three
‫five.
‫And then again, I'm going to take repeat three and 0.5.
‫So that means while my first item.
‫0.54, 0.54, five, 0.55, five, then for four that I dumped, I'm taking 0.5, five, five, 0.5
‫and 0.5 that looks good to me.
‫But now we need to arrange all the items to help off this great template area.
‫So what I need to do is I need to say I done one.
‫This is going to be the one, then I need to define other items as well, so I'm going to remove one
‫of them.
‫Item one, then I'm going to have my item do.
‫Now, this is for Rule one.
‫This is one rule, too.
‫Similarly, I need to follow up on all three.
‫This is going to be.
‫I've done three or three, then these three are distributed among these three, remember?
‫Then I'm going to take my image.
‫That's the name I have given.
‫So this is going to take three four.
‫Then again, three items will be there.
‫Item four.
‫Item five, item six looks good to me, and then there will be a gap up one them if I get back here.
‫Scroll down.
‫OK, looks good.
‫At least we have arranged everything.
‫Yeah, walking that.
‫The only thing we need to take care about is this whole alignment.
‫And I think that we can do easily.
‫So I like to do is select my demo.
‫And I think all of them are inside deep dive all of the text.
‫I need to get into my walking on these orange feedbacks.
‫OK, even the Pro-Chancellor description, everything.
‫So I can just jump here and I can directly select my feet and I can see text align center.
‫Save this one and get back here.
‫Looks good.
‫Oh, we need to add some padding if you observe.
‫We need to maintain some distance.
‫And we can directly add some water margin to our description.
‫So what I'm going to do is for a demo, your description and how we can add some margin mortem elected
‫three RAM.
‫Save this one and get back here.
‫OK, much greater now we have some space.
‫If you're thinking this is going to trouble you, this whole background thing does remove it.
‫Looks good now, there are few things that we can play with.
‫Maybe if there's images creating some issue the can then, but you need to take care of these guys.
‫And this is the perfect size to match what looks good.
‫No one is going to have this type of screen.
‫So, yeah, this is walking fine if you want what you can do is you can select this image and you can
‫provide the maximum height, maximum weight as well as a margin if you want.
‫If you have a problem with this whole image, you can that rest.
‫Everything looks fine to me for this particular section.
‫Have I scored on a bet?
‫We have our photo section.
‫So I think this lecture is getting pretty big.
‫Let's continue this topic in the next one.
‫I hope this was helpful.
‫Thank you for calling and I see you guys in the next one.