title: how to remove/hide a class ad in CSS when creating responsive screen
body: <p>I am trying to hide an add when the screen is smaller than a certain size. </p>
  
  <p>the relevant html section is:</p>
  
  <pre><code>&lt;div id="content"&gt;
    &lt;div id="articles"&gt;
      &lt;h2&gt;Article&lt;/h2&gt;
      &lt;p&gt;Some article text.  Yadda yadda yadda yadda yadda.&lt;/p&gt;
      &lt;h2&gt;Another Article&lt;/h2&gt;
      &lt;p&gt;Some more article text.  Yadda yadda yadda yadda yadda...&lt;/p&gt;
      &lt;img src="ad.jpg" class="bannerad"&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>the css I have now is:</p>
  
  <pre><code>@media screen and (max-width:480px)
   {
      #menu 
        {
         background-color: green;
        }
      #menu li
        {
         display:block;
         padding:15px;
         margin:0px;
        }
      #header 
        {
         color:green;
         font-style:italic;
         text-transform: uppercase;
        }
      #content h2{color:green};
      .bannerad {display:none};
  }
  </code></pre>
  
  <p>how do i format the bannerad section to hide the ad?</p>