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

Remove the

margin-bottom: 14vw;

From your .images .line {} css rule

Margin and Padding cause white space. The easiest way to see what css rules are causing the margin or padding is with Chrome dev tools

Also you are setting the height of all images to 47vh. Change it to something like 27vh.

  .images .line .img {
      width: 47vw;
      height: 27vw;
  }

Answer 2

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;
}

<div id="myDiv" class="images">

  <!-- try indenting your code properly - helps with maintenance and just makes things easier to read and see where the nesting levels are -->

  <div class="line">
    <div class="img">
      <a class="img-wrap" href="https://awebsite.com/n/a" target="_blank">
        <i class="icon"></i>
        <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
      </a>
      <a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a>
    </div>
    <div class="img">
      <a class="img-wrap" href="https://awebsite.com/n/b" target="_blank">
        <i class="icon"></i>
        <img src="https://www.w3schools.com/howto/img_forest.jpg" alt="">
        <div class="video"></div>
      </a>
      <a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a>
    </div>
    <div class="img">
      <a class="img-wrap" href="https://awebsite.com/n/c" target="_blank">
        <i class="icon"></i>
        <img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="">
        <div class="video"></div>
      </a>
      <a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a>
    </div>
  </div>


  <div class="line">
    <div class="img"><a class="img-wrap" href="https://awebsite.com/n/d" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/w3images/rocks.jpg" alt=""><div class="Carousel"></div></a><a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')"
        download="">Download</a></div>
    <div class="img"><a class="img-wrap" href="https://awebsite.com/n/e" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/w3images/falls2.jpg" alt=""><div class="Carousel"></div></a><a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')"
        download="">Download</a></div>
    <div class="img"><a class="img-wrap" href="https://awebsite.com/n/f" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/w3images/paris.jpg" alt=""><div class="Carousel"></div></a><a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')"
        download="">Download</a></div>
  </div>


</div>

Useful Links:

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

Answer 3

Try to change heigh of this class

.images .line .img {
    cursor: pointer;
    position: relative;
    text-align: center;
    width: 47vw;
    height: 22vw;
    margin-right: 1vw

}

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



.images .line {
    margin-bottom: 14vw;
    margin-left: 2vw;
    margin-right: 2vw;
    display: flex
}

.images .line .img {
    cursor: pointer;
    position: relative;
    text-align: center;
    width: 47vw;
    height: 22vw;
    margin-right: 1vw

}

.images .line .img .img-wrap {
    height: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    background: #fff
}

.images .line .img .img-wrap:hover .desc {
    transform: translateY(0)
}

.images .line .img img {
    width: 100%;
    position: absolute;
    left: 0
}

.images .line .img .icon {
    display: none
}

.images .line .img .download {
    position: absolute;
    bottom: -46px;
    display: inline-block;
    background: rgba(255, 255, 255, .7);
    border-radius: 3px;
    padding: 8px 10px;
    color: #555;
    left: 50%;
    font-size: 14px;
    transform: translateX(-50%);
    box-shadow: .5px .5px 2px rgba(0, 0, 0, .1)
}

.images .line .img .video {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;
    background-image: url(./img/icon1.png);
    background-size: cover;
    z-index: 1000
}

.images .line .img .Carousel {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 30px;
    height: 30px;
    background-image: url(./img/icon2.png);
    #background-size: cover;
    background-size: 65px 65px;
    background-position: 0 0;
    z-index: 1000

}

<meta name="viewport" content="width=device-width, user-scalable=no">


<style>




</style>


</head>

<body>


<br><br>

<div id="myDiv" class="images">

<div class="line">
    <div class="img"><a class="img-wrap" href="https://awebsite.com/n/a" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/howto/img_snow.jpg" alt=""></a>                         <a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a></div>
<div class="img"><a class="img-wrap" href="https://awebsite.com/n/b" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/howto/img_forest.jpg" alt=""><div class="video"></div></a><a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a></div>
  <div class="img"><a class="img-wrap" href="https://awebsite.com/n/c" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/howto/img_mountains.jpg" alt=""><div class="video"></div></a><a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a></div>
</div>


<div class="line">
    <div class="img"><a class="img-wrap" href="https://awebsite.com/n/d" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/w3images/rocks.jpg" alt=""><div class="Carousel"></div></a><a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a></div>
<div class="img"><a class="img-wrap" href="https://awebsite.com/n/e" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/w3images/falls2.jpg" alt=""><div class="Carousel"></div></a><a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a></div>
  <div class="img"><a class="img-wrap" href="https://awebsite.com/n/f" target="_blank"><i class="icon"></i><img src="https://www.w3schools.com/w3images/paris.jpg" alt=""><div class="Carousel"></div></a><a class="download" href="https://" onclick="ma('a', 'b', 'c', 'd')" download="">Download</a></div>
</div>


</div>


</body>