Original subtitles

Welcome back to our last lecture here,

and to the last media query that we need to implement

in order to now finally make our website

also respond to smaller phones.

Now, many times for mobile,

I like to use the media query at about 600 pixels.

However, we just did a media query

at about 700 pixels, I think.

And by the way, there is something really nice here

in this device view that I didn't show you yet.

Which is that you can click here on this menu,

and then here, show media queries.

And so then it adds that view here at the top,

which will show us exactly what media queries we have.

So this is the ones that we added,

and we can then click on them

and it will then move our screen there.

So exactly to that position of that media query.

So 75m is 1200,

then the next one was 944,

and then the one that we implemented in the last lecture

was this one here, so at 704 pixels.

And so that's

I don't think there's a need

to implement the next one at 600.

So that's just a 100 pixels less.

And so at this point, the design still looks quite nice.

All right, so visually, everything is okay,

so no need to add another one.

So let's maybe jump another 100 pixels to 500,

okay,

And once again, I'm doing all this here

basically so that you can follow my methodology,

and so that you can learn, basically,

the entire thought process

that goes into choosing these break points.

Because there is something really, really important

once you will implement your own designs.

But anyway, let's now inspect this here at 500 pixels.

And here, there is some problem.

So these logos are way too big.

So this last one is already even moving out of the page.

Then here, this image is starting to get really small,

and here the content is really big.

So the visual balance here in this section

is not really nice anymore,

and the same here and here.

And here, once again, the cart is getting really small

and while here it still looks okay.

Here maybe the gallery could be a little bit bigger

at this point, and also here,

this looks a little bit bad right now.

So even or button here, already wrapped in three lines

and here also in two lines,

which makes this icon here really small.

So that's not good at all.

And also here.

So here there is not really space for having

these two columns anymore.

And so that's yet another thing that we need to fix.

Right, so,

so basically what this means is that at 500 pixels,

the design is already too bad because if we set

a break point at 500, for example, then at 506,

let's say, the design would still be like this.

So it would still look similar and it would still be bad.

Right?

So let's try to find something in between here,

like 550 pixels.

So while it is still not ideal,

I think it's a bit more acceptable.

So here it is still at the text on one line,

here the images are quite a lot bigger than before,

and here at least the logo still fit on the page.

So let's set our break point at 550, approximately.

And of course actually out side of this.

So add media max width,

and let's do 550 divided by 16

and here I'm going to round it actually to just 34.

So that will then be 544 pixels.

All right.

So 34 M

and then quickly getting this comment here.

So below 544 pixels,

which is four phones.

Now okay, So from now on what we will do

is to have all the grids in just one column.

So there will no longer be multiple columns because now we

don't have enough space for that anymore.

So here,

what we did in the previous media query was to take the two

columns and four columns and transform them into two.

And so again, now it's time to change

that into just one column and the

same, of course, for E D grid that has two columns.

All right.

So that will already make a big difference.

And since we're working on the grid,

let's also dramatically decrease the gap.

So the vertically gap in this case,

because that's going to be the only gap that's left now.

So this is actually grid

row-gap, and let's say 4.8 REM.

And so let's go check it out.

So you see that here, we already have the new media query,

so we can click there and here, of course, for now,

things are similar

and well, this doesn't seem to really have changed.

Let me reload.

Oh and, actually I think I didn't even change.

Yeah.

So of course this should be 1fr,

it's actually just write 1fr then

and yeah, there we go.

All right.

Now the images are huge here and they're also not in the

right order anymore because basically what we want is the

image to be first, just like here.

So first the image then the text.

But since previously we had that Z pattern.

This is the order of the elements now in the HTML.

So we will need to fix that.

But first let's take a look at all of this

and indeed it looks now very big,

but it will be enough to just reduce this a tiny bit and

immediately it will start looking okay again.

All right, so there's a ton of space here now.

And so, so there's a ton of space here now, everywhere,

but again, let's say we are at like something like 420.

And so then suddenly it does look okay.

Right, except for this one here,

because this grid is not one of those that we just changed.

So here we will need to do that manually.

But for now what matters is, yeah, that this is now better.

So the images also make a lot more sense now here,

but yeah, let's now change things one by one.

And I'm going to start with removing a lot of the spacing

here in the hero.

So let's say that we make this even smaller.

For example, something like

the iPhone X will look like this.

And so then we have way too much space here on the sides,

right?

So that space is because way back we added that.

I think it was here in this media query.

Oh, and I cannot click it because if I want to click it,

I need to change back here to responsive.

