title: Making responsive footer with images inside
body: <p>I've trying to make responsive footer without to use bootstrap. Just css but something doesn't go right. Buttons in the footer are also images not text links.
  The structure of the footer is</p>
  
  <pre><code>&lt;div id="footer"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/button.png" width="221" height="61" id="Image26"&gt;&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/button.png" width="221" height="61" id="Image27"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/button.png" width="221" height="61" id="Image25"&gt;&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/button.png" width="221" height="61" id="Image24"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;p&gt;Copyright &amp;copy;  | all rights reserved.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the css of the footer</p>
  
  <pre><code>#footer{
      background: url(../images/bg-footer.png) repeat-x center top;
      min-height: 300px;
      margin-top: -45px;
      overflow: hidden;
      background-position-x: -15px;
  }
  
  #footer ul {
      list-style: none;
      margin: 50px auto 0;
      overflow: hidden;
      padding: 0;
      width: 960px;
  }  
  
  #footer ul li {
     float: left;
     height: 60px;
     line-height: 60px;
     margin: 0 0 0 25px;
     width: 220px;
  }
  
  #footer ul li:first-child {
     margin: 0;
  }
  
  #footer ul li a {
     background: url(../images/bg-menu1.png) no-repeat 0 -70px;
     color: #2B0D05;
     display: block;
     font-family: 'PlayballRegular';
     font-size: 30px;
     text-align: center;
     text-decoration: none;
  }
  
  #footer ul li.current a, 
  #footer ul li a:hover {
     background: url(../images/bg-menu1.png) no-repeat 0 0;
     font-family: PlayballRegular;
  }
  
  #footer p {
     margin: 80px 0 0;
     text-align: center;
     text-transform: lowercase;
  }
  </code></pre>
  
  <p>The result is that when I resize the window there are 3 buttons instead of 4 and <code>&lt;p&gt;&lt;/p&gt;</code> become invisible.</p>
  
  <p>Here is the <a href="http://jsfiddle.net/qm7pqu5r/3/" rel="nofollow">JSFFIDLE</a> of what I'm tried so far. </p>