Instructor: 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 is a need
to implement the next one at 600.
So that's just a hundred pixels less.
And so at this point
the design still looks quite nice, right?
So visually everything is okay
so no need to add another one.
So let's maybe jump another a hundred 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 that is something
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.
Then here, once again, the card 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 our 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 basically what this means
is that at 500 pixels the design is already too bad.
Cause 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 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 or break point at 550 approximately.
And of course, actually out outside of this
so add media max width
and let's do five 50 divided by 16.
And here, I'm gonna round it actually
to just 34 so that will then be 544 pixels.
All right, so 34 M.
And I'm quickly getting this comment here.
So below 544 pixels, which is for 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 the 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 one fr
it's actually just write one fr 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.
Alright, 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 gonna 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
with 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 the petting, 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 to Hal.
So 2.4 there and 4.8 maybe that's a little bit two 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 with this, all the content fits here vertically.
There is 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 sites.
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 our 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 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 here we need to override that again.
And here, of course, hero image.
So that will fix that.
Yep, that's a bit nicer.
And now let's talk about these logos.
So of course they're way too big.
So now this one at 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, 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 gonna 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 N 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 N 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.
Alright, 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.
Alright, 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 the 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 box.
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, one fr
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 four by three gallery.
So with 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 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 is just this one here.
And so one fr 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 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 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 here 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 this section here.
There's just too much spacing here now
like in this textbook still.
So let's also quickly reduce that.
So that's this
And let's just set that to 3.2 on all four sites.
And yeah, there we go.
Beautiful, and I think
that is actually all that they 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 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.
Cause right now, well, it is not really working, of course.
And also, I want 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 them
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 well
in making it all the way to the end
of this 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