‫Hey, there.
‫Welcome back.
‫Welcome to our new section in which we'll be discussing about mobile responsiveness.
‫Then now we have been discussing everything according to the screen size of our laptop, Beckstrom or
‫whatever the device you have.
‫But now let us decide how things will change if I try to decrease the size or if maybe I'm trying to
‫use the dongle device for responsiveness.
‫Maybe I'm using different device iPad, or maybe I'm using some iPhone or maybe any other Android device.
‫How responsive my gourd is, I need to check that.
‫So this is the only device that can help us to check all type of responsiveness.
‫For now, I'm going to go into the manual mode, or I should take the off mode.
‫If you click it, it will give you all the options.
‫This is the most common one, so you can see all type of device and let me off this one for you.
‫So this is the current state.
‫I have added three images and gave them a class of mobile tablet and extra so I can control.
‫And then had I just added weight, height as well as margin so I can have all of them easily visible
‫what we are going through and why this lecture is important.
‫The first thing is we are going to understand how to apply CSF to specific device size only.
‫For example, I want maybe this image should have border when I'm on my mobile.
‫Maybe this image should have water when I'm working on my tablet.
‫Or maybe if this image should have border when I'm working on my stop.
‫Now why I'm discussing this.
‫If you understand how to control the image, you can control anything else.
‫It's just a different selector.
‫So that's the only difference.
‫Suppose I want to change the font size of my bag, so I just need to understand what type of size I
‫need to walk.
‫So maybe I just need to control the meter inside my mobile weight.
‫Let us take a quick example, and then we will discuss about all of the other thing.
‫So first, I'm going to do is I'm going to device the same text.
‫That means how we are going to add this sizing thing.
‫So you need to use added.
‫And then how you can see what option about media screen, what is this and how this is important?
‫So this is the media type.
‫No immediate.
‫I can be related to print media.
‫I can relate it to screen or anything else.
‫And even if you don't use it, it's going to work.
‫Fine print basically means if someone is going to print your page, you can give us bits of.
‫We don't need to discuss about this.
‫We just want our screen, actually.
‫So get back here.
‫This is our screen and we just need to pass the size here.
‫I just need to use and and then I need to pass this size from which to which I need to apply specific
‫CSF.
‫Before discussing this case, let me discuss about this as a spark.
‫So what I'm going to do is I'm going to select the image middle class mobile and then I just need to
‫add a border.
‫So suppose I'm going to add a border big five pixel solid.
‫For now, let's take any color, maybe blue just for now.
‫So this is deceased, which will be applied when we go white in this size.
‫Now, here or now I'm going to take max size.
‫That is my max width.
‫As 600 pixels now, this will be pixels because we are going to take exact size.
‫Now let's test this one.
‫If I jump here, the first thing I need to do is I need to zoom out and go back to 100 percent.
‫I'm going to click on Reset.
‫Now, if it does this out, make sure you check out the right hand corner, right top corner.
‫As soon as I hit 600 pixel.
‫You can see I now have a border.
‫Out in out in that means once I hit this screen size, I'm going to have all these excess inside this
‫activity.
‫Now this 600 is pretty amazing.
‫MEN Brigade 350.
‫Get back here.
‫You can see it's activities, not now, activity, not now, activity, not now.
‫So that's how this is going to work.
‫Now this, I think, just generalization.
‫There are great points that means from retirees to retirees, but we are going to follow mobile from
‫which sites to retirees.
‫We are going to hold tablet.
‫And we also need to understand what is this max with.
‫This was only the example part, so you can understand how this whole grid is going to war.
‫I hope you got the best idea.
‫Now let's understand how we need to pass this size.
‫Also, you can remove this on head if I jump and see everything is working fine.
‫So how this marks and minimumweight walk, Mark, so it means that this is the tolerance level that,
‫OK, still three, 50 percent.
‫We are going to apply this property, then we are not going to apply.
‫That means this is the maximum tolerance.
‫I'm going from zero to 50 to 100.
‫I'm still going to apply this maybe 200 Pixel, 250 Pixel, 349 pixel.
‫I'm still going to apply this.
‫But as soon as we go above 350, this will not allow maximum.
‫It is going to support this medium build 350 zero to 350.
‫Now here we can also add minimum minimum means.
‫That means we know that we are not going to support above that with this support.
‫For example, if I choose minimum here as.
‫500 pixels and stuff mobile, if I select the tablet one.
‫Get back here, you can see in our selected tablet.
‫If I just go at 235, increase increase.
‫Increase, increase increase.
‫Nothing is going to happen as soon as we select 500, as soon as 500 is touched.
‫We can see our border.
‫But again, if I increase, nothing is going to happen.
‫Why?
‫Because our 500, it will select this minimum.
‫It shouldn't be 500.
‫However, it can be anything that is the tolerance level, as you can see.
‫That minimum, it can tolerate 500 below that it will not tolerate if I say maximum.
‫That means the market value, it can tolerate this above that it will not tolerate.
‫That's how you are going to remember this.
‫Now, if you remember, I use a dumb breakpoint.
‫What was that?
‫So most of the company's divided these screen size, and they're defined that zero to 40 will be for
‫smartphones.
‫Then 41 to seven 769 will be for tablets are bigger phones and then 769 to one two seven nine.
‫They'll be for laptop or bigger tablets or maybe smaller desktop.
‫And then from 20 plus, that will be large tech stop or monitor.
‫Now how we can apply on this setting.
‫So, for example, at stake for all three, if I say marks of 40 pixels, that means minimum at zero
‫maximum, it can go till 40 and hit.
‫I'm going to say mobile.
‫Now, if I say maximum weight off 768.
‫That means it is going from zero to a maximum of 768.
‫So what we can do is we can also provide a minimum conditions.
‫Here we can use many word and that will be from ordered one big source.
‫And then we can utilize four large that are seven six nine two one two eight seven nine.
‫And I'm going to utilize Dublin, and then here I'm going to utilize.
‫Next stop.
‫So if I jump here, I will see the current screen size that is one zero three five.
‫It still didn't stop.
‫Now it's down to tablet, it's down to smartphone.
‫So that's how this is going to.
‫I hope you got the idea.
‫That means now whatever this year says we are going to add in, this will be applied to these particular
‫sites.
‫So here the best example we can drive, maybe adding some B dogs or maybe some adding some background
‫color or maybe anything else.
‫So suppose let me add it here and inside that let me add a puppy dog and then makeni our lawn and 50
‫cent this one.
‫Get back here.
‫OK, so now we have a dog.
‫So what I can do is I can also control Dispute Dog, and maybe I can change the font size for them or
‫anything else.
‫Or Bragg in mobile, I want the U.S.
‫Font size as zero point atrium.
‫And maybe for my.
‫And I want to use one.
‫And for my next stop.
‫I want to use 1.5 for them, save this one.
‫Get back here now.
‫This is our next stop.
‫Sized decrease with our tablet size decreases with iPhone.
‫That's all this is going to.
‫Now this is the best example that means I'm only using images, I'm using paragraph, but there are
‫several things that you can do.
‫You can customize your team according to the size.
‫Now, since we can verify according to screen size, we can also customize all buttons.
‫We cannot customize how images going to look.
‫So that's why these media queries are important.
‫The first thing is we are in a mix of desktop as well as Mobile World.
‫You can see a big Banjoko website to use more on mobile.
‫A big job.
‫Websites are used more on tablets.
‫A big bunch of websites are used more on laptops, so you cannot fix only one screen size at this point
‫of time.
‫And that's why we use these multiple media queries.
‫If you still want to see some agendas, you can utilize background color.
‫And for this desktop, then you can use this and maybe for a tablet, you can utilize maybe aqua and.
‫And mobile focus you can utilize, maybe this one saved this one, get back here.
‫You're going to see how this is going to work.
‫I hope you got the idea.
‫So that's how we are going to control these media equity.
‫Now the next thing is if I just open the sidebar, there are chances that you want to keep all these
‫media queries in different file.
‫It's possible to depend on company, to company, developer to developer or how they are working.
‫So there are chances that some companies use a separate file and call this as this once it starts.
‫Yes.
‫So we have filed our cases for all the courts and then all these media queries.
‫Are inside responsive Nazi SS, and then what you can do is you can import just after your style or
‫taste, you have option to just use responsive Nazi SS.
‫Everything is fine because this code is loaded in here.
‫That means styluses isn't loaded from this point to this point.
‫And just after that, it will be loaded from this point to this point, exactly the same.
‫It is going to work fine.
‫You can see things are working fine.
‫OK.
‫This is the one we know there are certain companies that want to keep all of them the, you know, different
‫files.
‫For example, they're in search of responsive dart CSF.
‫They create maybe are different cases for love on mobile.
‫Different folder for tablet as well as different folder for next up.
‫We can still do that.
‫So here you can create a mobile dark case and then just copy the part.
‫And keep it inside mobile northeast, and then instead of using this responsive northeast to assess
‫what you can do it, you can attach your mobile doctors to her.
‫You need to apply for stylus cases, then I'm going to apply for Big Storm.
‫Nazi SS.
‫And then I need to have their CFS as well as.
‫My mobile lord CIUSSS.
‫So I just need to apply all of them.
‫Remember, I haven't decided this size yet, so I need to do that four justices Mobile or CSIS.
‫Now I need to create their dogs.
‫Save this one.
‫And then I need to copy this one.
‫Create mixed up Nazi SS, save this one.
‫So now I just find they're there to see us as part, I need to define their size.
‫What I can do is I can utilize the media attribute here, and I can define the minimum as well as maximum
‫bid so hard I just need to use media and all I have to give is I have to provide the minimum as well
‫as maximum.
‫For example, here I'm using the extra boxes.
‫That means I need to use this particular size, which is for next stop that makes up this one and get
‫back here.
‫So this is going to be or let's drop the minimum weight and the maximum weight.
‫Similarly, I need to do red tablet as well as mobile phone.
‫So let me copy or tablet here.
‫And Heather, let me add for mobile phones.
‫So I just need to define the max with her because the minimum will be zero.
‫And let me save this one.
‫So now all these three files that is due next obnoxiousness, the mobile court cases, as well as new
‫tablet or CIUSSS, will work fine with these sizes that we have provided with media attribute.
‫And remember, I haven't attached the responsive dots users.
‫So yeah, so this file is not attached with are indexed on HD immolate.
‫Now if I get back here.
‫You can see this is working fine.
‫So this is our next stop right now.
‫And here you can see its tablet.
‫And now it's going to be a smartphone.
‫So this is working fine.
‫And if I get my kid.
‫Let me do one thing.
‫Let me also connect my responsibilities east and just come in this one, so let me use control and slash.
‫And this is a tragedy that has come in, so this is not going to affect any changes.
‫I hope you got the idea how you are going to add all these three this, which is our responsive file,
‫but they are divided into three parked next top tablet as well as mobile.
‫And how do we have defined the mediocrity?
‫I hope you got the best idea.
‫Now let us also understand one other important point, which is overriding that means this style Nazi
‫curses is general file that is applied on all sizes.
‫Now, when we are using the extreme narcissist, that means we are overriding some of the features from
‫style or CIUSSS for this particular size.
‫Similarly, when we go the tablet talks, we are overriding some features and with more wild.
‫Yes, we are overriding at this point of time.
‫We are using this minimumweight as well as maximum work to understand things for a particular shape
‫and size.
‫But you will see in many cases that they directly define the maximum.
‫Not only are they directly defined in minimart, only why?
‫So we can use the power of overwriting head whenever we don't define any type of value.
‫The value by default is zero.
‫So if I don't define minimum with her, that means it is going to be from zero to one two seven nine.
‫Or if I don't define this tablet minimum width, then it is going to be zero two seven six eight.
‫And here it is, going from zero to 14 zero.
‫Now what I mean by this, this is important.
‫Remember, this is important.
‫If I'm going to use this parameter, these values, that means I have stylus CIUSSS, which is applied
‫on all the cases.
‫Then I have this text, Robert CIUSSS, which is applied from zero to one two seven nine.
‫And if I get back here, you can see this is working at zero two one two seven nine and currently it's
‫one zero seven six.
‫Our size is now in the next case, this will overwrite.
‫That means all the changes will be there for the stop.
‫But if there is any common thing, it will overwrite.
‫So as soon as I decrease the size.
‫Now here you can see the deck stop is activated, the feature of the stop is there, but the common
‫feature of tablets are overwritten, so if you see the paragraph, calories changed.
‫Because this was common in both files, that is our next stop.
‫The background color as well as the tablet.
‫Now, tablet is coming after tech stocks will be up over it.
‫Now this is working fine.
‫As soon as I decrease the size now mobile feature is overriding.
‫That means now we have this mobile phone size as well as mobile background color.
‫Why?
‫Because at the end, we have used mobile.
‫So remember, we are using the sequence from top to bottom.
‫This was general and applied on all the cases.
‫So if there will be any type of size, there will be any type of common element, any type of content
‫head inside our style or CSF.
‫It will be applied on all the cases, but as soon as we introduce some overwriting here and next on
‫broadcast, we are going to apply this genius.
‫But as soon as we override something else after this, we are going to apply that genius.
‫If I override something else, we are going to apply that genius.
‫So remember at this point, these what I think works well and we need to work with zero to the maximum
‫limit.
‫I hope you got the best idea, you will learn more about them during the projects because here we are
‫understanding about the concept.
‫We are using some practical examples to understand them.
‫So the next thing you have to do is you have to practice yourself and then later in the project also,
‫we are going to use them.
‫So by the end of projects, you will have good understanding about each of them.
‫Don't worry.
‫Just practice and then project.
‫Also, you can keep either these three or you can use the responsibility as anyone will work fine and
‫as a quick advice when you have tons of code in your responsible CSIS, then it is recommended to divide
‫them.
‫Otherwise, don't use them, don't use them.
‫It is going to create confusion.
‫Just use responsibly to assess it totally depend on project as well as the amount of oil you have if
‫you have tons of coal.
‫It's hard to manage a single file divided them.
‫But if your file is small and you can manage things, then just keep them in one lots.
‫That's all, I hope you got the idea.
‫Thank you for following, and I see you guys in the next one.