title: Responsive Design CSS fills entire screen when using small browser
body: <p>I'm trying to use responsive css media queries to hide my sidebar unless the screen is large, or is a tablet big enough and in landscape mode. It seems to be working based on resizing my browser, until I get to a certain size it fills the entire screen. I'm using Twitter Bootstrap styles as well, but not the responsive styles so I don't see how that could be a problem.</p>
  
  <p>Is there another media query that I should use? I also tried a <code>min-width</code> of 0 and <code>max-width</code> of 320, that did not work.</p>
  
  <p>Example:
  <img src="https://i.stack.imgur.com/kP34p.png" alt="Working sidebar, fills side and is displayed">
  <img src="https://i.stack.imgur.com/7QJ6e.png" alt="Not working, once reached a certain size it fills entire browser window"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="span2 sidebar"&gt;
          &lt;a href="@Url.Action("Index", "Home")"&gt;
              &lt;h3&gt;Link Home&lt;/h3&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="span10"&gt;
          @RenderBody()
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html {
      height: 100%;
  }
  
  .sidebar {
      background: #333;
      margin: 0;
      padding-left: 1.5em;
      height: 100%;
      -moz-box-shadow: 0 0 5px #888;
      -webkit-box-shadow: 0 0 5px#888;
      box-shadow: 0 0 5px #888;
      min-height: 100%;
      position: absolute;
      display: none;
  }
  
  h1, h2, h3, h4, h5, h6 {
      font-family: 'Fenix', serif;
      font-weight: 400;
  }
  
  /* Smartphones (portrait and landscape) ----------- */
  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
      /* Styles */
      .sidebar {
          display: none;
      }
  }
  
  /* Smartphones (landscape) ----------- */
  @media only screen and (min-width : 321px) {
      /* Styles */
      .sidebar {
          display: none;
      }
  }
  
  /* Smartphones (portrait) ----------- */
  @media only screen and (max-width : 320px) {
      /* Styles */
      .sidebar {
          display: none;
      }
  }
  
  /* iPads (portrait and landscape) ----------- */
  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
      /* Styles */
      .sidebar {
          display: none;
      }
  }
  
  /* iPads (landscape) ----------- */
  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
      /* Styles */
      .sidebar {
          display: block;
      }
  }
  
  /* iPads (portrait) ----------- */
  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
      /* Styles */
      .sidebar {
          display: none;
      }
  }
  
  /* Desktops and laptops ----------- */
  @media only screen and (min-width : 1224px) {
      /* Styles */
      .sidebar {
          display: block;
      }
  }
  
  /* Large screens ----------- */
  @media only screen and (min-width : 1824px) {
      /* Styles */
      .sidebar {
          display: block;
      }
  }
  
  /* iPhone 4 ----------- */
  @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
      /* Styles */
      .sidebar {
          display: none;
      }
  }
  </code></pre>