How to hide image when resizing using max-device-width?

Question

Need to have the img disappear when i'm viewing on a mobile device

 <div id="art">
<img src="../images/canO.jpg" alt="" width="500" height="500"/>
</div>

@media screen and (max-device-width:450px) {...}}

Answer 1

Use this media query.

 @media screen and (max-device-width:450px) { #art img{ display:none; } } 

I don't understand properly what you are asking. If it is not the solution what you need, please explain your question further more. :) :)

Answer 2

Sorry , hurried I wanted to write like this DEMO

@media screen and (max-width:450px){
    #art img{
        display:none;
    }
}

or

   @media screen and (max-width:450px){
        #art img{
             visibility: hidden;
        }
    }

Answer 3

You mean this?

@media screen and (max-device-width:450px){
    #art img{
        display:none;
    }
}

Answer 4

@media screen and (max-device-width:450px) {  .art img { display: none !important;} 

Answer 5

You can hide the whole div #art { display:none; } #art { display:none; } or add a class to the image. Alternatively hide the images in the div with #art img { display:none; } #art img { display:none; }

I would just use screen-width, like so:

@media screen and (max-width:450px) {   
  #art {         
     display:none;
  } 
}