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

Viewport Units

4:43 with Anwar Montasir

Getting better at CSS means building layouts that respond to changes in the browser’s viewport, or the area in which window content can be seen. For example, if the user is using a mobile device, you might want a certain part of the page to be styled differently depending on whether the device is in portrait or landscape format. CSS provides a variety of ways to adjust your layout for different viewports, including a measurement called a viewport unit that’s based on viewport size. Let’s take a look at what Viewport Units are all about.

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

    Getting better at CSS means building layouts that respond to changes in 0:00
    the browser's viewpoint, or the area in which window content can be seen. 0:05
    For example, if the user is using a mobile device, 0:10
    you might want a certain part of the page to be styled differently, 0:14
    depending on whether the device is in portrait or landscape format. 0:19
    CSS provides a variety of ways to adjust your layout for different viewports, 0:24
    including a measurement called a viewport unit that's based on viewport size. 0:30
    Let's take a look at what viewport units are all about. 0:37
    The CSS property vw is short for viewport width. 0:42
    1vw represents 1% of the overall viewport width. 0:48
    If we think about how much 10vw represents, 0:54
    the answer depends on the width of the viewport. 0:57
    An older phone in portrait orientation measures 320 1:02
    pixels across, so 10vw would equal 32 pixels. 1:07
    On the laptop I use to develop websites, 1:13
    the screen is 1440 pixels wide, so 1:17
    10vw equals 144 pixels when my browser is maximized. 1:21
    Vh is short for viewpoint height, and 1:28
    is measured relative to the height of the viewpoint. 1:31
    Since my laptop viewpoint is 900 pixels tall when maximized, 1:35
    10vh would equal 90 pixels. 1:41
    Let's say developer Diane was looking for a more impressive header, 1:46
    one that was 25% of the height of the viewport. 1:51
    This is where the vh unit is useful. 1:55
    Try dragging your browser around, making the viewport taller and 2:05
    shorter, and seeing how the height of the header adjusts accordingly. 2:09
    Measurements higher than 100vh are acceptable. 2:18
    If we try setting the height of our header to say 125vh, 2:21
    we'll see that the header is actually taller than 2:27
    the total height of the viewport by 25%. 2:31
    I'm going to undo that and set the header height back to 25vh. 2:35
    What if we wanted our section element to be the full height of the screen? 2:43
    We can see that sort of worked. 3:10
    Each of the sections in Diane's blog post matches the height of the browser, 3:13
    and has an azure background and a gray dotted border at the bottom. 3:18
    But in sections with lengthier passages of text, some of our sections overlap. 3:24
    What do you think? 3:31
    Any idea what's causing this issue or how we could fix it? 3:32
    Notice that the section with the most text grows taller than the height of the mobile 3:39
    viewport. 3:44
    We told the browser to make this section 100% of the height of the screen. 3:45
    But sometimes that's not tall enough to fit all the content. 3:51
    If you said, why don't we switch our height property to min-height, 3:57
    then you're doing awesome. 4:01
    Now our sections will be at least the height of the screen, or 4:06
    else the height of the content, whichever is taller. 4:10
    And our section content should be legible on both desktop and mobile screens. 4:14
    Building responsive layouts involves a lot of thinking and planning. 4:27
    And there are some critical CSS techniques you haven't learned yet. 4:32
    But knowing how to base your measurements on the size of the viewport 4:36
    is an excellent start. 4:40

    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