Bootstrap thumbnails too small on mobile

Question

I have a set of Bootstrap thumbnails on my web page and I have set all the images with class .img-responsive. When I open the page on a mobile browser the thumbnails are appearing too small and I can't even resize them with css.

Here are my thumbnails:

  <div class="row">
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="images/thumbnails/traditional.jpg" class="img-rounded img-responsive" alt="...">
        </a>
      </div>
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="images/thumbnails/mehndi.jpg" class="img-rounded img-responsive" alt="...">
        </a>
      </div>
... altogether 12 thumbnails 
    </div>

I have tried to edit the size of the thumbnails for mobile phone size devices with the following media query:

@media(max-width:767px){
    .thumbnail > img { 
    height:70px;
    width:120px;

    }
}

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.

If I leave the thumbnails like they are without trying the above CSS code they appear too small on mobile devices and I need a way to increase the size of the thumbnails on mobile devices only.

Here is a link to the site:

Answer 1

Change col-xs-6 to col-xs-12

So instead of

  <div class="col-xs-6 col-md-3">

You'll have

  <div class="col-xs-12 col-md-3">

This will make it so that each thumbnail will take up the full width of the phone, instead of having two across.

Answer 2

I have fixed the problem, I found that I had the below code elsewhere in my CSS that I didn't take notice of. This below media query was what made my images appear so small on mobile devices, I took it out and now images appear fine. Thanks for the help guys.

@media(max-width:767px){

.thumbnail > img {
    height:40px;

    }
}