Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Let's Practice Media Queries!

2:22 with Guil Hernandez

Media queries let you adapt the presentation of your content to a specific range of devices and screen sizes, without having to change the content itself. In this practice session, you'll write five media queries to adjust the layout of a web page at different viewport sizes.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Resources

What are Media Queries? – CSS Layout

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

[MUSIC] 0:00

Hey everyone, Guil here. 0:04

It's time to sharpen your CSS skills by practicing the fundamentals of media 0:05

queries. 0:09

You've learned that media queries are an important part of web design and 0:10

front end web development, because they let you adapt the presentation of your 0:13

content to a specific range of devices and 0:17

screen sizes without having to change the content itself. 0:19

So in this practice session, 0:23

you will write media queries to adjust the layout of the simple web page. 0:24

To get started, launch the workspace with this video. 0:27

I have included an HTML and CSS file for this exercise. 0:29

And one of the style sheets linked to the HTML 0:33

already includes all the base styles and layout styles for the page. 0:36

So now, let's walk through what you'll need to do. 0:39

In the file, media-queries.css, you are going to define 0:42

five media queries to create break points for the page at different viewport sizes. 0:45

The layout will be developed in mobile first, so 0:50

the break points you write will mostly be based on minimum viewport widths, 0:52

meaning the layout will scale up as the viewport changes. 0:56

In the style sheet, there are five chunks of CSS rules. 1:01

And above each one is a comment with instructions on the type of 1:04

media queries you'll need to write for that particular block of code. 1:07

For instance, this first block of rules is for 1:10

extra small viewport sizes, so it needs to be placed inside a media 1:13

query that targets viewport sizes narrower than 576 pixels. 1:18

So that means you'll use a media feature that targets a given viewport size along 1:22

with any viewport size that's smaller. 1:27

Below that, you'll need to wrap this set of rules here and 1:30

a media query that targets viewport sizes that are 576 pixels and wider. 1:32

Next, you'll place this nav rule inside a media query that 1:38

targets only a specific range of viewport sizes, so 1:43

a range wider than 575 pixels and narrower than 992 pixels. 1:47

Then, you will place these two rules in a media query, targeting medium devices and 1:52

up, so viewport sizes that are 768 pixels and wider. 1:57

And finally, you'll write a media query that floats the nav 2:01

element right when the viewport is 992px and wider. 2:06

When you're finished, your page should look similar to this. 2:11

Good luck, have fun. 2:14

And in the next video, I'll walk you through the solution. 2:15

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up