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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[?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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up