CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmobiletwitter-bootstrap-3
user3574492
user3574492

Reputation: 6435

Bootstrap thumbnails too small on mobile

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:

Upvotes: 2

Views: 4066

Answers (2)

user3574492
user3574492

Reputation: 6435

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;

    }
}

Upvotes: 1

Dan
Dan

Reputation: 9468

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.

Upvotes: 5

Related Questions