Responsive Design CSS fills entire screen when using small browser

Question

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. Is there another media query that I should use? I also tried a `min-width` of 0 and `max-width` of 320, that did not work. Example: HTML: ```

@RenderBody()

``` CSS ``` 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-weigh…

Accepted Answer

Simply use

```
// Landscape phone to portrait tablet
@media (max-width: 767px) {
    .sidebar {
            display: none;
    }
}
```

And why did you not use the responsive css when using twitter bootstrap? There is a class called `.hidden-phone`, very useful.

The most used media querys are

```
// Large desktop
@media (min-width: 1200px) {
}

// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) {
}

// Everything below 1024px
@media (max-width: 979px) {
}

// Landscape phone to portrait tablet
@media (max-width: 767px) {
}

// Landscape phones and down
@media (max-width: 480px) {
}
```

Responsive Design CSS fills entire screen when using small browser

Solution

Problem