Search code examples
jquerycssmediamedia-queries

Removing a div with certain width with jquery

I'm trying to make a pretty different version of a web page for mobile and, for that to happen, I need certain divs to disappear when the browser window width is bigger then 767px. I was trying to do it with jQuery with something like this:

<script>
if ( $('body').width > 767px ) {
    $('.mobile').remove();
}
</script>

but it doesn't work at all.

The divs that I want to disappear in the bigger version have the class .mobile .

Solution

  • You don't necessarily need JS for that. Have you looked at media queries ?

    @media only screen and (min-width: 767px) {
    .mobile { display: none }    
}

    if you still want to use jQuery:

    if ( $('body').width > 767 ) {
    $('.mobile').css('display', 'none');
}