OK, so the less we want to do to our pages, make it responsive and for this, I'm going to it up here
in the right corner.
Our tag right here for four devices and we just change it down to the iPad, iPhone, iPad.
There we go.
This will have a maximum of seven hundred sixty eight.
Now, when our website reaches to actually make it smaller, we have something smaller.
So if there's a small 300.
I can remain here, so as soon as we are under, let's say, 600 pixels, this is most phones.
Yeah.
And really small tags.
You see our well, our website just goes out of the stratosphere in order to fix this.
We are going to create now a media query.
So we're going to go down here type of comment of responsive.
And we're going to now type in at media.
I'm going to target when the screen is has a max width of some max width of 600 pixels.
So when it's under this next with the header will be displayed as grid and you can always see I'm changing
from flex to grid.
I'm going to use a grid template column of repeat.
Two times one F.R..
And we're going to justify the items now recentre.
So let's see what this does up here.
And why isn't this taking effect?
Did I not hit save?
Hmm, strange.
Let's take a look in our finished project.
Did I miss something?
This actually look like this?
So what am I missing here?
He media with 600 pixels.
Had the displayed great oh, not Collum ro.
OK, I messed up, so finish project and here we go.
Yes, we are changing it to have two rows or actually get two rows.
With each having its size still remains, but now it's on to Rose.
Okay, so it's having the same functionality.
Now let's take care of our main section and down we're done.
And for this, we just came to see us down here.
So section.
And they're so s. and we're going to display it as flex instead of grit, I'm going to change the flex
direction.
And the column and the section, all we need to do and we go to our website is now perfect.
I guess I hope you enjoyed this little project, as you can see, their differences when those flags
went is great, in my humble opinion.
It really depends on the situation, but mostly for her navigation, I would always use flags for sections
or larger sections where images are included.
And so far for cards, I would use also flags or in some instances grid and then for displaying, well,
main parts of the page I would use grid or for footer.
Well, for futer sections.
It depends on how large they are.
If we have only two items that I would use, maybe flags, but if I had more than two items, I would
use grid.
So more than two bundles, let's just say, OK, so that's pretty much it for this part.
I hope to enjoy it and see next time, but.