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) {...}}

What have you tried so far? Please post your css code, not just the media query. — i alarmed alien, Sep 30 '14 at 07:31
@media screen and (max-device-width:450px) { img { display: none;} .art { display: none;} — ranopano, Sep 30 '14 at 07:33
edit your post to add that css there. In future questions, it's best to add all the relevant code so people can provide useful answers. Thanks! — i alarmed alien, Sep 30 '14 at 07:35

score 3 · Accepted Answer · answered Sep 30 '14 at 07:42

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. :) :)

Alex Wilson · Answer 2 · 2014-09-30T07:40:43.370

1

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

edited Sep 30 '14 at 07:40

answered Sep 30 '14 at 07:31

Alex Wilson

2,421
11
13

score 0 · Answer 3 · answered Sep 30 '14 at 07:31

0

You mean this?

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

answered Sep 30 '14 at 07:31

maťo

1,225
8
16

score 0 · Answer 4 · answered Sep 30 '14 at 07:34

0

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

answered Sep 30 '14 at 07:34

himanshu

1,732
1
11
12

score 0 · Answer 5 · answered Sep 30 '14 at 07:40

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

I would just use screen-width, like so:

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

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

5 Answers5