Hello, everyone, and welcome back.
In today's video, we will learn how to create a responsive website using media queries.
Let's say we have this Web page.
We've got a dot, but an image and some text.
And we have to convert this Web site into this.
So it does a lift section on an aside section.
And when you open this on a mobile screen, this is how it looks.
The door bug changes or section fills the entire screen and the side fills the entire screen.
So let's get started.
Let's bring a bar, Ed.
All right, so first we need to add this aside.
So let's do that.
Let's create a div.
Inside the door.
We need these images.
So let's create that.
So image, it requires an asare see an old.
So this is the source.
And let's see.
This is all text.
Similarly, it requires a label as well to let's adopt.
Let's make a copy of this.
We need three, two, one, two, three.
Let's say it.
Copy the second one.
Dated.
Let's copy this label.
Let's face it.
Hugh.
Similarly for the third one.
Let's face it here.
On the last label.
Look, space, this one over here.
Let's save it.
Coming back to a browser.
And as you can see, we've got these images on labels.
So now what we want to do is we want to move section on these images next to each other.
So let's try that.
So to move something next to each other, we can use in landlock.
So section, let's say, a display in line block.
So if you look sure, the world looks like it's 70.
30%.
So let's say with 70 percent.
Let's give it a margin, right?
Say 16 pixels.
It's a little more, let's say, 24 pixels.
Let's save it.
Similarly for a side, let's add some properties, so display in Lane Block.
Would, let's say 25 percent.
Let's say that.
Coming back here on, as you can see, all these elements are next to each other.
Just that the styling is a bit off.
So first, let's reduce this image size.
Let's add some classes to these divisions, let's say place, rather.
Let's copy this class.
Wasted.
Q and Q.
It saved.
Let's select this division.
Places, rapper.
Let's give it a hundred percent with.
So one hundred percent with this would be the total with.
Available in the aside element, which is 25 percent of the entire world.
Similarly, let's say that.
So let's bring this up shoe.
All right, now let's select these images, so please rapper inside the rapper, we have the image element.
Let's give it 100 percent good.
So basically we are giving the total with available inside the def.
Let's save it.
And as you can see, the images have gotten smaller.
All right.
So coming back to you.
And as you can see, these elements aren't aligned at the top.
So when you're looking with display in block, you get access to another property vertical line.
So let's try that and we can give it a value stock.
Let's say that.
As you can see, a side element is not on the top.
So now we need to give it about Goncalo, right?
So let's give it this discard like she.
So coming back, Hugh.
First, let's order for a side.
So by Goncalo Color White the table.
Let's give it somebody say 16 pixels.
Let's give it a box sizing.
Say you bought a box because I don't want the weight to increase.
Let's give it a border radius.
Let's say eight pixels.
Let's go to some shadow so we can use box shadow.
So zero two pixels for the vertical shadow and five pixels spread or blurred and then harsh, let's
say triple E.
Let's say that again.
That looks good.
Also, after all these delay items, they've got this separate to.
So what we can do is we can use a border bottom for the place report.
So let's say border bottom one, pixels solid on triple A, the table.
OK, so we've got our water.
It's just that it's right next to that image so it's not visible.
So let's give a margin bottom.
So if I give my bottom, say, 16 pixels.
So it creates this space and our border is visible.
Also, if you notice the borders available for the last item as well, and we don't wonder.
So let's select the last item.
So please, wrapper list of type.
Let's say border bottom zero.
So we are just hiding the border and let's remove this margin bottom as well.
Let's save it.
And as you can see.
These properties are gone for the last item.
Okay, so it looks pretty much seem just that the Fonzie's looks a bit small.
So let's increase that.
So for the labels we have used paragraph.
So lace wrapper paragraph.
Let's say font size 18 pixels.
Okay, that looks much better.
All right, so moving on to the section, but let's give it a background color.
Let's see.
Background color white.
Let's give it a border radius.
Eight big cells that save it.
Let's give it a box shadow.
So again, let's give it a same value.
So zero two pixels, five pixels blur and hash trouble.
Let's save it.
All right.
So it looks pretty much the same.
Now, let's make it mobile, responsive.
So let's just create a web, Anderson.
Another tab.
Inspect.
Changed to the movie Illusion.
So, as you can see, our section is not taking the entire world.
So let's give it the entire world.
Let's bring it to you.
OK.
So do define special styles for mobile screens.
We could use media queries.
So are the rate media.
Screen on, let's give it up.
Marks with.
Let's say 768 pixels.
All right, so now what we want is to give full weight to section.
So right now it's a display in landlock.
So let's change it.
Do block.
And let's increase the red see?
Hundred percent.
Let's save it.
It looks better, but it has a lot of padding on left and right.
So let's see.
Was duct.
So over here in Maine, we've given putting off two percent and a boost in stock bottom to left, right
eight.
So let's change it to two percent on all the sites from the screen.
So we aren't updating the margin and excellence, so we could simply remove these properties.
On a date budding to Dupas and.
OK.
It looks better.
Also, the font size is a bit big, so let's produce docked.
So going back, Hugh.
Now for the fun size for Headingley views this property and further paragraphs to use this property.
So let's copy it and bring it down here.
That's based at.
So let's say font size 24 pixels for the heading on font size 18 pixels for the paragraph.
We aren't changing any other property, so let's just remove these.
Let's see what it looks pretty much the same.
All right.
So the section board is done moving onto the side.
All right.
So let's select the site element.
Let's say display block.
Let's give it a read off hundred booton.
Let's save it.
Coming down here.
And as you can see.
Block looks pretty much the same.
All right.
Now, moving on to the last part, which is the top bar.
So in the top of the logo and menu item, this center line.
So let's do that.
So the idea for your buddies, Dornberg, so harsh and Dornberg.
Let's say text align center, because these are all spun or because these are all in line item.
So we could simply use sticks lines into coming who?
OK, so the menu items are Sanderlin, but not delusional.
So let's check.
So Lugo has a margin, right?
So let's remove that.
So let's make logo.
Let's change the.
Marginalized while loop say zero exults.
That's David.
Also, we want the logo to be in one line.
So let's change the display value, let's say display block.
That's David.
All right.
That looks much better.
Let's add some sales for the menu items.
So menu item.
Let's increase the font size first.
So let's say font size 18 pixels.
Let's give it a margin talk, say, dwil pixels.
Again, it's not working because these menu items are in line elements.
Top bottom properties doing well in line elements.
So simply a change to display in line block.
Let's it.
Also, if I inspect this element.
There is a margin rate for all these elements.
So that's why these menu items aren't completely in the same dough.
So what we need to do is remove margin from the last item.
So coming back culotte, select the last item.
So menu item, last off type.
Let's see, margin right on zero.
Let's save it.
And as you can see, it looks much better.
And if we open the distribution.
So even the desktop was it looks pretty good.
So that's how we use media queries to create responsive websites.
So if you notice, Medicalise isn't something magical.
So the only thing, Medick, what it does is it helps you create breakpoints.
And after that, it's all styling.
It's all up to you how you want to design Lautz on different different screens.
That's all for today, guys.
If there is something that you did not understand.
Feel free to drop a comment and we will discuss it.
See you in the next video.
Bye.
And take care.