title: Twitter bootstrap responsive layout
body: <p>I made this responsive layout. It works fine until the width of the screen is less then 800px, it gets messed up.</p>
  
  <p>How can I fix this so the logo's just 'shrink' and don't re-arrange themself underneath each other?</p>
  
  <p><a href="http://jsfiddle.net/hashie5/Pnc3g/" rel="nofollow">http://jsfiddle.net/hashie5/Pnc3g/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="testimonials row-fluid"&gt;
      &lt;div class="span6"&gt;
          &lt;div class="row-fluid"&gt;
              &lt;div class="span12"&gt; &lt;a href="#"&gt;&lt;img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /&gt;&lt;/a&gt; &lt;a href="#"&gt;&lt;img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;a href="#"&gt;&lt;img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="row-fluid"&gt;
              &lt;div class="span3"&gt; &lt;a href="#"&gt;&lt;img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div class="span3"&gt; &lt;a href="#"&gt;&lt;img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div class="span3"&gt; &lt;a href="#"&gt;&lt;img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div class="span3"&gt; &lt;a href="#"&gt;&lt;img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row-fluid"&gt;
              &lt;div class="span3"&gt; &lt;a href="#"&gt;&lt;img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div class="span3"&gt; &lt;a href="#"&gt;&lt;img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div class="span3"&gt; &lt;a href="#"&gt;&lt;img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div class="span3"&gt; &lt;a href="#"&gt;&lt;img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="span6"&gt;
          &lt;div class="quote"&gt;
              &lt;div class="text"&gt;
                  &lt;em&gt;Congratulations! It is really a great tool, it is very friendly for us. Creating a new message is so easy with your smart builder. Thank you for that. 10/10&lt;/em&gt;
              &lt;/div&gt;
              &lt;div class="author"&gt;JUAN ISAAC RODRIGUEZ, Credit Report, Peru.&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>css:</p>
  
  <pre><code>.testimonials {
      background-color:#f7f7f7;
  }
  .quote {
      background: url("http://www.flexmail.net/images/quote_home.gif") left top no-repeat;
      height: 128px;
      margin: 20px auto 0 auto;
      padding: 20px;
  }
  .quote .text {
      color: #444444;
      line-height: 22px;
  }
  .quote .author {
      color: #666666;
      float: left;
      font-family:'colaboratelightregular';
      font-size: 12px;
      line-height: 22px;
      margin: 10px 0 0;
  }
  </code></pre>