[?music?]

[Responsive Web Design: Media Queries: Desktop Resolutions]

[Nick Pettit] We've prepped our project and now we're ready to dive into media queries.

However, before we could get back to coding, there's a few things that we need to cover.

First, if you're not familiar with media queries, I highly recommend

that you watch the media queries videos in the CSS3 chapter.

You'll probably be able to follow along well enough without much of a primer,

but watching these videos first will definitely help.

In our code, we're going to use several media queries that build upon one another.

Each of these media queries will cater to a specific minimum resolution.

However, keep in mind that because of the cascading nature

of Cascading Style Sheets, each one of these media queries will be applied

to the next set of resolutions.

So for example, the styles that we include in our first media query

will also be applied to every media query that follows.

The second media query will also be applied to all the resolutions that follow after it and so on.

This will make more sense once we start coding.

Finally, I just want to remind you that we are intentionally setting our font sizes manually.

While it's certainly possible to create fonts that behave similarly to our fluid grid,

I personally prefer to set fonts manually so that you ensure they are always readable

without many edge cases.

Now we're ready to start into our media queries,

so let's go ahead and switch over to application.css,

grab one of these comment flags, go into rwd.css,

and paste it in.

The first one is going to be 1700px.

We'll go ahead and start our media query and say @media (max-width: 1700px) {.

Now, all we're going to be doing for these first few media queries

is changing the font sizes manually.

As I mentioned previously, you can make the font sizes responsive.

However, I actually prefer to set them manually

just to make sure that the font sizes are readable and there are no strange edge cases.

So first, we're going to select the header

and we're going to select the paragraph text inside of that header

and we'll change the font-size: 1.1em;.

Let's just go ahead and save that out and test this out in the browser.

One really easy way to test out media queries is to change the body background color

to a really bright color so you know that the media query is in fact working.

So we'll just go ahead and say background: yellow;

save that out, and we'll switch over to Google Chrome and refresh the page.

As you can see, that media query is indeed selecting this particular screen resolution.

So let's go ahead and adjust a few more of these font sizes.

Next, we're going to adjust the call_to_action button,

so we'll say #misc #call_to_action

and as we mentioned before, that text was way too large for the size of that button

so we'll go ahead and reduce it down to 1.3em.

Save that out, and when we switch back to the browser and refresh the page,

you can see that our call_to_action button now has a more reasonable font size.

So let's go ahead and switch back,

and next, we'll go ahead and adjust the size of our block quotes.

So we'll say #misc for the column,

and we'll select our blockquotes,

which is actually an element selector

and we'll say font-size: 1.4em;

We'll make some room to work here,

and next, we'll go ahead and style our features

so we'll say #features .feature .info

and then the paragraph text for the info about that feature

we'll set to a font-size: 1em;.

And then finally, we need to set a minimum height

on each feature block.

Let's just go ahead and switch back to the browser and refresh

and then we'll do that.

So if we refresh the page, we can see that our block quotes are now a more reasonable size

and if we scroll down to our features, the paragraph text there

is looking a lot better,

and we need to set a minimum height above each one of these features.

Now, I've picked out a height of 150px, which is a set height

but you can adjust this as needed, depending on your project.

The reason that we're doing this is so that these features don't get too scrunched up

against one another as the size of the browser reduces.

So let's go ahead and switch back to TextMate,

and we'll say #features .feature {

min-height: 150px;.

So we'll switch back and refresh

and we shouldn't see too much of a change right now,

but this small adjustment will help us a lot down the road.

So now, we're ready to move on to our next screen resolution of about 1400px

because when we start to resize the browser and make it a little smaller,

you can see that our layout starts to break down pretty quickly.

So we'll go ahead and switch back.

We'll copy our comment flag, close up this media query,

and we'll start our next media query down here.

We'll change 1700 to 1400,

and we'll say @media (max-width: 1400px) {.

Now, this screencast is being run at a resolution of 1280 x 720

so this 1400 pixels--and actually the resolution after this--

should be applied immediately.

Each one of these resolutions is cascading on top of one another.

