get rid of white space in thumbnail

Question

I'm trying to get rid of extra white space in an img-thumbnail. I adjusted padding in bootstrap.css but nothing changed ! How can I force it to remove this big space ?

bootstrap.css

.img-thumbnail {
  display: inline-block;
  max-width: 100%;
  padding: 3px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
     -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
}

view page

<% @store.products.each_with_index do |product,index| %>

   
      <%= link_to image_tag(root_url + "/images/" + product.filename, size: "200x150", alt: product.filename), product %>
                    
                        $ <%= product.price %>
                            <%= product.name %>
                              
                                 <% if current_user != product.store.user %>
                                    <%= rating_for product, "overall", :enable_half => false,:disable_after_rate => false %>
                                <% end %>
                            
                      
                 
            
 <%end %>

A screen shot http://postimg.org/image/4ih2jd481/ how can I decrease padding between each thumbnail as well. I tried to add right-padding and set a low number of pixels, it would not work either.

vanburen · Accepted Answer

It's most likely the columns that need to have any padding reduced. You can use CSS Attribute Selectors to accomplish this. See MDN for more information. See the second working example labeled Thumbnail Example that applies specifically to your issue.

Basic Example:

.some-class > [class*='red'] {
  background: red;
}
.another-class {
  background: green;
}


  
    NOT RED
  
  
    RED
  
  
    GREEN
  
  
    RED
  
  
    NOT RED
  
  
    NOT RED
  
  
    GREEN

Sidenote: You may want to consider using the thumbnail class instead of img-thumbnail since it appears to cover your use case. And you may need to clear your columns if the thumbnails are dynamically generated and vary in height.

Thumbnail Example:

body {
  padding-top: 25px;
}
.thumbnail-gutter > [class*='col-'] {
  padding-right: 4px;
  padding-left: 4px;
}
.thumbnail-gutter .thumbnail {
  border: 4px solid #f00;
}
@media (min-width: 768px) and (max-width: 1199px) {
  .thumbnail-gutter .col-sm-4:nth-child(3n+1) {
    clear: left
  }
}




  

    
      
        
        
          $100.00
          ONE NAMENAMENAME
          
            
            
          
        
      
    

    
      
        
        
          $5.00
          TWO NAMENAME NAME
          
            
            
            
            
          
        
      
    

    
      
        
        
          $55.00
          THREE NAMENAME
          
            
            
            
            
            
            
          
        
      
    

    
      
        
        
          $5.00
          FOUR NAMENAME NAMENAME NAMENAME
          
            
            
            
            
            
          
        
      
    

    
      
        
        
          $55.00
          FIVE NAMENAME
          
            
            
            
          
        
      
    

    
      
        
        
          $5.00
          SIX NAMENAME NAMENAME NAMENAME NAMENAME
          
            
          
        
      
    

    
      
        
        
          $55.00
          SEVEN NAMENAME NAMENAME

get rid of white space in thumbnail

Answers (1)

Related Questions