Responsive Design CSS fills entire screen when using small browser - css

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:
<div class="row">
<div class="span2 sidebar">
<a href="#Url.Action("Index", "Home")">
<h3>Link Home</h3>
</a>
</div>
<div class="span10">
#RenderBody()
</div>
</div>
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-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;
}
}

Answer 1

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) {
}

Answer 2

Bootstrap has responsive utility classes to help you do this easily. Eg .hidden-phone, .visible-desktop
Instead of complicating your life and creating the custom css classes, try something as simple as:
<div class="row">
<div class="span2 sidebar hidden-phone">
<!-- sidebar details -->
</a>
</div>
<div class="span10">
<!-- main body -->
</div>
</div>
Good luck!