title: Media query does not hide an image
body: <p>I want to hide my site for screens below 800px width.  </p>
  
  <pre><code>&lt;body&gt;
  ...
  &lt;img id="elephC" src="img/eleph.gif" alt="img"&gt;
  ...
  &lt;div id='minW'&gt;
  qadenzaClub
  &lt;br&gt;
  &lt;div id='minW_red'&gt;min 800 px&lt;br&gt;screen width required&lt;/div&gt;
  &lt;/div&gt;
  ...
  &lt;/body&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>@media only screen and (max-width:799px){
  body * {
   display:none;
  }
  #minW, #minW div, #minW br{
      display:block;
  }
  }
  </code></pre>
  
  <p>Resizing the window on 799px, everything inside the <code>body</code> tag is hidden, EXCEPT the <code>elephC</code> image !  (animated gif).</p>
  
  <p><code>minW</code> and children divs are displayed properly.</p>
  
  <p>I tested the markup and css on W3C Validation Service - it's ok.</p>