Bootstrap Website Images Do Not Line Up Perfectly

Question

This Bootstrap-based website for an artist has tiling photo galleries. I've noticed that they look great except on screens below about 768 pixels. Then, the images tile with gaps in between them. Sometimes it seems to happen when the text box below the image exceeds 3 lines. I also notice that some of the image that are rectangular have this issue (the photo galleries seem to work best with square images) but all the image widths are the same so it shouldn't really be an issue.

How can I remedy this so that the galleries tile perfectly regardless of the amount of text under the photos, and regardless of the image height?

This is what the code for the photo galleries looks like:



    
    
        
            
                
                EYE WITNESS, 2014 
Acrylic on Panel 9" x 15.25"
            
        
        
            
                
                GHOST, 2014 
Acrylic on Panel 12" x 12"
            
        
        
            
                
                HER FEELINGS, 2014 
Acrylic on Panel 6"x 16"
            
        
        
            
                
                IN HIND SIGHT, 2014 
Acrylic on Panel 7" x 7.5"
            
        
    
    
    
        
            
                
                LONESOME FORM, 2014 
Acrylic on Panel 10" x 7.5"
            
        
        
            
                
                MODEL NUDE, 2014 
Acrylic on Panel 5.5 x 4.25
            
        
        
            
                
                MODELS AND ACTRESSES, 2014 
Print on Panel 2" x 2" (each)
            
        
        
            
                
                MODELS AND ACTRESSES, 2014 
Print on Panel 2" x 2" 
(BLUE detail)
            
        
    
    
    
        
            
                
                MODELS AND ACTRESSES, 2014 
Print on Panel 2" x 2" 
(GREEN detail)
            
        
        
            
                
                MODELS AND ACTRESSES, 2014 
Print on Panel 2" x 2" 
(MAGENTA detail)
            
        
        
            
                
                MODELS AND ACTRESSES, 2014 
Print on Panel 2" x 2" 
(ORANGE detail)
            
        
        
            
                
                MODELS AND ACTRESSES, 2014 
Print on Panel 2" x 2" 
(PURPLE detail)

Here's the CSS:

.portfolio-thumbs-wrapper-home {
 margin-top: 6em;
 }
.portfolio-thumbs-wrapper {
 margin-top: 2em;
 }
.portfolio-thumbs-wrapper h2 {
display: block;
margin-bottom: 2em;
}
.portfolio-thumbs {
margin-bottom: 2em;
}
.portfolio-thumbs img {
width: 100%;
height: auto;
}

And this is a link to the site and the photo gallery which I'm having issues with: This is an artist's site so features adult content (respectfully, as art), but still, don't look if you can't handle it. www.ericeickmann.com/panel.html

Paul Graffam · Accepted Answer

The problem is that you are going from a 4 item row to now a 2 item one and not fixing for any float issues that will arise due to your item's variable height. A quick and easy solution to this is to then clear your floats every two items inside your rows and have this only take place in mobile. You can use the following bootstrap element for this effect:

In your case I can do something like this to fix the grid issue in one of your rows:


  
    
      
      LONESOME FORM, 2014 
Acrylic on Panel 10" x 7.5"
    
  
  
    
      
      MODEL NUDE, 2014 
Acrylic on Panel 5.5 x 4.25
    
  

  

  
    
      
      MODELS AND ACTRESSES, 2014 
Print on Panel 2" x 2" (each)
    
  
  
    
      
      MODELS AND ACTRESSES, 2014 
Print on Panel 2" x 2" 
(BLUE detail)

There is more info on working with the grid, clearing floats and other bootstrap helper classes here:

http://getbootstrap.com/css/#grid-responsive-resets

and here:

http://getbootstrap.com/css/#responsive-utilities

Note that you are using an older version of bootstrap (3.1) so some of the responsive classes are different for you (no -block at the end for visible-sm).

Bootstrap Website Images Do Not Line Up Perfectly

Answers (1)

Related Questions