So yeah, we added that huge space back here,

but now down here, it is too much.

And so we need to override that again.

So let's maybe work at this width here,

which is kind of representative of many phones.

So many phones are usually around this.

So between like 350 and 450.

Okay, so again,

removing now a lot of the spacing that we have here.

So let's actually see what we did back then.

So we had the hero,

so let's just grab that and then override

what we want to change in this situation.

So this here of course will stay the same.

We can also leave the gap, I think,

but depending let's put it actually back to 3.2,

which is what we had before.

Okay.

Now I'm not sure if that actually changed

but here it is actually quite visible that it did change.

So here the space is now way less than it was before.

And here, it becomes even more visible,

once we reach this point here.

Now there's also way too much vertical space

like here and here.

So let's remove that as well, but that

I think we didn't touch before.

So let's come back here to the top

where that section actually is.

So here we are.

So section hero,

of course the background color should stay the same.

And now I will just basically change both two half

so 2.4 there, and 4.8

maybe that's a little bit too, a little.

So the next one is 6.4.

Okay.

So that's better as well.

The same thing here.

So again, judging now on a real phone,

that looks quite decent.

So now it is all the content fits here vertically.

There's just some problem here with the button.

And so let me also fix that as well.

So the button right now has a little bit too much space

maybe here on the sides.

And also I think it's probably not high enough.

So on mobile phones,

we really need to make sure that buttons are big enough so

that we can actually tap them easily on phones.

So let's change that,

right here in the general

is where we have four buttons.

So let's grab this code here.

And so let's actually increase the vertical padding to 2.4.

Let's say, and then vertically, we need a lot less.

So let's say half.

So just like this.

And now they do again fit side by side and they are also

bigger and which will make them easier to tap.

All right, now just the image here.

Maybe it's a bit too small now,

so let's increase the width right there.

So I think we had changed this already before.

But we need to override that again

and here of course, hero image.

So that will fix that.

Yup, that's a bit nicer.

And now let's talk about these logos.

So of course there are way too big.

So now this one and this one do no longer fit.

So let's decrease that.

And again, this we already did before,

but now we need to make them even smaller

at a height of 1.2 REM.

So really small.

And now they fit just nice.

Even if the phone would be only like 300 pixels wide.

All right, let's, again stay at

something like 400 and yeah, let's move on here.

And so now we need to switch basically this row with this

row right here, because of course, remember that

each of these is basically its own row, right?

So we can see that nicely if we turn on the grid,

then here we go.

So basically what I'm going to do now is to manually select

this element here.

So this row, and then make it the first row.

Then these two here are still correct.

And then also I will change this one here with this one.

Okay.

So, back in our HTML,

I could now add a new class to these elements

that I want to select now.

So in particular, this step image box,

but instead I will simply use the nth child pseudo class.

Okay.

So again, this year is one of the rows of this grid, right?

And so I will now select this one

and I can then say nth child number two.

And now here it is number two and not number one,

because this is actually exactly the second child of this

element right here.

So this number here does refer to the number of the children

of the element and not of the number of the children

that has this class here.

All right.

So indeed, this one here is the first that has this class.

Right, but it is in fact, the second child of the container.

So of this element right here.

And so therefore we need to write the number two here,

even though for the selector, we still need this.

Okay, so that's a bit confusing.

I know, but that is just how it works.

So you just need to keep in mind that this number here is

the actual basically order of the child in the container.

So it has nothing to do with the class name.

Okay, but anyway,

here, what I want to do is to make this the first row.

So basically move this year into the first row.

And so that does indeed fix it.

Right?

And now I just need to select this last one

and move it up, also one.

So,

that is the sixth child.

And so right now it is in grid row number six.

And if I want to move that up one,

I can just write five.

All right.

And there it is.

So that was switched, and all the other elements

they are of course, simply laid out automatically

according to their source order.

All right.

Now the thing here is that the spacing

is now a bit ambiguous.

So basically the spacing between the image and the number

two here is the same as the spacing between the image

and a previous step.

And so that doesn't make a lot of sense.

So instead of course, this image

should be closer to this number where it belongs to.

And the same for this one, and the same for this one.

So it's sitting here at the middle and

that doesn't make a lot of sense.

Now we can't change the gap selectively in just some places.

Right, so the gap property applies everywhere,

but we can do a small trick.

So we can select all of these boxes here.

So basically all of these image boxes.

So, well like this one here

and then move it down just a little bit.

So using transform with translate.

So step-image

parks, and now of course we want to select

all of them and so transform

and then translate.

