Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Practice Media Queries

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The Media Queries Solution

2:44 with Guil Hernandez

In this video, we'll go over the media queries for this practice session.

Resources

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

    Hopefully, you were able to write most or all five media queries for 0:00
    this practice session. 0:03
    Now let's walk through the solution. 0:04
    And you can also reference this code when you download the project files. 0:06
    So first up, you were asked to target viewport sizes less than 576 pixels, 0:08
    so the key words here are less than, which should indicate that 0:13
    you should use the max with media feature and the media query expression. 0:17
    Now, in the media query, you don't want to target the viewport starting right at 576 0:22
    pixels, it needs to be less than that. 0:27
    So the expression, max-width, 575 pixels will do the trick. 0:29
    In the next block of CSS rules, 0:35
    to Target viewport sizes when there are 576 pixels and wider, 0:37
    you'll use min-width 576 pixels as the media query expression. 0:42
    Now, the next one is a little different from the others. 0:50
    The nav rule needs to be inside a media query that targets only a specific 0:53
    range of viewport sizes. 0:58
    So when the viewport is greater than 575 pixels and 0:59
    when it's less, they're 992 pixels. 1:03
    So the keyword, and, suggest that you should use the and 1:07
    logical operator to combine media features. 1:11
    So to Target a viewport, when it's wider than 575 pixels 1:14
    specify min-width 576 pixels and to continue targeting 1:18
    the viewport all the way up to a width narrower than 992 pixels. 1:23
    You specify the and operator followed by the media feature max-width 991 pixels. 1:28
    Next, you target medium viewport sizes that are 768 pixels and 1:36
    wider, using the expression min-width 768 pixels. 1:42
    The last media query needs to target large devices and 1:51
    up when a viewport is 992 pixels and wider. 1:55
    So, similar to other media queries in this exercise, 1:59
    you'll use the min-width media feature and specify a minimum-width of 992 pixels. 2:02
    You may have written your media query slightly different. 2:10
    For example, maybe you included the screen media type before each 2:13
    of the media query expressions and that's totally fine for this practice session. 2:18
    I left them out of mind to make the media queries suitable for all devices. 2:21
    All right, so now your page should be adjusting to the five break points 2:26
    you created. 2:29
    Now, if it's still not quite there, that's okay. 2:30
    Just keep practicing these until you feel comfortable using them. 2:32
    After a little practice, 2:35
    you'll be surprised by how much better you're getting at CSS. 2:36
    I'm also going to teach you lots more about media queries in an upcoming course. 2:39
    So, I'll see you soon. 2:42

    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