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 b

Answer 1

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.

Answer 2

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