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

max-width

3:23 with Anwar Montasir

In the last video, we learned to use box-sizing: border-box to match up Developer Diane’s photo and bio, and now they’re both 600 pixels wide. And on a large screen like a laptop, both elements fit comfortably onscreen. But what happens if my screen gets smaller than 600 pixels? After all, some users still have phones that are as narrow as 320 pixels wide in portrait orientation. And when I make my screen that narrow, Diane’s photo and bio no longer fit onscreen. This is where a CSS property called max-width comes in handy.

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 the last video, we learned to use box sizing border box 0:00
    to match up developer Diane's photo and bio. 0:05
    And now they're both 600 pixels wide. 0:08
    And on a large screen like a laptop, both elements fit comfortably in the viewport. 0:12
    Which is what we call the area of the browser that views the webpage. 0:19
    Well, what happens if my viewport gets smaller than 600 pixels. 0:24
    After all, some users still have phones that are as narrow 0:29
    as 320 pixels wide in portrait orientation. 0:34
    And when I make my viewport that narrow, Diane's photo and bio no longer fit. 0:39
    This is where a CSS property called max-width comes in handy. 0:47
    In this case, I'm essentially providing two width declarations, 1:03
    and letting the browser decide which one applies. 1:08
    If my browser viewport width is only 500 pixels, 1:12
    then both my image and bio will be full width. 1:17
    However, if I expand my browser, so it's 700 pixels wide. 1:21
    The boxes aren't allowed to grow any wider than 600 pixels. 1:27
    Looking back at my code, I see an opportunity to improve it based on 1:34
    the DRY, or don't repeat yourself principle. 1:38
    If I want to try out different max widths and see how they look in the browser, 1:42
    I'd have to do so in two different places. 1:47
    That doesn't seem as efficient as it could be. 1:50
    In the first stage of this course, we learned that we could separate selectors 2:00
    by commas if we wanted to apply the same style to multiple elements. 2:05
    Now, my max-width declaration is applied to both the image and 2:11
    bio ID simultaneously. 2:16
    And if I change my max width to 720 pixels. 2:18
    Or 480 pixels. 2:28
    I can quickly see the difference in the browser. 2:35
    This may seem like a small change, but developers are always looking for 2:39
    ways to make their code more efficient. 2:44
    CSS includes properties called min-width, max-height and min-height as well. 2:49
    These aren't as commonly used as the max-width property, 2:56
    although we'll see a use for one of them in the next video. 3:00
    When building designs that respond to changes in the browser viewport. 3:04
    Developers tend to rely on max-width the most in a manner similar 3:10
    to what we've achieved in this lesson. 3:14
    But feel free to explore these other properties on your own and get a feel for 3:17
    what they do. 3:22

    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