Instructor: Let's now finally start
making our Omnifood website responsive.
Now, before we actually write a single media query
for our page
we first need to ensure
that our HTML has one very important line
and that is this one here.
So this meta tag here might seem quite unimportant
but actually for responsive web design
it is absolutely crucial.
So if you wrote your HTML structure by hand
then you did not include of course this line of code here.
And so you now need to pause the video and paste that there.
Because again, without this meta tag here,
so without this line of code,
responsive web design will actually not work
on physical mobile devices.
So not on phones and not on tablets.
And the reason for that is that browsers on mobile devices
will basically zoom the page out by default
until it fits the screen.
And so that's not what we want with media queries.
We simply want to make our entire layout
so our entire design smaller, so less wide.
And so therefore we need this line of code here
which will make it so that
the page will actually match the screen's width.
So that's what this one here does.
So the width will be equal to the device width
and the scale initially should be 100%.
So one, and so what that means is that
it will not zoom out of the page
to fit it on the screen, okay?
But how this really works is not that important.
But what matters is that you need to include this.
So always include this line of code.
Okay?
So with that being said, let's now move on
to media queries
and let's delete this small experiment
that we did previously.
And so now what I like to do is to create a new file
for the media queries.
So here in our CSS folder, we create yet another file.
And this one I like to call queries.css.
And then here in the HTML,
of course, we need to include that file as well.
So let's duplicate this last line
and here change it
to queries.css.
And so now we have three CSS files
and well
that's no problem at all.
So let's close this down
and I will actually now move these other CSS files
here to the left panel
and then the queries on the right panel.
And you will see in a minute
why that is going to be really helpful.
Okay, and so now we're ready
to start writing our media queries,
but for that we need our breakpoints.
So basically the width
at which we want to set the media queries.
So let's use those two methodologies
that we studied in the last lecture.
So basically looking where our design breaks
and also taking into account common screen width ranges.
So let's check it out here.
And here we don't need all the space
because all we are interested in here now
is changing this width.
And we can even make it a lot smaller here
so that we can see our page a bit better.
So let's start here at 1500 pixels
and starting to make our page smaller.
Okay, now remember that here
we have a container width of 1200 pixels
down here.
So that's our common container
but here we actually have 1300,
so it's a bit wider.
And so already at this point here,
we can see
that the space here on this side
between the Omnifood
and the left side
is getting bigger than the space here.
And of course that's going to become worse and worse
as we decrease the width.
So here the design is not really breaking
but what we're gonna do is to at some point
also make this hero here 1200 pixels wide
just as the rest of the page.
So just as the common container element.
All right?
Now there is an extremely common screen size
at 1366 pixel.
So somewhere around here
because these are the so-called HD-ready screens.
And so we can choose some value
between 1300 maybe and this one.
All right, so that's set,
our first breakpoint there
simply to make this hero just as wide
as the rest of the page.
So basically only that change, at least for now.
Now there's one particularity about media queries
that I didn't mention yet
which is the fact
that we should also not use pixels in media queries.
So just like we shouldn't use pixels for our layouts
we also shouldn't use them in media queries.
And the reason for that is that using pixels will not adjust
to the user's font size setting in the browser
and also not to the user's zoom level.
And so that is exactly the reason why
throughout this whole project,
we set the font size here
to this percentage and not to a fixed size of 10 pixels
like we had it previously here.
Remember that?
So that was the whole reason why
here it is 62.5
because it is 10 pixels which is what we want
divided by the default browser font size setting.
And so just like here
we should now use rem instead of pixels.
However, there is one very, very important particularity
of these responsive units in media queries
which is the fact that they do not respond
to this font size setting here in the HTML.
Okay, so in other words,
what that means is that in media queries,
one rem is not 10 pixels.
Instead one rem will always be
the default font size browser setting.
So let me write that here actually.
Rem and em which is something similar
as I will tell you in a minute
do not depend on HTML font size
in media queries.
Instead, we assume that
one rem is equal to one em is equal to 16 pixels.
Now you might be wondering
what is this em unit here instead of rem?
Well this one here, so rem is the root font size
while em is basically the current font size.
But that's not really important here
because one rem is simply one em.
But the reason why I'm even mentioning em here
is because rem apparently has some bugs
in some browsers
when used in media queries
and therefore we should not use rem in media queries
but em.
Now I'm not even sure if that's still the case
but let's do it like that anyway.
So it's safer like that
and it works in the exact same way as rem.
So media and then max-width,
and here, remember now we need to set a value in em
and we didn't really choose the value yet
not even in pixels.
But remember from our previous discussion here
that we were looking for some value
between this one here and maybe 1300.
So let's try maybe 1350.
Okay,
so to convert that to em
we simply divide that by 16 pixels.
So I'm using this built in calculator here
but you can use any other.
So 1350
divided by 16.
So that's this strange value here
but I prefer to use like round values.
And so let's go with 84.
So 84 em,
and that's it.
Now here, let's add some comment.
I will just get this code from here.
And so this is below
and let's calculate the pixels now again.
And so that's then of course the other way around.
So 84 times 16.
So this media query will under normal circumstances
fire at 1344 pixels.
So 1344 pixels.
And so that's basically for smaller desktops.
So smaller computers basically.
Okay, so finally we have our first media query here
and we also have our first breakpoint.
And so now let's finally also write our very first CSS rule
in this media query.
And so we're gonna do what I said before
which is to change the max-width here to also 1200
just like we have it in the general container.
So just like this one here, right?
So let's write that here.
So max-width 120 rem,
and of course this rem here
has nothing to do with this em here.
It still works exactly the same way as before.
Before we even started with responsive web design.
Okay, so give it a save
and let's wait.
And there it is.
You saw that there we changed our width
and now it is completely aligned here
with the rest of the content.
So it has now the exact same width.
Now with that, we created a new problem,
which is that now this heading here
switched to four lines basically.
And this doesn't look so good.
And so let's also put down this value here a little bit.
So decrease it basically one step.
So that's easy as well.
So that's called the heading-primary.
And let's actually get
our most important styling values here.
And this time I'm putting them here in the bottom
because with that, we will be able to easier see them.
So let's see what the h1 is right now.
So it's at 5.2.
So 52 pixels here.
And so let's try to step it down to the value below.
So 4.4 rem.
So font size, 4.4 rem
and that does indeed fix it.
So let's see again.
And beautiful.
So now if the user has like a smaller screen
let's say some laptop that has maybe this size
then everything looks nice.
Well at least here
because if we scroll down a little bit,
then you see that here
we actually start having some problems as well.
And even more so when we start making it even smaller.
So that problem actually starts quite early.
So somewhere around this point
but let's not add too many media queries.
So it's not a good practice
to add like 10 or 15 or even 20 media queries
to fix every single problem.
So that's not so good.
And so instead
what we will do here is to simply use our media query
so the break point that we already have
which is somewhere around here.
And what we will do
at that point
is to switch this layout here
from the three columns to just two.
And with that, we should very easily fix this problem.
All right, so that's in our style.
And so now you can see why it is so helpful
to have this one here open on the left,
and this on the right
because then you can very easily see the style on one
and create a similar one on the other side.
So that's right here.
And here is the gallery with it three columns.
So I'm just copying all of this.
Makes it a bit easier.
And just delete what I do not need.
Switch it to two, and that's it.
Let's go back.
And there we go.
So now it appears that there is way too much space here
but while we cannot make it perfect
for every single screen size, okay.
So one of the more common ones might be 1200 pixels exactly.
And so there it does look quite okay, I think.
I mean, it's not perfect here,
but we don't need to worry about that
because we will probably also add a media query
next somewhere around this width
because here some more problems start to appear.
So now I just wanted to fix these first issues
that appear at the very beginning
because remember how I mentioned in the last lecture
or in the one before it
that what we do
basically when we built a responsive design like this
is to start at the top
so at the biggest width
and then make it smaller and smaller
and keep adjusting whenever our design breaks.
At least that's the way we do it
when we're building desktop-first
which is the case here.
Now, if we were building mobile-first
then would be the opposite way.
So then the code outside of the media queries,
so basically all the code that's here and here
would be for the smaller screens
and then we would keep increasing the browser window
and would add media queries here using min-width, all right.
But I'm not gonna go deep into that now
because, well that's not the way
we are doing it here right now.
And so I think
for now there's no need to learn that very deeply.
So actually that's it for this breakpoint here.
And so let's wrap up the video here
and create our next breakpoint in the next one.