Original subtitles

All right, and 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 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 breakpoint

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 comments

that we have here.

So this one was for tablets.

And now the next one let's say is like for 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 now 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, right?

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, entity grid, four cols.

Now this one here we didn't even use.

And well, 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 a 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'll 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 cars.

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'll 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 age 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.8rem in our system.

Not yet, 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 the next media query,

but for now I will just leave it like this

because, well, 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 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 it 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 would 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% white, 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 princing-plan everywhere in the HTML

and in the CSS.

So, well, am I gonna fix that?

Yeah, maybe I should fix that.

So let's call it pricing plan here.

So meal, done, princing.

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 and navigation columns to the top.

So I have them first here and then after that

I will want the logo column here

and the contact data the 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

while 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 a 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 you 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 built a 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'll 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 and 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 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.2rem, maybe.

And that's a bit better.

So before everything looked a bit cramped

and we didn't have enough space around this logo there.

Okay, great.

So that actually, it looks really nice

even at this 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 this 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.