Original subtitles

In this video,

we're gonna start targeting mobile devices.

And in particular, in this one,

we will make our website respond to landscape tablets.

And so, let's continue decreasing our viewport width here

so that we can find our next break point.

So, let's keep going down.

Right? And maybe let's stop here for now.

So, let's see if some things are broken here,

and for now it still looks quite nice.

But here, if we take a look,

then the text here is now looking quite bad, actually.

So, it's a really thin column with a lot of lines.

Also here, we start getting text and multiple lines

and the same here.

So, in some of these columns,

we have now four lines in here as well.

And also here, this one here.

So, this entire section is now a bit too high

because also this text here moved into three lines,

and the same thing actually here.

Now, since we're so zoomed out,

it actually still looks quite okay.

But, if we make it like 100%

and like imagining that this is a tablet,

then maybe we can start to see

that everything looks like really huge here. Right?

So, the design that we built has a lot of spacing

and it also has some really big text in some situations.

And so, we now should start making this a bit smaller.

Actually, let's move up a little bit more here

because this one here is one of the break points that I use.

I would say, always.

So, 1,200 pixels, because that is where we start

getting into mobile device territory.

Now, as we just learned previously,

we shouldn't just base or break points on the device width,

but also on where the design breaks.

And in this case, it's not yet really visible

that the design is breaking,

at least not in terms of the layout,

but still everything is quite too big here.

So, everything looks like huge.

So, even at 1,200.

And so, yeah, let's fix that right now.

So, we will add a break point at 1,200 pixels,

which is something that I usually always do.

So, at media,

max-width,

you now, remember how we make the calculation

from pixel to em.

So, that's 1,200 divided by 16.

So, that's a nice round number of 75em.

Let me grab this.

And so, this is below 1,200 pixels.

Let's say tablets here,

or actually landscape tablets.

So, tablets in the orientation of landscape,

because with just tablets,

we usually mean them in portrait mode. Okay?

And so, let's start fixing

that overall feeling that we have,

that everything is too big.

So, how do you think we could do that?

Well, we can now finally use to our advantage,

the fact that we used responsive units from the very start.

Now, in fact, everything that we're doing here only works

because we already have the other three responsive

web design ingredients already in place,

so we already have a fluid grid and responsive images

and responsive units, right?

Otherwise, none of this would work at all.

So, all the fluidity that we can see here,

like that the design even changes a little bit

when we like do this, when we changed the viewport width,

all of that is only because we already have flexible images

and a fluid diet in the first place, right?

And so now, let's make use of that other ingredient

that is responsive units.

Now, what do I mean with responsive units?

Well, I simply mean the fact that we have been using rem

all the time here, right?

And what that means is that all of these lengths,

so all of the sizes basically that we defined

anywhere on the page are dependent

on this one setting right here.

So, on this font size, right?

So, if we now change this,

every single length and every single font size

on the page will immediately change, right?

So, if we want to make everything smaller,

basically, we can simply change that font size.

And so, that is the big, big trick of using this technique.

So, of sizing everything using rem.

So, font size, and now for demonstration,

let me just actually set it just two pixels here

and to something really, really small.

So, five pixels is of course, way too small,

but I just want you to demonstrate the dramatic effect

that we can achieve with this symbol change here.

So, let's make this big again and let's zoom out here.

And so, watch what happens once we approach.

Yeah. You saw that?

Everything became really, really small, right?

And again,

all of that is simply because of the power of sizing,

everything in rem and then changing that one setting.

So, basically, changing the definition of what one rem is

right there in the media query.

So just with this, everything became small again, right?

Except here for these images,

because they are indeed sized in percentages, right?

Now, of course, we don't want to make

this dramatic of a change here.

So, here, actually I want to set it to nine pixel.

So, just moving it down one pixel, basically.

But of course, I also don't want to set it in pixel,

but in percentages.

So, nine pixel divided by 16 pixels.

So again, using the calculator here,

nine divided by 16

is 56.25%. Okay?

So, 56.25%.

And so now, the change will not be as dramatic,

but there will be some change.

So, let's see, and there it is.

So, all of a sudden everything became just a small tad,

smaller, right?

And so, this can make a difference, indeed.

So, even of course, the layout itself,

as we come here is now smaller, right?

So, it was already touching the sides here,

but now, not anymore because now our container

which used to have 1,200 pixels, now only has, let's see.

So, 120rem,

so, do used to be 1,200,

but now it is only 1,080 pixels.

So, that's actually a big difference, right?

So, that's very cool.

This is really an amazing trick that we can use

when we build these kinds of websites.

So, back in the day,

when I built my first responsive website

and I didn't know about this.

Well, I would simply have to go and change manually

all these single pixel length and all the font sizes

that I had defined in pixels and that would be so much work.

And, but this is really a lot easier.

Now, of course, that doesn't cure all the problems.

So, some text is probably still a bit too big.

So, we can fix that.

For example, this text right here still looks quite big.

So, the secondary heading

and the same also for the tertiary heading,

and probably it's also time to decrease

the spacing in our grid.

So, here, the spacing between these columns

is starting to get really big.

And maybe, here also we have a little bit too much space,

all right?

But, by far, the biggest and most important change

that we did here was this one.

But anyway,

let's now decrease the secondary and tertiary headings.

