We arrived at our responsive site.
We arrived at our responsive part of the website, so we're going to use a few media queries and then
the site should be responsive in multiple instances, for example, tablet or phone.
So let's get started.
Now, we don't need to write any more e-mail, but what we do need to do is create media queries.
So I'm going to create two to eight media.
And the first one is going to be when the max width is.
Smaller than 900 pixels, then something should happen and another one.
When the mix with I was going to copy this, it's it's more than 400, I love it.
What I'm saying something and typing something totally different.
I just said 400 and 500 accents.
So let's go into the 900.
And now what I'm going to do, I'm going to take my side and pop it up here in the right side.
So let's take our page and put it in here.
And let's make it smaller.
OK, so I think we are under 900 now, this is already taking effect.
This is perfect.
And now we need to do a couple of things.
For example, in our Heather.
I think that Heather is
going to take the H1 and decrease its font size, so instead of having that huge font size going to
go with six ram again, this is just depends on your preference.
Okay, so this means we're under 900 and already this shrinks down.
Now, I'm going to also take all of the tools and change the font size perform, so this means all of
our titles right here.
Now for the navigation, let's go up here again, Knap, I also want to change this font size.
So when we are on the 900 pixels, was that means that we in a tablet format must change?
Well, what the hell did I just say to the one size?
At one point five Vibram, the killer said save and there were no options.
I just ran down a bit.
Now, the only thing I want to change in this specific incident is the about section, want to change
the spot right there.
So let's talk about idee.
And as to a CLECs direction.
In the column, that's Hitzig.
And this didn't take effect because, oh, yeah, I need to tell you the container.
Oh, well, so it's actually in the about container.
And there we go now it has disappeared, but we're going to take care of this.
You just need to target that image again, so about and within this about image.
I'm going to change its mean hide.
To five hundred fifty pixels.
And so we do this, there will.
Not that I need to do is stall this and this is about description, so let's talk about the idea again
within this about description.
Analysts change the margin from the top to to rim.
There's displayed as flags.
And change the flex direction to a column now and also align everything.
Into the center of the page hit Save, and there we go.
Now, this is it for it, that's for a tabloid mode, so let's see, how are we looking now?
That's pretty good, actually.
Now, let's go for phone mode.
And there's actually not much to it.
I'm just going to decrease as I actually am going to shrink this down.
First of all, this would be kind of a full mode.
So let's do a couple of things.
For instance, we're going to take the H tools and Sherrington down to 2.5 RAM.
So it'll be fun.
Sighs What are you doing, Norbert Key?
2.5 ram.
To make them note 2.5, yeah.
OK, that's good.
Most change on navigation also because this is way too large up here.
So harsh, nav, and as give it the first of a height of 15 viewport heights, OK?
Now, I'm going to change the direction into column.
And now let's go to our passion, if you will, so honored, at least we actually actual never items,
Lou, used to justify the content with space between.
And going to align the items to the center that said save.
And aren't we on the 400 other go now on the 400 and also want to change our H1 there, so let's take
this carpet in here and change it to form.
Is it safe?
That's much better.
And the very last thing that we need to do is go to about section.
And changed about image.
To have a Menwith.
All 350 pixels.
OK, let's save and now we can navigate with full page.
And hey, there we go.
There's your responsive page right there.
Okay, so hope you enjoyed this project.
I know I did.
And yes, see you in the next one or so in the future.
But I take care.