CODEWITHSUNDEEP
javascriptcss
Costa Michailidis
Costa Michailidis

Reputation: 8188

CSS media query height greater than width and vice versa (or how to imitate with JavaScript)

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?

Upvotes: 44

Views: 84070

Answers (4)

Alex
Alex

Reputation: 2392

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.

Upvotes: 8

ErrorGamer2000
ErrorGamer2000

Reputation: 325

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).

Upvotes: 9

sheriffderek
sheriffderek

Reputation: 9053

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..." */
  }
}

Upvotes: 32

Mitch Denny
Mitch Denny

Reputation: 2138

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.

Upvotes: 3

Related Questions