Display css none is not working in IE 8,9 on @media (max-width:786px){}

Question

I want to display none a div on @media (max-width:786px){} I want to fix with jquery .hide() function. What will be the possible code?

Answer 1

Have in mind that media queries are not compatible with IE8. Take a look at respond.js for IE8 compatibility.

Better approach is using Modernizr to detect media queries compatibility and then using jquery .hide() when you need it :

if(!Modernizr.mq('only all') && $(window).width() < 786){
  // Hide your element with jquery .hide();    
}

Answer 2

It is not a direct answer to your question, but this library convert your mediaqueries for browser that does not support it:

https://code.google.com/p/css3-mediaqueries-js/

Just load it and it does all the job.