How to remove extra white space between div rows and make all div images square size?

Question

I have created the following page for ios devices when I display the page on iPhone I get extra white space at the bottom of each row! I don\'t know how to remove the extra

Answer 1

You can use flexbox for the rows, padding top trick to make squares and object-fit to make your images fit the squares (you will need a polyfill for ie if you use object fit - otherwise you can replace the images with background images if you do not want to use object fit)

I have left the icons and download links for you to style

a {
  text-decoration: none;
  color: #003569
}


/* try not to over qualify selectors - it's inefficient and harder to maintain. if you have many line classes doing different things, then you need to use something more specific to this line - eg image-line */

.line {
  margin: 2vw 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* spaces out images evenly with no space at the sides */
}

.img {
  flex-basis: 32%; /* allow for 3 images per line with 2% space between each image */
  max-width: 32%;  
  cursor: pointer;
}

.img-wrap {
  display: block;
  position: relative;
  padding-top: 100%;
  /* creates a square */
}

.img-wrap>img {
  /* make img fill link */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* make image fill square and keep aspect ratio */
  z-index: 1;
}

  

  

    

      
        
        
      
      Download
    
    

      
        
        
        

      
      Download
    
    

      
        
        
        

      
      Download
    
  


  

    
Download
    
Download
    
Download
  

Useful Links:

• Flexbox playground (codepen)
• Object fit
• Padding top trick