Remove element for certain screen sizes

Question

I am currently creating a responsive web design using media queries. For mobile devices I want to remove my JS slider and replace it with something else. I have looked at .remove() and a few other things from the JQuery library, however these have to be implemented into the HTML and I cannot think of a work around from the css angle.

Answer 1

You can also use jquery function addClass() and removeClass() or removeAttr() to fulfill your purpose.

Example:

$(window).resize(function(){
        if(window.innerWidth < 500) {
            $("#slider").removeAttr("style");

        }
});

Or you can also use media query as follow :

#mySlider{
    display: block;
}

@media (max-width: 500px) 
{
    #mySlider
    {
        display: none;
    }
}

Answer 2

Not a 100% sure what you mean. But I created a class "no-mobile" that I add to elements that should not be shown on mobile devices. In the media query I then set no-mobile to display: none;.

@media screen and (max-width: 480px) {

        .nomobile {
            display:none;
        }
}

Answer 3

You can hide an element and show another depending on screen size using media query from css , this is from one of my live projects (I use this to show/hide icon)

@media only screen and (max-width: 767px) and (min-width: 480px)
{
    .icon-12{ display:none; } // 12 px
    .icon-9{ display:inline-block; }  // 9px
}

Answer 4

Do you need to remove them, or just hide them? If just hiding is okay, then you can combine media queries with display:none:

#mySlider{
    display: block;
}

@media (max-width: 640px) 
{
    #mySlider
    {
        display: none;
    }
}