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
Well done!
You have completed Media Queries!
You have completed Media Queries!
Preview
In this video, we'll write all the media queries and CSS we need to make our layout respond to mobile resolutions. We'll also test our site across several pieces of mobile hardware.
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: Mobile Resolutions]
0:02
[Nick Pettit] We'll go ahead and scroll up here and copy one of these comment flags
0:07
and we'll scroll down, jump outside of this media query,
0:13
and paste our comment flag right there,
0:18
the next resolution we're going to tackle is 720px across.
0:21
Now, there are several special considerations we need to make at this resolution
0:28
because it's going to be the resolution that tackles mobile phones.
0:32
So now would be a good time to go ahead and look at how we're doing
0:36
on a variety of mobile devices.
0:41
So here we have all of the hardware devices that we're going to be targeting.
0:44
We have an iPhone 4, running iOS, of course.
0:49
We have an HTC HD7 running Windows Mobile 7.
0:53
We have a Google Nexus S, running Android, of course;
0:57
a Palm Pre 2 running Palm OS,
1:02
and, of course, a Blackberry Torch 9800 running the Blackberry OS.
1:06
It's always best to test on real hardware devices like this,
1:12
not only for technical reasons, but also for design reasons
1:16
because when you have the actual hardware devices in front of you
1:20
as opposed to a software emulator, you can see exactly what the design is going to look like
1:23
at the actual scale that the user will see it at.
1:30
So on our iPhone here, we're doing just okay.
1:33
As you can see, we're actually hitting the 2-column layout,
1:37
as would be expected.
1:40
All of the icons look pretty good down at the bottom,
1:43
but there's still more work that we need to do there
1:47
in shifting it to a one-column layout.
1:50
Windows 7 is really not looking good at all,
1:53
but we'll get back to that later.
1:56
The Android actually looks pretty good as well.
2:00
It looks very similar to iOS.
2:02
The Palm Pre is having a few additional problems, particularly with CSS3 gradients,
2:06
but we'll address those.
2:13
And the Blackberry is actually looking pretty good.
2:17
I should mention that all of these phones are actually running webkit-based browsers.
2:21
The only phone that is not running a webkit-based browser is the Windows Mobile 7 phone,
2:27
so let's go ahead and see if we can fix these up.
2:33
So let's go ahead and get started on this next media query.
2:36
We'll go ahead and scroll down here,
2:40
and we'll use our @media rule,
2:43
say (max-width: 720px) {
2:48
and we'll open up our media query there.
2:55
The first thing that we're going to do is change the body to have a background
2:57
that's just a solid color #C5C5C5;
3:05
so we're going to get rid of our background gradient.
3:10
Although many phones nowadays use the webkit rendering engine,
3:13
gradients still aren't very widely supported and it's better to just go with a flat color.
3:18
And really, design-wise, we're not losing a whole lot here, so it's okay.
3:23
So we'll go ahead and jump down here some more, and next,
3:28
we're going to set the video to display: none;
3:33
\t and we're going to replace this video with just a screenshot of our application.
3:41
It's certainly possible to make HTML5 video work across a wide variety of mobile devices.
3:47
iOS devices as well as Android devices are excellent at video playback.
3:53
However, this is a very complex task to accomplish
3:58
just by using media queries, and may even be impossible.
4:02
Some of the devices we're attempting to support--particularly the Blackberry Torch 9800--
4:05
either do not support HTML5 video or they have broken implementations.
4:11
For the sake of simplicity, it's much easier to replace the HTML5 video
4:16
with a static screenshot for mobile devices.
4:21
If this is not an option for your particular project,
4:24
you'll most likely need to resort to user-agent detection via JavaScript.
4:27
Next, we'll go ahead and select our phone
4:33
#phone #video_container #video_app_screenshot {
4:36
and we'll set it to display: block.
4:44
Then, we'll go through each one of our columns here
4:50
and we'll say #header, #phone, #misc {
4:55
And first, we're going to float all of these to the left
5:01
and then we're going to set a width: 100%
5:06
and then we'll set a margin: 0 auto;.
5:12
By floating all of these to the left and setting a width of 100%,
5:25
we're essentially telling all of these columns to just stack on top of one another
5:30
rather than flowing next to one another.
5:35
So next, we'll go ahead and select the paragraph text inside our header
5:39
and we're going to say -webkit-text-size-adjust: none;
5:44
and this will target webkit-based browsers and will basically just tell the text
5:50
not to automatically adjust because webkit does apply some automatic text-size adjustment.
5:55
Next, we'll select #phone { column,
6:05
and we're going to just apply some margin-bottom: 50px;
6:10
and this will just give it some separation from other screen elements.
6:14
Next, we're going to set the background: transparent
6:19
because remember, on this phone column, we do have a background image applied,
6:23
which is the image of the phone.
6:29
We're going to use an image-based fallback here
6:32
instead of the video, so we actually don't need this background image anymore.
6:35
And finally, we're going to set float: none.
6:38
Next, we'll select the phone and select the video_container [
6:43
and we'll apply a width of 100% and we're just going to reset some margins here.
6:51
So we'll say margin: 0px;
6:57
auto
6:59
and then finally, 10%;.
7:01
We just have a few more things here.
7:06
We're going to select the #call_to_action button, and again,
7:10
we're going to just remove the gradients here,
7:16
so we'll set a solid background color and we'll just use one of the colors that we used
7:19
as a color-stop in our gradient,
7:25
and then we'll set the hover state
7:28
for the #call_to_action button, and of course, this won't be displayed
7:31
on most touch-screen mobile phones,
7:36
but this will be displayed in a desktop browser,
7:38
should it become this size.
7:42
So we'll go ahead and set the hover state
7:44
and let's go ahead and switch back to the browser at this point
7:47
and just refresh the page to see how we're doing.
7:50
Resize the browser window, and as you can see,
7:54
we no longer have our gradient background.
7:58
We no longer have a gradient on our call_to_action button
8:01
and everything looks pretty good.
8:07
We have some work to do on our features, but you'll notice that it appears
8:10
as though we're missing our app screenshot.
8:15
Now, the CSS is looking pretty good
8:18
so let's go ahead and switch over to the HTML, and it looks like our images
8:21
are actually inside of our video container.
8:26
Now, remember, we've hidden our video, so these images actually need to be outside
8:29
of the video, so we'll just cut them and paste them
8:35
so they are no longer nested inside of our video element
8:42
and if we switch back to Google Chrome and refresh the page,
8:46
you can see that we now have this static app screenshot.
8:50
Now, we still need to work on the features down at the bottom of the page,
8:54
so let's go ahead and switch back to our responsive webdesign.css document
8:59
and we'll skip down here and make some room to work.
9:06
First, we'll select our #features element,
9:10
we'll select all of the features .feature:
9:14
and we're going to say :nth-child(1n) {
9:18
and we're going to float it to the left,
9:25
give it a width: 100%
9:28
and we're going to set some margins on it, so we'll say
9:32
margin: 0 auto 30px auto;.
9:35
Now, this essentially will just take our features and sort of line them all up
9:39
in the center of the page and make them stack on top of one another
9:44
just like we had with our 3-column layout.
9:48
Next, select our #features element again,
9:53
select all of our features, go to the .info div and select our paragraphs
9:56
.information p {}
10:03
and we're just going to reset some font sizes here, so we'll say font-size: 1em;
10:05
And then again, we need to make sure that webkit
10:09
does not adjust the text-size automatically, so we'll say
10:12
-webkit-text-size-adjust: none;.
10:16
So that should be it for our features, so let's switch back to the browser
10:21
and refresh the page, and when we scroll down here,
10:25
you can see that our features now look really nice.
10:29
We have this nice big icon here and our text is pretty reasonably sized.
10:31
And if we go down to even smaller sizes here,
10:37
you can see that our features still look pretty good.
10:40
Our icons look proportional to the text
10:43
and the text is still very readable.
10:46
Now, before we finish up with our rwd.css here, we do need to make one final adjustment
10:49
for the iPad.
10:55
So here we have an iPad, also running iOS,
10:57
and that, of course, has the Safari web browser,
11:01
which is based on webkit.
11:04
And just like on the phones, we're hitting our 2-column layout,
11:06
but on the iPad, that's actually exactly what we want.
11:10
If we scroll down here, you can see that the icons all look pretty good.
11:15
This column over on the left looks great.
11:19
We have our nice border radii, gradients look fine, everything looks good.
11:22
Over on the right, we do have a slight issue with the way our phone and HTML5 video
11:27
is being rendered, but that's okay, that's something that we can go ahead and fix.
11:34
In an ideal world, you wouldn't make any special concessions for any one individual device,
11:38
but the iPad is enormously popular--at least at the time of this recording--
11:44
so we are going to make one special adjustment for the iPad.
11:49
So we'll go ahead and switch back here, and we're going to copy
11:54
our comment flag, and we'll paste it down here,
11:57
and we're going to change 720px across to say iPad,
12:04
and we're going to write a couple of special media queries here.
12:09
So we'll say @media only screen and (min-device-width: 768px)
12:15
and then we're going to press Enter and just skip down to the next line.
12:28
We are still writing this same media query, but we're just skipping down to the next line
12:32
for the sake of clarity.
12:37
So we'll continue this media query by saying
12:39
and (max-device-width: 1024px)
12:42
and (orientation: portrait)
12:50
and then we can go ahead and open up this media query
12:57
with our curly braces and we'll just go ahead and move this curly brace all the way over to the left
13:01
and now, we can go ahead and write this media query.
13:09
So we'll say #phone #video_container video {
13:13
and we are just going to make this one adjustment here to the height
13:21
of our actual video element because on the iPad, we are going to display our video
13:26
whereas on other mobile devices, we are not going to display the video
13:32
because on the iPad, we have the 2-column layout; whereas on other mobile devices,
13:36
we just have the 1-column layout.
13:41
So we'll say height: 282px; and that's it.
13:43
Then we can go ahead and copy this media query
13:49
because we do need to write a second media query for the landscape orientation.
13:52
So we'll go ahead and paste it, just like that,
13:59
and we just need to make a few adjustments here.
14:02
The min-device-width and max-device-width will stay the same;
14:05
we just need to change the orientation to say landscape.
14:08
Then, we need to change the height of the video
14:13
because the resolution when you change it to landscape will actually be adjusted
14:17
and I have some very specific values picked out here.
14:22
We'll say height: 376px.
14:26
So we'll go ahead and save that out, and now, let's go ahead and take a look
14:29
at our mobile devices.
14:33
So as you can see, things are actually looking a lot better now.
14:36
On iOS, we have the background, the 1-column layout,
14:40
all of our icons look really nice.
14:45
On Windows Mobile 7, we still have a lot of issues that we need to tackle,
14:48
but in general, things are looking a little bit better.
14:54
On the Google Nexus S, things look very similar to the way they do on iOS
14:58
as would be expected, since they're both running a webkit-based browser.
15:05
On the Palm Pre, everything looks pretty good here.
15:10
It looks like we are missing a few fonts, but that's okay.
15:15
it doesn't have to look exactly the same in every browser.
15:19
As long as we're generally hitting something that looks similar, it should be okay.
15:22
And of course, on the Blackberry, we're doing pretty well as well.
15:27
We are loading in the fonts, unlike the Palm Pre.
15:33
It looks like we are having a few issues with the way border radii are being rendered,
15:37
but again, that's okay, it's acceptable.
15:42
We don't need to get rid of the border radii for all of these other phones
15:45
just because we're having a slight issue on the Blackberry here.
15:49
And other than that, everything else looks pretty good.
15:52
So here, once again, we have our iPad
15:57
and if we look here, we can see that we're actually doing pretty well.
16:00
All of our icons look great.
16:05
The column over on the left looks really good.
16:07
We have a really nice-looking button
16:10
and over on the right, we've fixed the height issues that we were having
16:12
with our HTML5 video.
16:15
And on this device, we actually can go ahead and support HTML5 video just fine
16:18
because we're just hitting the 2-column layout here.
16:24
We don't actually need to worry about targeting the smaller resolutions
16:28
like we do on the phones.
16:32
We're almost done with our project; however, before we can call it finished,
16:34
it's imperative that we conduct some additional cross-browser testing.
16:39
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