Voiceover: Hi there. Over the last lectures,
together we build a beautiful website
that you can be really proud of.
It looks really great on a computer so far,
but we also want it to look great
on other devices with smaller screens, right?
And as you know, this is where
responsive web design comes in.
So far, we built our entire layout with a fluid grid.
And now it's time to take care of media queries
to make our website truly responsive,
to make it shine across all devices.
So this is how our website will look
on four different screen sizes.
Basically, as the screen gets smaller,
our content also gets smaller, and we have less white space,
so that the website can be seen on a mobile phone or tablet.
So, media queries are what will enable our website
to call different CSS style declarations
based on the current browser width
or the width of a mobile device that displays our site.
These media queries will trigger at different breakpoints.
And breakpoints are screen width
at which we want our website to change the way it looks
in order to look good on all devices.
The standard breakpoints are for tablet and for mobile.
On this diagram here, you can see some possible breakpoints.
And we will define our media queries
for exactly those breakpoints.
When you're just starting out, the easiest way
to define breakpoints is to use device widths
from popular devices, like the iPhone or the iPad.
That is what we're going to do.
However, once you got more experience,
you should set your breakpoints simply at points
where your design starts to look kind of terrible.
So, now let's see how we can define those breakpoints
with media queries in CSS.
So the first thing I'm going to do is to create a new file
where I will put the media queries.
So hit new file and save it
to our CSS folder.
And I'm going to name it queries.css.
Alright, so this is our CSS file.
And now, let's start to put our media queries here.
So, I will start with the smallest one
and this is how we do it.
So, media and then we say only
screen
and now we define our max-width.
And we say this should be 480 pixels.
And then all our styles go inside of this declaration block.
So what this means is that these rules,
which will come in here, will apply
when the width of the device or the browser
is less or equal than 480 pixels.
And this is the width of the old iPhones,
like the iPhone 5, iPhone 4, and so on.
So I am actually going to put a comment in here
to say that so that we can come here later
and don't get lost in our code.
So this is for small phones
from zero to 480 pixels.
Okay, next.
We will make a media query
for larger small phones.
And let me just copy this, because kind of lazy here.
Don't wanna write it all again.
Okay and this will be 767 pixels
and this, again, means that rules that will be
in this block here will apply for all the browser widths
which are less or equal to 767.
And this value is because of the width of the iPad is 768.
So we want this media query to target all the phones
which are smaller than the iPad,
and then the next media query will target the iPad
and of course other tablets as well.
I am just going with the iPad and iPhone,
because, you know, those are the most popular devices.
So I will say small
phones to
small tablets,
cause you know there are maybe some tablets
with 700 pixels width or something like that.
So we target them as well here.
So this means from 481
to 767 pixels, right?
So and now I will
put another query here.
And this one is
1023.
And so this will target the iPad in the portrait mode,
which has 768 pixels.
And again, the reason for this value here
is that the iPad in the landscape view
has 1024 pixels.
So that will be in the next media query.
So let me write it right here.
So this goes from small tablet to big tablet.
So, from 768 pixels, which is the iPad,
to 1023 pixels.
And now the last one, which will then target
like, the iPad and all smaller computers.
And I will define this as 1200,
and the reason for this is that our row,
that you surely remember, was defined as 1140 pixels.
And so, I want the website to change its look
when it gets close to that value,
so that we always have some margins
at the right and left side.
But I will show you that in a moment,
so don't worry about that right now.
I will just say here that this is from big tablet
to 1300 pixels,
which is for width
smaller than pixel row.
Alright. So these are our media queries right here.
In these media queries, we can then define all our styles.
Let me just close this one here as well.
This block.
Alright, so in case that you're a little confused right now,
just go back to the initial part of the video
where I had that diagram.
And there you can exactly see how these media queries work.
That diagram does a really great job in explaining this.
So one thing that I need to do right now
as you can imagine, is to actually include
this file here in our head.
So I'll duplicate this line
and then include the queries file,
because if I wouldn't do this of course
all of this wouldn't work.
Also here in the head, I need to include another thing
that is essential when you make responsive web design
and it's this meta tag.
We will talk about meta tags later in the course,
but for now let's just put it right here.
And we need a viewport one,
and what we want to say here is that
width equals device-width
at initial-scale
equals 1.0.
So all that this will do is to tell mobile phones,
for instance, that they should not zoom out the page.
So that they should always start with the scale of one,
which is exactly this here.
And alright, now I think we're ready
to start writing some CSS inside of those media queries.
So how are we going to proceed now?
We will basically for each breakpoint view the page
and then fix everything that looks broken.
So let's start to reduce the browser's width.
So again, this is what it looks like in the normal way.
And actually, the best thing to do now is
to not use this live connection,
but open the HTML file directly,
because we will need the Google Chrome Developer Tools.
So let me do that.
And here we are.
And the reason why we need the Developer Tools
is actually because of this here.
When we re-size the window, this shows us how
the size of the window.
So you remember our first breakpoint was 1200,
which is here.
And I will now show you why, 'cause imagine it wouldn't be
then you see what happened
to the text there on the left side?
It just disappears, right?
So
1140 is the width of the row and of the text box,
but then the text would be completely glued
to the border of the browser
and we don't want that, and also here.
So that's why I chose the 1200 value here.
So let's see what we can change here.
So this box here is the hero text box.
So let's go to the original definition
of this in the header part.
And let's see what we can do with this.
So I will now go ahead and copy all of this into here.
And then I will change the things
that I want to change here.
Now I don't want the width to be fixed anymore.
I just want it to be 100%.
So I don't want to change nothing of this
and nothing of this.
And in order to create some space then,
between the text and the border of the browser,
I will say that I want the padding
to be zero on the top and the bottom
and two percent on left and the right side.
So now let's see what this looks like.
We don't need to save it,
because we have that auto save extension,
but we will now have to reload this
because we're no longer working with the live connection.
So this is the 1200 limit.
And let's see what happens.
Okay. And this is kind of cool, right?
Look at the text just.
So now that effect that we had before no longer happens.
So our width is 100%,
and we can see that here in the Developer Tools.
So we actually have that rule here
and we see the width with 100%.
Now if we make that bigger, then that rule goes away,
because the media query does no longer apply.
So very well.
But what we see now here is that this text is still
completely glued here to the browser border.
And let me check that html.
But I think it's inside of the row.
Yeah, it actually is.
So now I will define something
for the row class and for all rows.
And I'm going to say the same thing as I said up there.
So I want the padding,
and in order to make this look consistent
I will use the same padding value.
And I'm now going to format this a little bit different
than from what I've done before,
because every time we only have one declaration in a block
we don't need to create all of those lines.
And we should actually do the same here.
Like here, for instance, but I'm not going to do that.
But if you want to have a
But if you want your code to look cleaner,
then you should go ahead and do that.
So again let's check that out.
I'll refresh it, and now you saw that instantly
that we now have this margin here, or this padding.
And the same thing happens down here, actually,
because all of these are rows.
That's how we always have that distance here.
Okay great.
We actually see something really strange here happening.
This because we opened the file now
and not the browser connection so something changed.
So let me change hello we're Omnifood.
We see what's going wrong here.
So it's this. We need to replace this.
Alright. I think that's it for now.
Here's also I'm hungry.
Okay.
So let's see what we have next.
So this is our next media query,
which goes from 768 to 1023.
Let's check this out in the browser.
Okay again, we need the Developer Tools to see the width.
So let's go to 768.
Okay, this will be our tablet.
So let's see what we should change here.
Actually, the first thing I'm going to do
is to change the font-size.
The overall font-size.
So body
font-size.
And now it comes in very very handy
that we defined all the font sizes
across the entire web page in percentages,
which means that all the font sizes
are based on the base font size.
So this was 20, and now I will make it down to 18 pixels.
And now all the font sizes will automatically decrease
and this is incredibly useful.
And another thing that we should surely do,
since we're now on smaller devices
is to change the padding of the sections.
And this was 80 pixels top and bottom
and I will take it down to 60 pixels.
Of course, I have to write the padding here, alright.
So let me check this out.
Re-size this.
Okay, you see the text is smaller
and I think it definitely looks more adequate to this device
or to this browser width.
And, yeah, we have less space between the sections,
which also makes lot of sense.
When you're on iPad, you don't wanna scroll
through a website and see nothing but white space, right?
So what else can we do now?
For instance, this text here can be wider now.
It looks kind of weird now.
So you remember, let me check, it was the long copy class.
Which is actually an overall class.
Here it is.
So let's change this.
And again, I will copy of this
and then change the things that I want to change.
So line-height can stay the same,
but width can now be 80%,
and therefore the left margin needs to be 10,
because 10 plus 10 makes 20, and 20 plus 80 makes the 100%.
Alright.
Save this, and great.
So again, this is now really designing in the browser.
We're gonna check everything
and see which doesn't look right, and then fix it.
So now that you know how to work with media queries,
and build truly responsive websites
let's take a small break and continue with what we're doing
in the next lecture.