39

The majority of desktop and laptop screens nowadays have a width greater than the height. The screen is "wide" not "tall." Smart phones have done something rather cool by enabling the orientation of the phone to influence how the content is presented.

I'd like to do this with media queries, so that if someone on a mac with a big monitor has their browser window sized so that it's very "tall" (height is greater than width) they would see a header and footer. But if they went fullscreen or "wide" (width is greater than height) they would see a sidebar on the left and maybe also the right.

I'm trying to take full advantage of wide screens, and orientations and such. How to do this with media queries or javascript?

4 Answers 4

30

I'm sure you have it by now, but here is an example for others who pass by. Like the previous person said, people should take the time to read this: http://www.w3.org/TR/css3-mediaqueries/

Now, here is an answer. You can put "landscape" or "portrait" in conjunction with widths and heights in your @media rules. This assumes that height is greater than the width and vice versa. I usually only use min-width and then have a few separate @media rules for those specifically. One example would be landscape: horizontal scroll (desktop) and portrait: regular vertical (tablet/phone )

Those 2 wouldn't do it alone though, you'll need some combinations. I think we can assume your sidebar would be a hindrance on screens smaller than 600px wide.

/* 01 */
@media (min-width: 0) {
   /* this is the same as not using a media query... */
   .main-content {
     width: 100%;
     float: left;
   }

   .side-bar {
     width: 100%;
     float: left
   }

}


/* 2 */
@media (min-width: 600px) and (orientation:landscape) {

   .main-content {
     width: 70%;
     float: left;
   }

   .side-bar {
     width: 30%;
     float: left
   }

}

HERE is a jsfiddle - note that box-sizing: border-box; is used for padding issues.

2017 UPDATE

I think most people would use flexbox now: https://jsfiddle.net/sheriffderek/egxcgyyd/

.parent {
  display: flex;
  flex-direction: column;
}

@media (min-width: 600px) and (orientation:landscape) {
  .parent {
    flex-direction: row;
  }
  .child-1 {
    min-width: 260px; /* or flex-basis: xx - try them both */
  }
  .child-2 {
    flex-basis: 100%; /* "if at all possible... please try to be this size..." */
  }
}
4
  • Thanks so much, Derek! I settled into a similar habit. Make things liquid and then establish breakpoints where the layout needs to change. I've also been thinking about setting my base font sizes in inches or centimeters, because there's such a huge variety of resolutions and pixel densities nowadays. Apr 11, 2013 at 17:40
  • There's a problem with setting the base font below 100%. I forget where I read about this. I think media queries don't necessarily listen to the base, or something..... Here we go. First bullet in this blog post: filamentgroup.com/lab/… Apr 12, 2013 at 19:45
  • For any future people... don't do that font percentage thing I mentioned above. Not good. Just use px - and you'll be better off. : ) Jan 2, 2017 at 16:34
  • some phones when the keybaord is displayed on a form field can force the orientation from portrait to landscape. and you end up rending in a different mode then you expect. So to recap, the phone held in portrait mode with the keyboard open can be reported in media queries as landscape because the height is less than the width.
    – ethermal
    Nov 23, 2017 at 21:25
7

I know that this is an old question, but the solution that I used was this:

.main-content {
  /* Default for when the height is greater than the width of the screen*/
  width: var(--content-width-small);
}

@media screen and (min-width: 100vh) {
  /* The width is greater than the height */
  .main-content {
    width: var(--content-width-wide);
  }
}

This is much more intuitive, and works perfectly well (at least for me, because I wanted to have an image with dimensions based on whether the screen's height was greater than it's width or vise versa).

4

As stated prior, media queries are the way to go.

More specifically, if you are attempting to detect if the viewport is taller than it is wide (height > width), you might take a look at the aspect ratio documentation.

For example, let's say you wanted to hide or show a different title based on when the viewport is tall or wide. Since a 1/1 aspect ratio is a perfect square, you can use a combination of min-aspect-ratio and max-aspect-ratio to detect when a change between "tall" and "wide" occurs.

The code might look like this:

@media (max-aspect-ratio: 1/1) {
  body {
    background-color: cornflowerblue;
  }
 
  .wide {
    display: none;
  }
}

@media (min-aspect-ratio: 1/1) {
  body {
    background-color: whitesmoke;
  }
 
  .tall {
    display: none;
  }
}

@media (aspect-ratio: 1/1) {
  .wide {
    display: block;
  }
}
<div class="wrapper">
  <h1 class="tall">I'm taller than I am wide</h1>
  <h1 class="wide">I'm wider than I am tall</h1>
</div>

There is a caveat, though. You might have noticed a third media query that checks if the aspect ratio is a perfect square. Because of how media queries currently work with min and max values, there is a 1px point where some weird stuff can happen, and both are active. Having a query that checks for this perfect square scenario prevents the screen from not displaying either title in the case where it is a perfect square.

3

Media Queries are probably going to be your solution here for the modern browsers that support it. You can grab a copy of the documentation from here:

http://www.w3.org/TR/css3-mediaqueries/

But you might find the following tutorial useful (Google for: Media Queries Tutorial):

http://webdesignerwall.com/tutorials/css3-media-queries

Once you pick up the basics doing things like hiding elements if the screen falls below a specific resolution:

@media screen and (max-width: 600px)
{
  .sidebar
  {
    display: none;
  }
}

Hope this helps.

1
  • 4
    I fully understand everything you've described so far, in fact I've used the technique above in my projects ie: tedxgramercy.jit.su/team That one is kinda fun, try resizing the browser window. So that's nice, but I was kinda hoping you'd go on to answer my question. Your response kinda ended mid sentence. Maybe it got cut off... Jun 2, 2012 at 2:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.