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

Question

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?

Answer 1

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