Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll write all the media queries and CSS we need to make our layout respond to desktop resolutions.
[?music?]
0:00
[Responsive Web Design: Media Queries: Desktop Resolutions]
0:02
[Nick Pettit] We've prepped our project and now we're ready to dive into media queries.
0:06
However, before we could get back to coding, there's a few things that we need to cover.
0:10
First, if you're not familiar with media queries, I highly recommend
0:15
that you watch the media queries videos in the CSS3 chapter.
0:18
You'll probably be able to follow along well enough without much of a primer,
0:23
but watching these videos first will definitely help.
0:27
In our code, we're going to use several media queries that build upon one another.
0:31
Each of these media queries will cater to a specific minimum resolution.
0:35
However, keep in mind that because of the cascading nature
0:41
of Cascading Style Sheets, each one of these media queries will be applied
0:45
to the next set of resolutions.
0:50
So for example, the styles that we include in our first media query
0:52
will also be applied to every media query that follows.
0:57
The second media query will also be applied to all the resolutions that follow after it and so on.
1:00
This will make more sense once we start coding.
1:07
Finally, I just want to remind you that we are intentionally setting our font sizes manually.
1:10
While it's certainly possible to create fonts that behave similarly to our fluid grid,
1:16
I personally prefer to set fonts manually so that you ensure they are always readable
1:21
without many edge cases.
1:27
Now we're ready to start into our media queries,
1:31
so let's go ahead and switch over to application.css,
1:34
grab one of these comment flags, go into rwd.css,
1:39
and paste it in.
1:44
The first one is going to be 1700px.
1:46
We'll go ahead and start our media query and say @media (max-width: 1700px) {.
1:52
Now, all we're going to be doing for these first few media queries
2:02
is changing the font sizes manually.
2:06
As I mentioned previously, you can make the font sizes responsive.
2:08
However, I actually prefer to set them manually
2:12
just to make sure that the font sizes are readable and there are no strange edge cases.
2:16
So first, we're going to select the header
2:23
and we're going to select the paragraph text inside of that header
2:26
and we'll change the font-size: 1.1em;.
2:29
Let's just go ahead and save that out and test this out in the browser.
2:34
One really easy way to test out media queries is to change the body background color
2:38
to a really bright color so you know that the media query is in fact working.
2:45
So we'll just go ahead and say background: yellow;
2:51
save that out, and we'll switch over to Google Chrome and refresh the page.
2:55
As you can see, that media query is indeed selecting this particular screen resolution.
3:01
So let's go ahead and adjust a few more of these font sizes.
3:08
Next, we're going to adjust the call_to_action button,
3:12
so we'll say #misc #call_to_action
3:16
and as we mentioned before, that text was way too large for the size of that button
3:20
so we'll go ahead and reduce it down to 1.3em.
3:25
Save that out, and when we switch back to the browser and refresh the page,
3:29
you can see that our call_to_action button now has a more reasonable font size.
3:35
So let's go ahead and switch back,
3:40
and next, we'll go ahead and adjust the size of our block quotes.
3:43
So we'll say #misc for the column,
3:47
and we'll select our blockquotes,
3:50
which is actually an element selector
3:53
and we'll say font-size: 1.4em;
3:56
We'll make some room to work here,
3:59
and next, we'll go ahead and style our features
4:01
so we'll say #features .feature .info
4:04
and then the paragraph text for the info about that feature
4:10
we'll set to a font-size: 1em;.
4:14
And then finally, we need to set a minimum height
4:18
on each feature block.
4:22
Let's just go ahead and switch back to the browser and refresh
4:24
and then we'll do that.
4:28
So if we refresh the page, we can see that our block quotes are now a more reasonable size
4:30
and if we scroll down to our features, the paragraph text there
4:35
is looking a lot better,
4:40
and we need to set a minimum height above each one of these features.
4:43
Now, I've picked out a height of 150px, which is a set height
4:47
but you can adjust this as needed, depending on your project.
4:53
The reason that we're doing this is so that these features don't get too scrunched up
4:57
against one another as the size of the browser reduces.
5:02
So let's go ahead and switch back to TextMate,
5:06
and we'll say #features .feature {
5:09
min-height: 150px;.
5:13
So we'll switch back and refresh
5:17
and we shouldn't see too much of a change right now,
5:21
but this small adjustment will help us a lot down the road.
5:25
So now, we're ready to move on to our next screen resolution of about 1400px
5:29
because when we start to resize the browser and make it a little smaller,
5:34
you can see that our layout starts to break down pretty quickly.
5:39
So we'll go ahead and switch back.
5:43
We'll copy our comment flag, close up this media query,
5:46
and we'll start our next media query down here.
5:53
We'll change 1700 to 1400,
5:58
and we'll say @media (max-width: 1400px) {.
6:04
Now, this screencast is being run at a resolution of 1280 x 720
6:11
so this 1400 pixels--and actually the resolution after this--
6:16
should be applied immediately.
6:21
Each one of these resolutions is cascading on top of one another.
6:23
So we've already applied the 1700 pixels, which is for a larger screen resolution,
6:27
but when we apply the changes for 1400, you'll see that our current layout
6:33
will start to look even better.
6:39
So we'll do some very similar things here, adjusting the font sizes.
6:41
We'll say #header p {
6:45
has a font-size: 1em;
6:50
The second level headline for the #header h2 {
6:55
will also have a font-size: 1em;.
6:59
The #misc #call_to_action {
7:05
will also get a reduction in font-size: 1.2em;.
7:11
Our #misc blockquote {
7:17
will be reduced down to 1.2em;
7:21
and then, the info for our features #features. feature.info p {
7:26
will also be reduced to font-size: 0.9em;.
7:31
And then finally, we do need to adjust the minimum height
7:36
above each one of our features again,
7:40
so we'll say #features .feature {
7:43
and we'll set that to a min-height: 130px;.
7:47
So we want to make sure that this media query is being applied
7:52
so let's go ahead and set our body to a different color background
7:56
and we'll say background: green;.
8:01
So when we switch back to Google Chrome and refresh the page,
8:06
you can see that our background is now green,
8:10
our call_to_action button looks a little bit better;
8:14
we're not taking up two lines anymore.
8:17
Our block quotes are also a bit smaller.
8:20
Our paragraph text over in the header looks better.
8:22
The second level headline here underneath our logo is more reasonably sized
8:26
and down here, our features also look a little bit better.
8:31
The next resolution we're going to hit is 1200,
8:37
and here's where we start making more than just font size changes.
8:40
So let's go ahead and switch back to TextMate.
8:44
We'll copy our comment flag,
8:47
jump outside of this media query for 1400.
8:49
We'll change this comment flag to 1200
8:54
and we'll skip down here,
8:58
and first, we'll say @media (max-width: 1200px)
9:01
and we'll open up that media query.
9:09
And first, we're going to float the header to the left
9:12
because what we're actually going to do at this screen resolution
9:17
is make a major adjustment to the layout of the page.
9:20
We're going to make the transition from a 3-column layout
9:24
to a 2-column layout.
9:28
Now, we don't need to be quite as accurate with our fluid grids at these different resolutions
9:31
because we've already set them pretty well at the normal resolution or high resolution,
9:36
so we can sort of just eyeball it here.
9:42
We'll say width: 50%;
9:45
and we're going to give our header a little bit more of a margin-top: 10%;.
9:50
Continuing to rearrange our layout, we're going to float the misc column to the left
9:57
and we're going to clear: left;
10:06
and we'll set that to a width: 55%;.
10:09
On our #call_to_action button,
10:15
and on our #logo {
10:17
we're going to remove the margin-top: 0; because remember,
10:20
what is likely as the screen resolution gets more narrow,
10:26
it also may not be as tall, so we need to sacrifice a little bit of white space
10:29
above and below certain screen elements.
10:35
So next, we'll float the #phone to the left,
10:38
and we're going to set our blockquote { display: none;.
10:46
Now, you may be thinking that this will actually hide our blockquotes, and you'd be right.
10:52
What we're doing here is sacrificing a few of the less important elements on the page
10:57
in favor of increasing the size of other elements.
11:02
Remember, as the screen gets smaller,
11:06
screen real estate becomes more valuable,
11:09
so we need to start getting rid of a few of these less important screen elements.
11:12
Next, we're going to set the #wrapper {
11:17
to a width: 90%;.
11:23
Now, if we switch over to application.css
11:26
and check the size of our wrapper previously,
11:30
you'll see that it's at a width of 70%.
11:34
This percentage is being calculated against the width of the entire page
11:37
so by increasing the percentage of the wrapper,
11:42
we're essentially just narrowing the margins on the left and right side.
11:46
Again, as the screen gets narrower, screen real estate becomes more valuable
11:51
so we need to give up some of that white space on the left and right.
11:55
This will be an ongoing theme as the screen gets smaller
11:59
and we'll continue to adjust the size of our wrapper.
12:02
So let's go ahead and switch back to rwd.css,
12:05
and once again, we're going to set a strange body color
12:12
and we'll set this one to background: red;.
12:16
So we'll go ahead and switch back to Google Chrome
12:21
and refresh the page, and as you can see, our background color isn't being applied yet,
12:23
so that means that we're still at a wider screen resolution
12:29
than that media query's actually targeting.
12:32
So let's go ahead and reduce the size of our browser
12:35
and when we do, you'll see that it instantly pops to red.
12:38
Now, the thing that I'm noticing in this particular layout
12:44
is the phone is actually pushing this button down
12:47
and we don't want that, so let's go ahead and switch back to TextMate
12:50
and instead of floating the phone to the left,
12:56
let's just go ahead and float it to the right.
12:59
We'll just switch back to Google Chrome and refresh the page,
13:01
and there you can see our phone is now floated over to the right
13:06
and we've remedied that problem; the button looks good
13:10
and we can now see these features down here at the bottom.
13:13
You need to sign up for Treehouse in order to download course files.
Sign up