Re: Hide Div if Screen is Smaller than 1024

[jfreehill]

CSS Media queries are slick, although not supported in IE 8 and lower. Chris made an article that includes a jQuery (& raw Javascript) method for what you’re trying to do that would be supported in any browser (if you care): https://css-tricks.com/resolution-specific-stylesheets/

You’ll want to replace the if statement in this with yours and replace your screen.width with just width . By the way with your code, you’re actually telling it to hide the div if the browser width is above 1024, rather than vice versa, so you’ll want to flip that.

function adjustStyle(width) {

width = parseInt(width);

if (width < 701) {

$("#size-stylesheet").attr("href", "css/narrow.css");

} else if ((width >= 701) && (width < 900)) {

$("#size-stylesheet").attr("href", "css/medium.css");

} else {

$("#size-stylesheet").attr("href", "css/wide.css");

}

}



$(function() {

adjustStyle($(this).width());

$(window).resize(function() {

adjustStyle($(this).width());

});

});