Search code examples
htmlcssmedia-queriesmedia

Media query does not hide an image

I want to hide my site for screens below 800px width. 

<body>
...
<img id="elephC" src="img/eleph.gif" alt="img">
...
<div id='minW'>
qadenzaClub
<br>
<div id='minW_red'>min 800 px<br>screen width required</div>
</div>
...
</body>

css

@media only screen and (max-width:799px){
body * {
 display:none;
}
#minW, #minW div, #minW br{
    display:block;
}
}

Resizing the window on 799px, everything inside the body tag is hidden, EXCEPT the elephC image ! (animated gif).

minW and children divs are displayed properly.

I tested the markup and css on W3C Validation Service - it's ok.

Solution

  • UPDATED 1. The !important keyword prevents another rule from overriding the display property.

      @media only screen and (max-width:799px){
            body *{
             display:none !important;
            }
      #minW, #minW div, #minW br{
        display:block !important;
      }
 }

    its working now Look for yourself :)