Hide div element when screen size is smaller than a specific size
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.
@media only screen and (max-width: 1026px) {
#fadeshow1 {
display: none;
}
}
Any time the screen is less than 1026 pixels wide, anything inside the { }
will apply.
Some browsers don't support media queries. You can get round this using a javascript library like Respond.JS