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
if you are using bootstrap u can just use the hidden-sm ( lg or md or xs) depending on what u want. u can then go into the css file and specify the percentages u want it to show on. in the sample below it will be hiding on large screens, medium ones and extra small ones but show on small screens by taking half of the screen.
<div class="col-sm-12 hidden-lg hidden-md hidden-xs">what ever you want</div>