if screen resolution is less than x append css

Issue

Trying to modify the css of an element if the screen resolution is less than 960px

my code isn't working, not seeing any errors in firebug.

<script type="text/javascript">
jQuery(window).resize(function() {
  if (jQuery(window).width() < 960) {
    jQuery(".snow").css('display', 'none');
  }
});
</script>

Solution

You can do this entirely with CSS using the @media command.

@media (max-width:960px) { css... } //nothing with screen size bigger than 960px

@media (min-width:960px) { css... } //nothing with screen size smaller than 960px

See here

Jason Whitted makes a good point, this is CSS 3 only, so it won't work with older browsers (it should work with all modern browsers though). See here for compatibility. Your main problems will be IE 8 and less.

Edit - device selection

@media screen { .nomobile { display: block; } } //desktops/laptops

@media handheld { .nomobile { display: none; } } //mobile devices

Or you could assume mobile devices will have a smaller width, and go on that.

Answered By - ACarter