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

Enhancing Design with CSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Improving Spacing

3:52 with Anwar Montasir

Before we write any CSS media queries for our Lake Tahoe site, let’s look at our mobile layout carefully and see whether any improvements need to be made.

Vocabulary

cognitive load: the amount of mental effort needed to solve a problem.

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

    Before we write any CSS media queries for our Lake Tahoe site, let's look at 0:01
    our mobile layout carefully and see whether any improvements need to be made. 0:06
    Scrolling through our layout, 0:12
    my only real concern on the mobile screen is vertical spacing. 0:14
    It should be extremely obvious when the user glances at our page, where one 0:19
    bit of content ends, and another begins and which parts of the page are related. 0:24
    For example, the button labeled "See the Wildlife" is currently spaced 0:31
    equally between the image of the bear and the image of the forest. 0:36
    While the user could read the text and 0:41
    figure out that the text relates to the wildlife section above, 0:44
    there's no reason to increase the user's cognitive load, or 0:48
    the amount they have to figure out to navigate this webpage. 0:52
    Let's improve the vertical spacing instead. 0:57
    Since our three main sections of content found between the header and 1:01
    footer are found inside the section element, 1:06
    increasing the space underneath each section should be a big help. 1:09
    The sections are surrounded by the main element, so I'll write 1:15
    this CSS right underneath our main type selector. 1:20
    This increased padding plus a subtle border dividing each section, will 1:43
    make the page markedly easier to scan over with your eye to find key information. 1:48
    I might similarly want to increase the space between the two divs 1:57
    with a class of .column. 2:01
    If I want to increase the spacing underneath the first div, but 2:04
    not the second, 2:08
    the first child pseudo selector will allow me to select only the first element. 2:09
    Once we feel confident that our mobile layout is solid, 2:32
    it's time to expand the viewport. 2:36
    And determine where improvements are needed to the large screen version. 2:39
    The most immediate problem I see is our content is allowed to grow too wide. 2:45
    The header image looks pretty cool full screen. 2:52
    And the header and footer contain only a bit of centered text. 2:56
    So I'm not so worried about those areas of our layout. 3:00
    But as the viewpoint gets wider, the images start to become pixellated and 3:04
    our columns of text grow too wide for comfortable reading. 3:10
    We can actually solve this one without a media query by 3:17
    applying the max-width property to our main element. 3:22
    Now, our main content is prevented from growing any wider than 1000 pixels. 3:34
    And we've used auto margins to center the main element on a larger screen. 3: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