title: Resizing Image inside a heading tag
body: <p>I'm trying to resize an image to make it responsive, which is placed inside a <code>&lt;h1&gt;</code> tag. 
  My code:</p>
  
  <pre><code>&lt;div id="header" class="clearfix"&gt;
      &lt;h1 id="logo" &gt;
          &lt;img alt="" src="/images/layouts/logo.png"/&gt;
      &lt;/h1&gt;
      &lt;div id="heading"&gt;
          &lt;h2&gt;Sample&lt;span class="white"&gt;Title&lt;/span&gt;&lt;/h2&gt;
          &lt;p class="white"&gt;Some Text&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My css:</p>
  
  <pre><code>.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
  
  .clearfix:after { clear: both; }
  
  .clearfix { zoom: 1; }
  </code></pre>
  
  <p>and for the <code>&lt;h1&gt;</code> tag</p>
  
  <pre><code>h1 { font-size: 2em; margin-top: 0.75em; margin-bottom: 0.75em; }
  </code></pre>
  
  <p>I've tried resizing the font size in h1</p>
  
  <pre><code>@media screen and (max-width:320px) {
  #header #logo h1 {
  
          font-size: 5px;
          margin-top: 25px; margin-bottom: 25px;
      }}
  </code></pre>
  
  <p>But there seems to be no effect. What should I do to decrease the size of <code>&lt;h1&gt;</code> tag?</p>