Instructor: 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 view port 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 in 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 a hundred percent 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,
well this one here is one of the break points that I use,
I would say always.
So 1200 pixels, because that is where we start getting
into mobile device territory.
Now, as we just learned previously
we shouldn't just base our 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 1200.
And so yeah, let's fix that right now.
So we will add a break point
at 1200 pixels which is something that I usually always do.
So at Media Max with
and now remember how we make the calculation
from pixel to EM, So that's 1200 divided by a 16.
So that's a nice around number of 75 M.
Let me grab this.
And so this is below 1200 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 design even changes a little bit
when we like do this, when we change the view port 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 length
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 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
to pixels here and to something 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 simple 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 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 1200 pixels now only has,
let's see so 120 rem, so it used
to be 1200 but now it is only 1080 pixels.
So that's actually a big difference, right?
So that's very cool.
This is a really an amazing trick
that we can use when we built 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 with this, it 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.
Alright, 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.6 rem.
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.
Alright?
So we do not change that mental convention that we have.
Okay?
The tertiary and font size, 2.4 rem.
So that is here the next step after three rem.
Next step 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 end 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.4 rem.
All right, so let's check it out.
So that still looks quite the same, but yeah
if you see here now this H2 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 1200, right?
We also need to test, for example, here
maybe at a thousand 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 the 1200 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 a logo here
and this button to be aligned to the side.
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 4.8 REM on the sides
while on the usual container we have 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 is 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.8 rem.
All right, yeah,
So that looks better because now there is more space
for this image here 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.
There's just something that I also noticed
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 that's fix that now actually.
So that's here in the menu as well.
So yeah, not in the header
but indeed here in the main nav list.
So here we want 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 this smaller width
it is time to then decrease that.
All right, So basically we want it to be 3.2 rem.
So one step down at this point here.
So gap 3.2 rem.
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 this
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.
Alright, so yeah, I don't find any flaws here.
We could maybe decrease all the spacing
also in the beginning at the end of the sections
so that padding, but let's not do that.
That's 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.
Alright, 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 that's fix that here.
And it can stay for now 9.6 REM
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 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 this too-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.