title: Make div disappear when on small screens?
body: <p>My website has an overall CSS file, together with many inherited CSS files for different screen sizes.</p>
  
  <p>In the overall CSS file <strong>style.css</strong>, I have</p>
  
  <pre><code>.image img {
      border-radius: 5px;
      display: block;
  }
  </code></pre>
  
  <p>In my HTML file, I have</p>
  
  <pre><code>&lt;div class="image"&gt;
     &lt;img src="me.jpg"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When on a small screen, I want this image <code>div</code> to disappear, as I want people on small screens (e.g., phones) to focus on text only.</p>
  
  <p>To this end, I added the following block to <code>style-xsmall.css</code></p>
  
  <pre><code>.image img {
      width: 0;
  }
  </code></pre>
  
  <p>But it doesn't work. </p>
  
  <p>How do I make this image <code>div</code> disappear when on small screens? </p>