So we've already applied the 1700 pixels, which is for a larger screen resolution,

but when we apply the changes for 1400, you'll see that our current layout

will start to look even better.

So we'll do some very similar things here, adjusting the font sizes.

We'll say #header p {

has a font-size: 1em;

The second level headline for the #header h2 {

will also have a font-size: 1em;.

The #misc #call_to_action {

will also get a reduction in font-size: 1.2em;.

Our #misc blockquote {

will be reduced down to 1.2em;

and then, the info for our features #features. feature.info p {

will also be reduced to font-size: 0.9em;.

And then finally, we do need to adjust the minimum height

above each one of our features again,

so we'll say #features .feature {

and we'll set that to a min-height: 130px;.

So we want to make sure that this media query is being applied

so let's go ahead and set our body to a different color background

and we'll say background: green;.

So when we switch back to Google Chrome and refresh the page,

you can see that our background is now green,

our call_to_action button looks a little bit better;

we're not taking up two lines anymore.

Our block quotes are also a bit smaller.

Our paragraph text over in the header looks better.

The second level headline here underneath our logo is more reasonably sized

and down here, our features also look a little bit better.

The next resolution we're going to hit is 1200,

and here's where we start making more than just font size changes.

So let's go ahead and switch back to TextMate.

We'll copy our comment flag,

jump outside of this media query for 1400.

We'll change this comment flag to 1200

and we'll skip down here,

and first, we'll say @media (max-width: 1200px)

and we'll open up that media query.

And first, we're going to float the header to the left

because what we're actually going to do at this screen resolution

is make a major adjustment to the layout of the page.

We're going to make the transition from a 3-column layout

to a 2-column layout.

Now, we don't need to be quite as accurate with our fluid grids at these different resolutions

because we've already set them pretty well at the normal resolution or high resolution,

so we can sort of just eyeball it here.

We'll say width: 50%;

and we're going to give our header a little bit more of a margin-top: 10%;.

Continuing to rearrange our layout, we're going to float the misc column to the left

and we're going to clear: left;

and we'll set that to a width: 55%;.

On our #call_to_action button,

and on our #logo {

we're going to remove the margin-top: 0; because remember,

what is likely as the screen resolution gets more narrow,

it also may not be as tall, so we need to sacrifice a little bit of white space

above and below certain screen elements.

So next, we'll float the #phone to the left,

and we're going to set our blockquote { display: none;.

Now, you may be thinking that this will actually hide our blockquotes, and you'd be right.

What we're doing here is sacrificing a few of the less important elements on the page

in favor of increasing the size of other elements.

Remember, as the screen gets smaller,

screen real estate becomes more valuable,

so we need to start getting rid of a few of these less important screen elements.

Next, we're going to set the #wrapper {

to a width: 90%;.

Now, if we switch over to application.css

and check the size of our wrapper previously,

you'll see that it's at a width of 70%.

This percentage is being calculated against the width of the entire page

so by increasing the percentage of the wrapper,

we're essentially just narrowing the margins on the left and right side.

Again, as the screen gets narrower, screen real estate becomes more valuable

so we need to give up some of that white space on the left and right.

This will be an ongoing theme as the screen gets smaller

and we'll continue to adjust the size of our wrapper.

So let's go ahead and switch back to rwd.css,

and once again, we're going to set a strange body color

and we'll set this one to background: red;.

So we'll go ahead and switch back to Google Chrome

and refresh the page, and as you can see, our background color isn't being applied yet,

so that means that we're still at a wider screen resolution

than that media query's actually targeting.

So let's go ahead and reduce the size of our browser

and when we do, you'll see that it instantly pops to red.

Now, the thing that I'm noticing in this particular layout

is the phone is actually pushing this button down

and we don't want that, so let's go ahead and switch back to TextMate

and instead of floating the phone to the left,

let's just go ahead and float it to the right.

We'll just switch back to Google Chrome and refresh the page,

and there you can see our phone is now floated over to the right

and we've remedied that problem; the button looks good

and we can now see these features down here at the bottom.