title: Bootstrap thumbnails too small on mobile
body: <p>I have a set of Bootstrap thumbnails on my web page and I have set all the images with class <code>.img-responsive</code>. When I open the page on a mobile browser the thumbnails are appearing too small and I can't even resize them with css.</p>
  
  <p>Here are my thumbnails:</p>
  
  <pre><code>  &lt;div class="row"&gt;
        &lt;div class="col-xs-6 col-md-3"&gt;
          &lt;a href="#" class="thumbnail"&gt;
            &lt;img src="images/thumbnails/traditional.jpg" class="img-rounded img-responsive" alt="..."&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-6 col-md-3"&gt;
          &lt;a href="#" class="thumbnail"&gt;
            &lt;img src="images/thumbnails/mehndi.jpg" class="img-rounded img-responsive" alt="..."&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  ... altogether 12 thumbnails 
      &lt;/div&gt;
  </code></pre>
  
  <p>I have tried to edit the size of the thumbnails for mobile phone size devices with the following media query:</p>
  
  <pre><code>@media(max-width:767px){
      .thumbnail &gt; img { 
      height:70px;
      width:120px;
  
      }
  }
  </code></pre>
  
  <p>However the width doesn't seem to surpass 80px, it seems like I can only set width up to around 80px and anything higher won't do anything.</p>
  
  <p>If I leave the thumbnails like they are without trying the above CSS code they appear too small on mobile devices and <strong>I need a way to increase the size of the thumbnails on mobile devices only</strong>.</p>
  
  <p>Here is a <a href="http://talk.hostoi.com/bootstrap/bootstrap.html?" rel="nofollow">link</a> to the site: </p>