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.


Video Transcript

  • 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

Workspace

You have to sign up for Treehouse in order to create workspaces.

Sign up

Downloads

You have to sign up for Treehouse in order to download course videos.

Sign up

Instructor

  • Nick Pettit

    Nick is a designer, public speaker, teacher at Treehouse, and co-host of The Treehouse Show. His Twitter handle is @nickrp.