Original subtitles

Let's now finally start making

our Omnifoot 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 Meditech 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 down,

because again, without this Meditech 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 screens with.

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'd 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 all 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 a common screen width ranges.

So let's check it out here,

and here we don't need all this 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 a 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 Omnifoot and to 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 1,366 pixel.

So somewhere around here,

because these are these so-called HD ready screens,

and so we can choose some value between 1300 maybe,

and this one, all right?

So let's set or 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 the 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 M,

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

is equal to 16 pixels.

Now you might be wondering,

what is this M unit here instead of REM?

Well, this one here,

so REM is the root font size,

while M is basically the current font size,

but that's not really important here

because one REM is simply one M.

But the reason why I'm even mentioning M 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 M.

Now I'm not even sure if that's still the case,

but let's do it like that anyway.

So it safer like that,

and it works in the exact same way as the REM.

So media and then max width,

and here, remember now we need to set a value in M

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 1,350, okay?

So to convert that to M, we simply divide that by 16 pixels.

So I'm using this built in calculator here,

but you can use any other.

So 1,350 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 84M, 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 1,344 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 M here, it still works exactly the same way

as before we even started with responsive web design.

Okay, so I'll 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 with the exact same width.

Now with that, we created a new problem,

which is that now this heading here

is 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 to 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 breakpoint 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 well, we cannot make it perfect

for every single screen size, okay?

So one of the more common ones

might be a 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 everything 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.