Bootstrap grid of images for small resolution

Question

I have a simple home page: https://jsfiddle.net/1Lotp6ce/1/

There are 6 images in 2 rows (3 x 2). It works fine for larger screens, but once it gets sm images start overlapping. How may I fix it so for sm it is 2 images x 3 rows without overlapping.

Update: I'd need it not only not overlap but also to have spaces between rows.

Saurav Rastogi · Accepted Answer

You can do it by using only one .row element as a parent and all other as its child. But keep in mind that the size of all the images should be pixel perfect to each other (i.e. all the image sizes should be 200x200).

And use .img-responsive class on all the tags.

And use column classes as

...

Something like:

Working Code Snippet (use full screen):

/*HEADER*/

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
#logo {
  margin-top: 12px;
}


/*BODY*/

body {
  background-color: #262626;
  padding-top: 70px;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1080px;
  }
}

.row > div > a > img {
  width: 100%;
  display: block;
  margin: 10px 0;
}

.top-buffer {
  margin-top: 25px;
}

.mail {
  /*color: */
}

.mail:hover {}


/*FOOTER*/

.footer-bottom {
  min-height: 30px;
  width: 100%;
}

.copyright {
  color: #777;
  line-height: 30px;
  min-height: 30px;
  padding: 10px 0;
}




  
    
      
        
      
      
        
          Home
        
        
          Contact
        
      
    
  
  
    
      
        
          
        
      
      
        
          
        
      
      
        
          
        
      
      
        
          
        
      
      
        
          
        
      
      
        
          
        
      
    
  

  
    
      
        © 2016, Feanor, All rights reserved
      
      
        
          
            
        
        
          
            
        
        
          lybvit@gmail.com

Bootstrap grid of images for small resolution

Answers (1)

Related Questions