CODEWITHSUNDEEP
csshtmlmedia-queries
sam_7_h
sam_7_h

Reputation: 800

Remove element for certain screen sizes

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.

Upvotes: 19

Views: 91193

Answers (4)

user2515479
user2515479

Reputation: 113

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;
   }
}

Upvotes: 5

Daniel Gimenez
Daniel Gimenez

Reputation: 20454

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;
   }
}

Upvotes: 36

The Alpha
The Alpha

Reputation: 146191

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
}

Upvotes: 9

Butani Vijay
Butani Vijay

Reputation: 4239

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;
   }
}

Upvotes: 1

Related Questions