Hide div element when screen size is smaller than a specific size

css, html, javascript

Solution

You can do this with CSS:

@media only screen and (max-width: 1026px) {
    #fadeshow1 {
        display: none;
    }
}

We're using `max-width`, because we want to make an exception to the CSS, when a screen is smaller than the 1026px. `min-width` would make the CSS rule count for all screens of 1026px width and larger.

Something to keep in mind is that `@media` queries are not supported on IE8 and lower.

Problem

I have a div element that I want to hide when the width of the browser is less than or equal to 1026px. Is this possible to do with the css: `@media only screen and (min-width: 1140px) {}` If it isn't possible with css, Is there any alternative? Extra info: When the div element is hidden, I don't want a blank white gap. I'd like the page to flow as it would if I deleted the div element entirely from the code. The div I am hiding is `<div id="fadeshow1"></div>`. HTML5 Doctype. I used javascript to place a gallery into that div. I want it to look like this when it is bigger than 1026px width: I want it to look like this when it is less than 1026px width:

Original source

Related problems