Removing 'specific' images with media queries

Question

I am looking for how to remove specific images with media queries. I am using HTML/CSS for a webpage.

Here is the code I currently have, which does not work (it was experimental):

@media (min-width:0px) and (max-width:1200px) {

LEVEL 1.png, level 6.png, http://placehold.it/160x600, http://placehold.it/100x100 {
display:none;
}

}

Any suggestions would be great, thanks.

Answer 1

Just give the images a class and then in the media query:

.that-class-name {
  display: none;
}

Also, you should probably remove min-width: 0. I'm wondering if something less than 1200px would be better for for max-width as well. That's very wide.

Answer 2

Here you have to add a class inside the your media query

@media (min-width:0px) and (max-width:1200px)
   .img { display: none; margin: 0 auto;} // your image class or can be img tag
}

and just now i answered the same question Here