Lecturer: All right, let's keep working
on the smaller version of the Omnifood project.
Now, first of all,
we need to get rid of this nav open class in our HTML
because by default, of course we don't want it.
So we want the mobile navigation
of course to not be visible.
Okay, so let's go to our very last break point
that we set here.
So that's right here.
So here, everything looks good.
And so let's go down maybe to something like 700 maybe,
just to see if everything is still okay here.
And so here again, everything starts to look really cramped
and it starts to look
as if we might need some more space here.
So some more width for these three columns.
And so maybe it's time to now
give each of these columns here half of the space
and to wrap this one into the next column.
But let's see.
So here everything is good
because it has a lot of space now.
Here as well.
And now here, these pricing tables,
they're also starting to get way too thin
and the same probably here.
So this is not looking so good anymore.
And yeah, the same thing actually here in the footer.
So let's see if we can reduce it a bit more even.
But yeah, that makes everything even worse.
And I think we shouldn't wait until a width like this
in order to fix the problems that we just saw.
So maybe something like 700 is the right width
to start adding a next break point.
All right, so let's do just that.
So still in our queries.css file.
So @media
max width, and as always we need to convert that to em.
So dividing by 16 and let's round that to 44.
And so 44 is then 704 pixels.
So that looks ideal.
So 44em.
And then let's just get that
standard comment that we have here.
So this one was for tablets
and now the next one let's say
is like four smaller tablets,
so below 704 pixels.
And here we are of course missing that block.
And okay, so this is our next media query.
And let me quickly just go back here
just to show you what I want to do.
So basically everything that is four
and three columns in our grid.
So this one for example, is four columns.
This one here is three columns
and I think that's actually it.
But if we had of course a bigger page
then we would reuse those classes more.
And so we would have more and more grids
that had three columns and that had four columns.
But anyway, what I'm saying is that we will now transform
these grids that have three
and four columns to just two columns.
And so then we will have basically these two cards here
side by side and this list here below that.
And then here we will end up with a two by two grid.
So within two columns
and two rows to accommodate these four features, right?
So let's see here.
And so that's the grid three cols and the grid four cols.
Now this one here we didn't even use.
And while I'm not deleting it, just commenting it out
but if we did use it, then we would also now make this here
into just a two column grid.
Okay, and the same for four.
And so let's actually copy all of this here as well
and replace the four of course with two, and that's it.
So just one single line of code
and we have a two by two grid here all of a sudden.
So you see that?
That's a lot better like this.
It has a lot more space and the same probably here.
Right?
So here we are back to some beautiful colors
and even if we scale it down a little bit more
we will still have plenty of space
for all of this content here
even at a low width of just 500 in a bit, right?
Now here, this just creates visually a small problem
that this would look better if it was centered right here.
Right?
But well, that shouldn't be too hard.
Let me just inspect this part to show it to you.
So I want to show you the entire grid.
So this is what our grid looks like.
And so all we need to do is
to have this column here span all the way to the end.
So span these two
and then we can simply align the content
that is inside of the cell to the center, right?
So let's do that.
So let's grab the name from here.
So that is called the,
well, it's actually not here.
Let's see right here in the HTML then.
So section meals, and meal, and this is the one.
So diets which we didn't yet select in the style.css
but let's now of course manipulate that here.
And so let's do what I just said previously
which is to span this column
all the way to the end of the grid.
So that is remember, grid column,
and then we can say that it should start at one
all the way to the end,
which is, remember, minus one, right?
So for now that still looks the same
but now this element here,
so you see now it is actually occupying this entire space.
And so now all we need to do is to say justify self.
So remember that justify is for the horizontal alignment
and self is because we are setting this now
on the individual grid item and not on the grid container.
And so then we use self and not justify item.
So let's set that to center, and there we go.
And if we now analyze this, then it looks a lot better
because this content here is also centered
and yeah, it makes a lot more sense here like this now.
Now what I'm also noticing is that the spacing here
after the H two is starting to look too big as well.
So this one right here.
So let's fix that.
We already have that somewhere up here.
Just so I remember also what value we gave it.
So heading secondary,
and actually all we did was to change the font size,
not the spacing.
So I thought we had done that, but apparently not.
So the heading secondary has a margin bottom of 9.6.
So that's a lot.
Let's just try to reduce that to half here.
So that's 4.8 rem in our system.
And yeah, that looks quite good.
And we could of course fix more
and more things like make this one here also smaller,
also decrease the spacing here.
And we might do that maybe in next media query.
But for now, I will just leave it like this
because while I'm also not trying
to make it 100% perfect here
because this is just a learning project in the end.
So there's no need for it to be 100% perfect.
Okay, it just needs to like look usable at least.
All right.
So here everything is still fine, I would say.
Then here of course, now this looks quite bad,
so looks bad here.
And also at this point where we start,
actually the break point,
but remember that we need to cover at least like 200 pixels
or 150 at least.
And so yeah, this should also look at least quite okay here,
which of course it doesn't.
And so remember once again,
if we inspect these pricing plans here
that we made each of them only 75% wide, right?
So if we remove that then they would be back to 100%
and so then it does look nice again, right?
And so let's basically do that.
So pricing plan and set the width back to 100%.
So width 100%, and that should do the trick.
Well here is a typo, right?
Pricing plan.
Well that didn't really work.
Oh, and actually I already had a typo here before.
So this is called printing plan everywhere in the HTML
and in the CSS.
So well, am I gonna fix that?
Yeah, maybe.
Maybe I should fix that.
So let's call it pricing plan here.
So meal
then
printing.
So that was a typo.
The same here.
And that's it.
Now just let's fix it quickly also in the HTML of course.
So after the gallery.
So that's here and here
and here and here.
Okay, great.
Now that works.
So you see we reach our break point
and now that is a lot better.
Okay, moving on even further.
And here we start getting some next problems.
Maybe not here yet,
but if we take it down even more
then actually this content doesn't even fit at all
and disappears here in the right side.
And now we cannot even scroll there anymore
because we just hit that overflow X in the previous lecture.
Remember that?
And so now it disappears completely basically from our page.
So how are we going to fix that?
Well, the idea that I got
is to basically move these three here.
So basically these three navigation columns to the top.
So have them first here
and then after that I will want the logo column here
and the contact data column below that.
However, that sounds easier at first than it actually is
because I still want these two columns here
to have the same width
and I still want these three here
to also have the same width.
So we cannot simply define a grid with three columns
because that would only work for these three
but not for these two.
And let me actually show you that in practice
because that makes it easier to understand the problem.
So here in the footer,
right now we have this grid with five columns.
So let's grab this here
and change it just to three columns for now.
All right, so that makes it look like this
but remember how we want these three here
to actually be the first three columns,
or in other words we want these three here
to be in the first row, right?
So we can do that because we actually gave them a class.
Well we didn't select it here apparently
but there is a class name there, I remember.
So let's move down there.
Yeah, so here we have the address col
and then here we have the three nav cols.
Right, so nav col, nav col, and nav col.
So again, I think we don't have them selected anywhere here.
Nope, but let's do that now here.
And so what I said previously
is that we want them to be in the first row
and so we can for all of them say grid row one, right?
And that's actually it.
And so now they are right here
beautifully sitting at the top,
one column for each of them
and then these two here below them.
However, that is again, not exactly what we want
because now we want these two here
to basically occupy the remaining space.
However, there is only one grid cell left here
on the right side.
Well not this one here,
but here.
So we only have one grid cell left,
which we cannot really split up
for half here and half here, right?
That does not work.
And so what we need to do instead
is to create a grid with six columns,
and then we have each of these columns here
to span across two columns.
And these two here span across three columns.
And so that will then fix it.
So that's a trick that we actually have to do all the time
when we build kind of an asymmetric grid
like what we're going for here.
So let me show you what I mean here.
So let's use actually the repeat function.
So repeat six time 1fr.
And so for now of course that looks like this
but now here we will say
that we want each of them to be in grid column.
And then here we can simply say span across two.
All right.
And that did already work
even though it doesn't look like it.
So now here we have this empty one.
So, you see that this one here is spanning across these two
and these two and these two.
They simply do not have the same width right now,
these columns,
because the content down here does not allow for that.
So let's fix that very quick.
And so what I want is to select the logo col
and also the other one.
So the address col.
So logo col
and this one here,
we want them to span across three columns.
So span three.
Let's inspect that
and beautiful.
Let's actually turn this view off.
We can just reload and there we go.
And so now this is exactly what we were going for, right?
So these two are now basically sharing half the space here
while these other three are sharing the space up here.
There's just not enough space here right now.
So we could go ahead and increase the gap,
but that gap is actually coming from somewhere else.
So, so it is coming from the grid itself
and so I do not want to mess with that.
So let me simply add some margin
to the bottom of these three.
So,
that's your
3.2 rem maybe.
And that's a bit better.
So before everything looked a bit cramped
and we didn't have like enough space around this logo there.
Okay, great.
So that actually looks really nice
even at these lower width.
So this is really a great footer.
It still looks professionally designed, right?
Now here maybe not so good anymore
but we're also getting ahead of ourselves.
All we did here was to work on this break point.
And so that works good during all of these width here.
So all the way down, for example, to 600, right?
So well done here.
We're doing a great job of making this page responsive
and I think we will only need one more break point here
to really finish this part.
So only a break point for smaller phones are now missing.
And so that is exactly what we're going to add
in the next and final lecture of this section.