Hide div depending on horizontal browserviewport

Question

I use Twitter's Bootstrap 2 with fluid-layout (responsive design) and want to hide a div-box if the browser's horizontal size is smaller than 800px.

How can i make it?

Answer 1

You can apply a custom class to the element you wish to hide and add a display:none property to it to hide it inside a @media query that targets the width of your choice, like so:

@media (max-width: 800px) {
    .hidden-800 {
        display:none !important;
    }
}

Just make sure to place the @media query way down at the end of your custom stylesheet.