The primary, I think, is not necessary yet

because we just did that here.

And so at this point, actually,

the primary heading has the same size

as the secondary heading.

So, that doesn't make a lot of sense.

And so, in this media query,

let's now move both of them here, one step down.

So, from 44 to 36, this one,

3.6rem.

So, and I'm still doing the calculation here

as if one rem was still 10 pixels. Okay?

So, just for consistency with the initial code,

I will always still assume

that one rem is 10 pixels here, all right?

So, we do not change that mental convention that we have.

Okay?

The tertiary

and font size,

2.4rem.

So, that is here the next step after 3rem.

Next up, as I was saying, let's also change the grid

a little bit.

So,

let's change the column-gap.

Let's go one step down.

So, 4.8 is after 6.4,

and then the row-gap,

and this one was very big to begin with.

And so, let's take this one down, even two steps.

So, to 6.4rem.

All right. So, let's check it out.

So, that still looks quite the same,

but yeah, if you see here now,

this edge too, now changes a lot, actually,

and also the spacing here, now looks a bit better.

And especially if we make this even smaller,

so of course we cannot just test at 1,200. Right?

We also need to test, for example, here,

maybe at 1,000 pixels.

So, 1,050 right now,

because of course we will not add a lot of media queries.

Maybe the next one is gonna be like at 900 or 950.

But, so in that range, it needs to look great, right?

So, here, it's actually still not so great,

but I will leave it like this for now, actually.

So, this section here is a bit hard to fix

and I will maybe fix that a bit later

once we go into the next media query. All right?

But yeah, so I think everything looks a lot better now,

even at this width.

So, we just did 1,200 media query, but even here,

it now looks quite decent, right?

So, this is good already.

Let's just go up a little bit

because here, now the spacing on this side

is different than it is here.

So, you see that this one here is now more on the inside

and the same here on this button.

And so that does not look good at all.

So, we now want this logo here and this button

to be aligned to the site.

So, having basically this same padding that we have here.

So, let's see where that is.

So, that's in the navigation or actually in the header.

Yeah, right here.

So, we have a padding of a 4.8rem on the sides,

while on the usual container,

we have a 3.2.

And so that's what we also want in the header.

So, let's actually copy this line of code here

and put that in the header.

Okay, great.

So, now that it's consistent

and I was just thinking that here,

we actually also have this big gap that we had in the grid.

So, that's the exact same gap, so let's also decrease that.

So, here in the hero, you see,

well, it's actually here.

So, that the gap is 9.6.

So, let's also take that down to just 4.8.

So, here, the hero,

4.8rem,

Oh right?

Yeah. So that looks better because now there is more space

for this image to grow a little bit.

So, that looks nicer.

All right.

Then of course, it starts breaking here again at some point,

but that we will fix later.

That's just something that I also notice,

while preparing this lecture here,

which is that on a like a big size,

we actually have way too less space

between these menu items.

So, that's something that we should have done better

in the last section.

So, let's fix that now, actually.

So, that's here in the menu as well.

So, not in the header, but indeed,

here in the main-nav-list.

So, here we want a 4.8 at the normal state,

so, one step up from 3.2.

And so that does indeed look a lot better,

but now as we come to the smaller width,

it is time to then decrease that.

All right?

So, basically, we want it to be 3.2rem.

So, one step down at this point here.

So, gap, 3.2rem.

Okay?

So let's, yeah.

So, see how the spacing decreases there.

So, that looks better now on this, let's say smaller screen.

So, at this point, we might be ready to actually test us

on like a virtual tablet here, like this iPad,

and it should be in the landscape view.

So, that has 1,024 pixels.

And so, that should look good in the media query

that we just did.

And indeed, I think that it does.

So, this looks probably a bit similar to what we have

when we scale it up.

So, in the view for the big screen

that we developed over the last section.

Now here, again, it's not perfect,

and we might fix that a bit later.

All right?

So yeah, I don't find any flaws here.

We could maybe decrease all the spacing

also in the beginning and the end of the sections

so that padding, but yeah, let's not do that,

that starting to become too much work.

And yeah, we can also do that

maybe in some next media query.

Now, maybe just to make this really a lot better,

let's maybe actually fix this one here,

simply by removing some of the padding here on the sides.

So, this entire element here

is called the testimonials-container.

So,

I know that was way back.

So, while you're following these videos here

on making the page responsive,

you might need to stop the video from time to time

in order to go back and analyze the code

that we are changing. All right?

So, I cannot always go back to the HTML

and find exactly what is the element that we need to change.

So, I already know that beforehand.

And so I can just tell you here

so that we do not waste too much time. Okay?

So, this testimonials-container here is again,

what has that huge padding.

So let's fix that here

and it can stay for now 9.6rem

at the top and bottom just to stay consistent.

But then at the sides, I also wanted to have the same 3.2,

just like the header and the container.

Okay? And so that's now looks quite better again,

because now the text looks a bit more like a square here.

Right? And also now the alignment is exactly

as the rest of the page.

Okay? Now here, of course there is these two big spacing,

but that's not a problem. All right?

So, I think we are done here for this media query,

but of course we will need a next one soon.

So, maybe here, for example,

we start getting some more problems, and yeah.

So, let's do that in the next lecture.