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

CSS Layout

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Targeting Media Features

6:03 with Anwar Montasir

In our last video, we used CSS media queries to optimize our layout for the printed page. While that’s useful, and a fun exercise, I would imagine you’re anxious to design for different screen sizes. After all, few things are more exciting for a front end web developer than launching a site that looks equally great on a small and large screen. To target different characteristics of the screen viewing our web page, we need more than just to select the media type, as we did in our last video. We need to write CSS rules that apply only when certain characteristics are met–when the device is in landscape format, for example, or when the viewport is wider than 800 pixels.

Further reading

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

    In our last video, we used CSS media queries to optimize our layout for 0:00
    the printed page. 0:06
    While that's useful, and a fun exercise, 0:08
    I would imagine you're anxious to design for different screen sizes. 0:11
    After all, a few things are more exciting for a front-end web developer 0:16
    than launching a site that looks equally great on a small and large screen. 0:22
    To target different characteristics of the screen viewing our web page, 0:27
    we need more than just to select the media type, as we did in our last video. 0:33
    We need to write CSS rules that apply only when certain characteristics are met. 0:39
    When the device is in landscape format, for example, or 0:46
    when the viewport is wider than 800 pixels. 0:51
    This CSS Tricks article, called "A Complete Guide to CSS Media Queries," 0:55
    offers a useful diagram called Anatomy of a Media Query. 1:00
    In our last video, we learned to write at rules and select by media type. 1:06
    We used the print media type previously, but 1:12
    in this video we're going to concentrate on screen, 1:16
    which targets device screens like computers, tablets and phones. 1:20
    The diagram also shows us how to select media by feature. 1:25
    If I uncollapse the media features chart, I see a great big 1:30
    list of potential features media queries allow us to specify. 1:36
    This is a great resource to keep bookmarked, but there's one feature here 1:41
    you'll target more often than any other and it's right at the top of the chart. 1:46
    Modifying your design and layout based on the width of the viewport is a great 1:52
    tool for creating experiences that are legible on a variety of screens. 1:57
    Let's take a look, With inspect mode showing, 2:03
    I'm going to narrow my viewport to 320 pixels, 2:08
    The size of an older phone screen. 2:15
    And I can see that at this size, most of my content is legible enough, 2:18
    but my footer looks a bit awkward. 2:24
    I don't think these three list items look all that great 2:26
    side by side until my viewport reaches a minimum width of around 730 pixels. 2:32
    I'm going to start by editing my original 2:40
    declaration to stack these list items vertically. 2:44
    Now, our content looks better on the mobile screen, 2:52
    I might still add a bit of bottom margin, 2:58
    To separate our list items 3:04
    Developers typically use their base CSS to get, the mobile screen right. 3:10
    This minimizes, the amount of CSS, the phone has to load, 3:15
    which should speed up loading time on small screens. 3:20
    Now, let's create a media query to target device screens. 3:24
    And to change those list items 3:30
    once the viewport is at least 3:35
    730 pixels wide. 3:40
    And look at that, you've created content 3:53
    that changes based on viewport width. 3:58
    At the end of the previous stage we noticed that the area 4:07
    of developer Diane's blog that uses float doesn't allow for 4:11
    comfortable space for our body copy on small screens. 4:16
    Perhaps we'd like to make a change around 600 pixels. 4:20
    Let's create a new rule for our class called .small-img, 4:28
    That allows the image to occupy 100% of the viewport width on small screens. 4:36
    Once again we've solved for mobile behavior first. 4:44
    Now, let's cut our two rules for .small-img and 4:49
    .clear and paste them into a media query. 4:54
    Try that out in the browser and expand and contract your viewpoint. 5:20
    That's a pretty clear illustration of what CSS media queries are capable of. 5:27
    CSS media queries are really powerful and your capabilities as a developer, 5:34
    are a lot more impressive than they were at the beginning of this video. 5:39
    You'll be building responsive layouts before you know it. 5:44
    However, before we get much further with using media queries, 5:49
    we should investigate a peculiarity in the way mobile browsers view our content. 5:54
    We'll check it out in our next video. 6:00

    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