And again, translate is simply the easiest way

of moving elements around

without affecting the rest of the elements around it.

So we want to translate it vertically.

And so that's the Y direction and let's do 24 pixels.

Okay.

And indeed that is a lot better.

So it's now closer here to number

and yeah, that looks just perfect.

We could even align all of the thing here to the left maybe,

but I think that then it would look

strange with the circles.

So let's just leave it like this.

Okay.

So moving down here, everything looks good,

but then it's also time to make this one here actually

with just one column.

So this one still has two columns because it is not

one of these grids here.

So we did this one manually and therefore

that's why this didn't get affected.

So let's check out what this one is called

and it is this one here.

So the testimonials

and then grid template columns 1fr and that's it.

Right?

So that was easy once again,

thanks to the power of CSS grid.

And let's now also change this one here.

So the spacing between these is a bit too much now,

and also let's finally make this a 4 by 3 gallery.

So it just four columns.

So that is this one here.

All right.

Let's actually just grab these two, changing it to,

as I said, four columns,

because right now it is actually six and then the gap,

we can take it down a one step to 12 pixel,

and yeah, that is a lot better.

So now it is still beautiful and

we can still appreciate the images here.

We could maybe even make it with three columns again,

but yeah, I think it's good like this as well.

Now here, everything actually looks perfect, I would say.

So even here, and even when it is even smaller,

like this, for example, if we had like an older phone,

right.

But again, going back to 400, that's still perfect.

But of course, here we have

this problem that we also need to

now make this into two columns.

So that's very easy.

Right?

So not the meal section, yeah.

But here the CTA section.

So actually it's just this one here.

And so 1fr right there.

Okay.

Nice.

But let's actually make this image here.

Oh, well it disappeared.

Why is that?

Let's inspect because that shouldn't be happening.

I mean, we do not have a fixed width,

on this one, on the CTA.

Right.

And so it should appear, but well, it doesn't.

Yeah, but I think I know why.

And the reason is that this div. element here

does have no content.

So this one that has the image has in fact

no content at all.

And so therefore it also makes sense that CSS doesn't

then give it any height.

So before the only reason why it was visible was because it

was side by side with this other element here,

which of course has a lot of content.

And so then automatically the element that was besides it

also had the exact same height,

but now that is no longer the case.

And so if we want this element here to become visible,

we need to now give it, manually a height, basically.

So that's the CTA image box

and let's try a

360 pixels maybe, 36 REM.

All right, and that's maybe a little bit too much.

Let's decrease this back.

Just reload here quickly, and yeah,

I think that's a bit too much and maybe it would be even

nicer if we made this your first.

So made it appear before all this.

So let's tone it one down to 32

and then let's say grid row, one.

All right.

And yeah, that looks very nice.

Kind of as an introduction to the section here,

there's just too much spacing here now,

like in this text box still.

So let's also quickly reduce that.

So that's this,

and let's just set that to 3.2 on all four sides

and yeah, there we go.

Beautiful.

And I think that is actually all,

that I had to change here.

So if we take a look at it again on some actual device,

let's say the pixel two now, which has a 411 pixels

apparently, then I would say

that we have a very nice webpage on this phone.

Right.

I mean, it might look,

everything's still a little bit too big here,

but if you test this on an actual phone in your hand,

then you will see that actually

it makes sense to be this big.

So I did that actually before,

and it looked quite nice on my iPhone.

So that had this size right here.

And yeah, again, everything is just the right size, I think.

But of course these things are also a little bit subjective.

So if you want, you can of course, also

adjust some more things here and that would

then be another great opportunity for you

to practice these skills.

All right, so if you feel like it, you can do that,

but I will call it a day here and call this project

finished at this point.

So finished, at least in terms of HTML and CSS

and of responsive web design,

because there is still some things that we will want to do,

for example,

to actually make this navigation work when we click here,

because right now, while it is not really working of course,

and also I wanted to make this navigation sticky so that

when we scroll it stays

at the top and also I will want

these buttons here to actually work.

So when we click down that we then have some smooth

scrolling animations that goes to the corresponding section.

So for all of that,

we will need just a little bit of JavaScript.

And so I will show you how to create this kind of effect in

the next section.

But for now you can take a well-deserved break

because you did really, really well

in making it all the way to the end of this

huge, huge project and writing all this code here by hand,

in order to create such a great project and such a big

real-world project here.

So huge congratulations for making it this far.

And I'm really proud that you're still with me here and

I hope that you're proud yourself as well.

So take care and I see you soon,

once you're ready for the next section.