Original subtitles

Let's keep working on our responsive layout.

This time, adding another breakpoint

and another media query,

which is going to respond to tablets.

So in the last lecture,

we introduced a breakpoint at 1200 pixels.

So around here,

and so we fixed our design basically at dead 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, immediate query should not work

at just one specific point.

So instead, as a rule of thumb,

I would say that immediate 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 add 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 of 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 cramped together.

So there is not really enough space here for separation.

Then 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 is not enough width basically

to fit this content here on the left side,

and so we should fix that as well.

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 now find the exact breakpoint

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 here 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 round 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 to 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 breakpoint.

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.

All 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.

All 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.

So that immediately fixes some of the things here,

but again, the media query cannot just work at this width,

but it needs to work like maybe at least until here.

And so here of course,

this does look acceptable anymore, right?

And so now at this breakpoint

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.

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.

All right, and so now changing that to just one column

is very, 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.

All 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, 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.

And 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 textbox

and there's a hero image box right here.

And so we can basically set text aligned to center

in both of them,

and that should then will 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 with 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.

All right, so it is huge line here

and then just one words 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 central this content right here.

So that content right there is this delivered neals.

All right.

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 neals,

and now how do we center content using flexbox?

Well, that's just justify content set to center.

All right.

And I'll hear about that spacing in the hero.

So let's see what the padding is currently.

So we have this here 3.2, just like any 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 a 4.8,

but I think we should use a little bit more space here,

so let's actually increased 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 one more up

because of our visual hierarchy.

So this content belongs more to this one here

then to the image.

Okay? So our delivered neals right now

has a margin top of eight rem, so that's really a lot.

So let's move down 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.

All 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 to select it 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 breakpoint 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,

to our kind of more narrow and to 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,

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. Ah, 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 this 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 1fr

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, 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, 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 breakpoint right here.

So I think that's 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 a 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 screen 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 use 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, there's 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 that's the 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 2/3 for the content

and 1/3 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 a 33.3%.

All right.

But now if we wanted to change that

more to like a 60:40 ratio, we could simply do this.

So .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 will have three and five, which is a 60%

and of course two and five is a 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 1fr,

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.

Oh, here's the spacing just look 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 or things,

but well, 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 forum,

let's just add some margin there.

So margin to the top of maybe 1.2 rem

and that looks better here because now the spacing

seems to be the same,

at least somehow between these form elements and the button.

All right.

So I think that this looks nice.

So even here at this breakpoint,

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 breakpoint.

But yeah. So here it's again in two lines.

And so yeah, we're going to 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

and 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.