Bummer! This is just a preview. You need to be signed in with a Basic or Pro account to view the entire video.

Start a free Basic trial
to watch this video

Sign up for Treehouse
width and height

width and height

5:59

In this video, you'll learn about two media features of media queries. You'll also learn an advanced technique that will help you get more important content above the fold.

  • 0:00

    [?mellow guitar music?]

  • 0:03

    [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com]

  • 0:07

    [CSS3 Media Queries - width and height with Nick Pettit]

  • 0:13

    Now that we've gone over some of the basic media query syntax,

  • 0:17

    let's go over some of the media features.

  • 0:19

    In the previous video, we looked at one type of what's called a media feature,

  • 0:25

    but there are several others that allow you to detect

  • 0:28

    different aspects of the devices that your site is being displayed on.

  • 0:32

    So first, let's revisit width, which is the media feature that we looked at

  • 0:37

    in the last video.

  • 0:39

    As we've already seen, you can use width to detect the width of the browser display area

  • 0:46

    or the viewport.

  • 0:47

    To be more specific, we actually used max width.

  • 0:50

    Max width, though, isn't a separate feature from width.

  • 0:55

    Max and min are actually just the two prefixes that can be applied to most media features.

  • 1:01

    A few media features that you can't use the max and min prefixes with

  • 1:06

    are orientation, scan, and grid, all of which we'll be taking a look at in upcoming videos.

  • 1:13

    Now, the min prefix means the same thing as greater or equal to,

  • 1:18

    and the max prefix means the same thing as smaller or equal to.

  • 1:24

    This is just slightly confusing at first, but it's pretty easy to remember.

  • 1:28

    The reason for this is because rather than using the typical angle brackets

  • 1:34

    that represent greater than or less than,

  • 1:37

    the angle brackets could, in some cases, conflict with HTML and XML.

  • 1:43

    So that's why we use min and max.

  • 1:45

    So let's go ahead and switch over to our very familiar website here.

  • 1:50

    So, in the last video, we actually covered width pretty thoroughly,

  • 1:54

    so we're going to just move on to height.

  • 1:57

    Based on what I've shown you so far,

  • 2:00

    the height media feature should actually be pretty obvious.

  • 2:04

    It allows you to apply styling based on the height of the viewing area

  • 2:08

    minus all of the browser chrome and scroll bars, of course.

  • 2:13

    However, thinking a bit more practically, the height media feature

  • 2:17

    has both aesthetic and business applications.

  • 2:21

    So let's say that a client or your employer instructs you to put

  • 2:24

    several pieces of specific information above the fold.

  • 2:30

    Now, I know that there are a few differing opinions about whether or not

  • 2:34

    putting things above the fold actually has a big impact,

  • 2:37

    but for the sake of this example, let's just say that's what has to be done.

  • 2:42

    Now, to put something above the fold means to put it at the top of the web page

  • 2:48

    where people can see it before they have to scroll down.

  • 2:51

    So anything you can see right now is above the fold.

  • 2:54

    For different screen resolutions, though, this is going to mean that the fold ends up falling

  • 3:01

    at different points down the page.

  • 3:04

    Some people might have large, high-resolution displays

  • 3:07

    that put the fold pretty far down the page,

  • 3:10

    and other people might have very small screens

  • 3:13

    and might have lots of browser chrome and toolbars,

  • 3:17

    so their fold might be higher up on the page.

  • 3:20

    Now, you could just take an average of these two

  • 3:23

    and sort of make a somewhat haphazard educated guess

  • 3:27

    as to where the fold falls, but we have media queries, so we can do much better than that.

  • 3:33

    So let's go ahead and switch over to our text editor,

  • 3:38

    and for the sake of simplicity, we're just going to put our media queries down at the bottom

  • 3:43

    of our style sheet, and I'm just going to go ahead and copy that flag there

  • 3:48

    so that we can kind of separate out our media queries.

  • 3:52

    So we'll say media queries, and that will be everything below here.

  • 4:00

    And first, we need to actually make our media query,

  • 4:03

    so we'll say media screen and (max-height)

  • 4:10

    and we want this to be a little bit smaller than the average, so we'll say 450 pixels.

  • 4:18

    And inside of here, we're going to select our header and we're going to try and slim down

  • 4:26

    our header a little bit so that we can actually see more of the content above the fold

  • 4:32

    and it's not just all header.

  • 4:34

    So first, we'll reduce the font size,

  • 4:40

    and then we have quite a bit of margin there,

  • 4:43

    so we'll go ahead and reduce that as well.

  • 4:47

    And same thing for the navigation--we're going to first select our nav div,

  • 4:52

    and we'll reduce some of the margin,

  • 4:57

    and we'll also reduce the font size.

  • 5:02

    There.

  • 5:03

    And when we switch back to our browser and refresh,

  • 5:08

    you can see as we readjust the size of our browser window,

  • 5:13

    the content at the top of the page is rescaled.

  • 5:18

    Now, we can make a branding decision here and just decide that the logo

  • 5:22

    maybe isn't as important as the content.

  • 5:26

    That way, if people have smaller screens,

  • 5:28

    they can see most of what we want them to see above the fold.

  • 5:32

    Now, you can imagine taking this many steps further

  • 5:36

    and possibly rescaling the post, rescaling the images, removing, rearranging,

  • 5:43

    and reprioritizing the content, and so on.

  • 5:47

    Those are just two media features of media queries.

  • 5:51

    In the next video we'll take a look at a few more.

  • 5:54

    [?mellow guitar music?]

  • 5:56

    [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com]

Show full transcript
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">