Instructor: Let's keep working on our responsive layout,
this time adding another break point and another media query
which is going to respond to tablets.
So in the last lecture we introduced a break point
at 1200 pixels, so around here.
And so we fixed our design basically at that screen width.
So here now everything looks good and let's actually Zoom
out a little bit so we can see like everything at once.
So again here everything looks good,
but of course a media query should
not work at just one specific point.
So instead, as a rule of thumb
I would say that a media query should work
over a range of at least 200 or 300 pixels.
All right, so as I had already mentioned
we should not like at a media query every
50 pixels to fix every single design problem
that appears as we scale down the page.
And so let's now go down maybe 300 pixels
to 900 and analyze what our design looks like
and if we need to fix something here.
So first of all, this heading here now went
into four lines so this doesn't look really good.
And overall there is not really a lot space here anymore
in this hero section to have this content here
on one side and the image on another side.
Also down here we see that these logos are way too big
at this point and they're really crammed together
so there's not really enough space here for separation.
Then, oh, here, also this title now moved
into two lines and so that makes it so
that this card on the left side is bigger than this one
so that's not ideal as well.
Then here again, we have that problem that there's
not enough width basically to fit this content here
on the left side, and so we should fix that as well.
And yeah, here also this image is looking now
a bit too narrow
and probably we could also make this here now wider.
So these input fields
they also look a little bit too small to me at this point.
So it's time now to make some
of the things here basically move into just one column.
For example, here, we could switch
from these two columns to just one
and I would say we should do the same thing also here
in the hero.
And so let's not find the exact break point
where we are going to do all that.
So let's see here.
So here at least this part still looks okay.
And so I think I will go
with a width where this year breaks into another line.
So something like 940 pixels.
So let's go back and add that new media query right here.
So at media max width
and now let's again do that calculation.
So 940 divided by 16.
And let's route this one to 59 EM.
And so that would be 59 times 16.
So 944 pixels, which is perfect.
So 59 EM, and let's again add some comment here
just so we also know what these values here actually mean
because 59 EM is not really that intuitive.
So 944 pixels, and let's say
that this one here is more for tablets.
So we're still kind of thinking
about devices here but also using of course our design
to really see where the design breaks
and not simply use blindly something like 900 pixels.
So instead our design breaks something
around here and so that's where we put our break point.
But anyway, let's now scale
down the value of one REM even more
to basically make the entire design a bit smaller here
once again.
So that's exactly
remember what we did here previously, right?
So now here at this width one REM is nine pixel.
And so now let's move
that to even smaller at eight pixels, right?
So here we will want the font size to be 50
% and that's of course because eight pixels
which is our target divided
by 16 pixels is 0.5, which is 50%.
All right?
So that immediately will have some impact right there.
And I think I need to reload the page here.
Yeah, so that immediately fixes some of the things here
but again, the media query cannot just work at this wave
but it needs to work like maybe at least until here.
And so here, of course
this doesn't look acceptable anymore, right?
And so now at this break point
that we are working at currently, we need to do some of
the changes that I just talked about at the very beginning.
So first of all
let's turn this hero section here into just one column
and then it will essentially become one
of these other types of hero sections
that we saw before in our layout lecture
where the content here is on top and centered
and then below that there is some image.
And so that will then be this image right here.
So let's do that.
And so let's of course start by checking our current code
so that we can then change that.
So here we have our hero section and we have those
two columns because of this line of code right here, right?
And so now changing that to just one column is very easy.
So I'm just copying this now.
Okay, so that is the original, and changing that
to just one column is as simple as doing this, right?
So let's check that out, and it is already working.
Now this image here is huge and way too huge
but you saw that it was very easy indeed to
simply change the layout here to a one column layout, right?
And that's once again,
because of the power of CSS grid, it makes it really easy
to design responsive layouts because of that.
Now anyway, let's start by fixing the image here
which again is way too big.
So that's the hero image, which currently has 100% of width.
So let's take that down to something like 60%
and that is a lot better.
So it still looks quite big here
but remember that we also need to account
for smaller width, for example, something like this.
So I think that for now it looks good this way
but of course now we need to center everything here.
So let's see what we have here.
So we have,
let's see the html that's actually a bit simpler.
So here is our hero section.
And remember that the two columns are this hero text box
and this hero image box right here.
And so we can basically set
text align to center in both of them,
and that should then while center all
the text content and even the image content
in there because an image is an inline element
and so it is also affected by text align center.
So let's try that.
So hero text box, and the same width, hero image box.
All right, let's see.
And that already looks a bit better
and now we just need to make the same thing happening here.
And also what I'm seeing here
is that this content is way too wide.
So like this, it doesn't look good at all, right?
So with this huge line here
and then just one word down here.
So we need to add a lot more padding here
to make this look a lot more natural.
So we're gonna do that
and also try to center this content right here.
So that content right there is this delivered meals.
Alright, so let's check that.
And this one here is actually a flex container.
So here things are going to work a bit different.
So not with text align center, but we can still do it.
So delivered meals.
And now how do we center content using flex box?
Well, that's just justify content set to center, right?
And now here about that spacing in the hero.
So let's see what the padding is currently.
So we have this here
3.2 just like in the container, remember
But let's increase that to a lot, something like 80 pixels.
And let's see, Okay, beautiful, that's looking really nice.
Now here, that's just a bit too much space.
So let's actually reduce that
and let's figure out what the spacing is here actually.
So that should be exactly the gap here.
So right now in the hero we have a gap of 4.8
but I think we should use a little bit more space here.
So let's actually increase that.
So we decreased this gap in the previous media query
but that was because it was a horizontal gap.
But now vertically we need a little bit more here clearly.
And so let's basically put it back up.
So let's fix that spacing here and here.
Basically moving this one more up
because of our visual hierarchy.
So this content belongs more
to this one here than to the image.
Okay, so our delivered meals right now
has a margin top of eight rem.
So that's really a lot.
So let's move that to 3.2 rem,
and then about that gap here
let's maybe change that to 6.4.
So moving it back up one step from 4.8.
Okay, beautiful.
That looks extremely nice I think.
And even down to these smaller widths like this, right?
So I like this part.
So let's move on in our page
kind of like at this width here.
And the next thing I said we were gonna fix
is these logos here.
So they are a bit too big
and the spacing between them is getting too small.
And so let's simply make them a little bit smaller.
So that shouldn't be too hard.
So we just need this selector right here.
And so one step down from 3.2 REM is 24 pixels.
So just like this.
Okay, so that's looking better.
And we can also tone down
the size of this text here a little bit.
So that's maybe also looking a bit too huge now.
So that's the step number.
So here it is.
And indeed the font size is very big.
And so the next step below that is 7.4 rem.
All right, then let's keep going here
and here everything looks good still
at this point but remember that the media query
needs to work across like at least 200 pixels, right?
So we set our break point at 950 or 40, and so here
at least it should still look okay, so at 800, right?
But again, here we now have
that problem of this text moving into another line.
Let's make it a bit bigger just to see it better.
And indeed, we can see that our spacing
inside this card might be a little bit too big, right?
So this hasn't really yet adapted to our new layout
so to our kind of more narrow and less spacey layout.
And so let's fix that right now.
So just moving down here in our original code,
that padding is coming from here right.
So again, just grabbing that
and then moving each of these here, one step down.
So from 32 to 2.4, and the other ones to 3.2.
And just one more.
Okay beautiful.
So that fixed it.
And the spacing here now looks a bit more in line
with the rest of the content.
Okay, moving down a little bit further here.
So here it's now also time to basically turn all this
into just one column.
So basically one column for this content here
and then another column below that for this gallery.
So once again, that should be quite easy to do.
So let's move down here.
And so here is where that layout is defined, right?
So in these grid template columns.
Now we could also try
to play around with these two values here
maybe trying to make the gallery even more narrow
but I think it's time to actually just move it
to a one column layout.
So section testimonials.
And here we have a small typo.
So grid template columns,
and again just setting everything to one fr
which of course could be any other value, but like this
it will simply be transformed into one column.
So that works.
But now this will look terrible, right?
Because these images are way too big.
So we have a huge gallery here
because it only has two columns
but that is once again, very easy to fix.
So right now, let's actually try a layout
where the gallery is wider than it is high.
So maybe even instead of having a two by six
we can have a six by two, so six columns with just two rows.
So that's here at gallery
but I think we actually already did that at some point.
Yeah, right here.
So here we changed it to just having two columns.
And so now let's change it to six.
So let's see.
Oh, beautiful.
So that looks amazing.
So really cool.
We could have gone for maybe a four by three.
Let's try that also.
All right, But now it actually takes up too much content
and even more so at our original break point right here.
So I think that the gallery
like this is a little bit too big, and so let's really go
with six columns, but you see how easy it is
to simply change the entire layout of all this here
by simply changing one single value in the css.
So that's really just amazing what we can do with CSS grid.
So let's keep analyzing here at this width.
So just inspecting, once again, everything is perfect here,
I would say except for the navigation maybe
but that we will think about a bit later.
And so moving down here this one here also still looks okay
I think even though this one moved into two lines.
But the alternative would be to make these ones here now
like 100% of the width
and then I think they would become a bit too large
so a bit too wide.
Now what we can do is to add some line height here
to these list items.
And that we will do not just
of course in the media query, but simply in general.
So no matter what's green with
in this list there should be some line height.
So I think it should be,
well apparently it's more here at the end.
So here, let's try a line height
and more of a smaller one, like 1.2
and that looks already a little bit more friendly.
So 1.2, I'm not sure if we had used that already.
Oh yeah, so medium 1.2.
And so that's the one that we're going for now.
And also let's add the one that we have been using a lot.
So let's call it large 1.8 since we're here.
Okay, so that is now also fixed.
Now here, not a lot that we can change
because we already changed the gap of the columns here.
So I'm leaving it like this for now.
But then here again, it's time
to at least make this form here into just one column
and maybe give some more size to this image here.
So now it is very narrow
and it looks a bit unnatural like this.
So let's start by fixing that.
So yeah, so that's right here in the CTA section.
And the width of that image
is basically defined here by this grid, right?
So we have now basically two thirds
for the content and one third for the image, right?
Let me just write that down here.
So we have two in three because two plus one is three.
So the total is basically three parts.
And so two of that, which is 66.6%
and then the other one is one in three, which is 33.3%.
All right?
But now if we wanted to change that more
to like a 60 40 ratio, we could simply do this dot CTA.
And so if we changed this here to three
and to two then we would have a total of five
and so then we would have three and five, which is a 60%
and of course two and five is 40%.
So this will look a little bit better, hopefully.
And yeah, so that's nice.
But now again here this is way too narrow.
And so let's make this into just one column.
So that should be defined
by some other grid property, yeah, right here.
So this CTA form right here,
and grid template columns just one fr.
Giving that a save, and that looks quite good.
Right now the entire thing here just became a bit bigger
but that's not a problem at all.
Now here, the spacing just looks slightly off.
So let's see if we can add some margin there.
Let's see what we have actually here.
And I think that button is indeed here.
So this file is getting a little bit big
to easily find our things, but while
we could split it up even further, but that would then
at some point also be unmanageable having all these files.
Anyway, here is our button for the form.
Let's just add some margin there.
So margin to the top of maybe 1.2 rem.
And yeah, that looks better here because now
the spacing seems to be the same, at least somehow
between these form elements and the button now, right?
So I think that this looks nice.
So even here at this break point
let's go even a bit more down.
So 750 approximately
and still everything looks acceptable at least.
So probably around here is where we will have
our next break point.
But yeah, so here it's again in two lines.
And so yeah, we're going fix that soon.
But for now, it is time to think about the navigation here.
So at this point here
I think it is time to actually start our mobile navigation.
So having a navigation
where all of this here is basically hidden in some panel
that opens up once you click on the menu button.
So I'm sure that is something you have seen all the time
and this is what we will do in the next lecture.