Skip to content Skip to sidebar Skip to footer
Home / Css / Html

How To Remove Extra White Space Between Div Rows And Make All Div Images Square Size?

Post a Comment
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 white sp

Solution 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: 2vw0;
  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;
}
<divid="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 --><divclass="line"><divclass="img"><aclass="img-wrap"href="https://awebsite.com/n/a"target="_blank"><iclass="icon"></i><imgsrc="https://www.w3schools.com/howto/img_snow.jpg"alt=""></a><aclass="download"href="https://"onclick="ma('a', 'b', 'c', 'd')"download="">Download</a></div><divclass="img"><aclass="img-wrap"href="https://awebsite.com/n/b"target="_blank"><iclass="icon"></i><imgsrc="https://www.w3schools.com/howto/img_forest.jpg"alt=""><divclass="video"></div></a><aclass="download"href="https://"onclick="ma('a', 'b', 'c', 'd')"download="">Download</a></div><divclass="img"><aclass="img-wrap"href="https://awebsite.com/n/c"target="_blank"><iclass="icon"></i><imgsrc="https://www.w3schools.com/howto/img_mountains.jpg"alt=""><divclass="video"></div></a><aclass="download"href="https://"onclick="ma('a', 'b', 'c', 'd')"download="">Download</a></div></div><divclass="line"><divclass="img"><aclass="img-wrap"href="https://awebsite.com/n/d"target="_blank"><iclass="icon"></i><imgsrc="https://www.w3schools.com/w3images/rocks.jpg"alt=""><divclass="Carousel"></div></a><aclass="download"href="https://"onclick="ma('a', 'b', 'c', 'd')"download="">Download</a></div><divclass="img"><aclass="img-wrap"href="https://awebsite.com/n/e"target="_blank"><iclass="icon"></i><imgsrc="https://www.w3schools.com/w3images/falls2.jpg"alt=""><divclass="Carousel"></div></a><aclass="download"href="https://"onclick="ma('a', 'b', 'c', 'd')"download="">Download</a></div><divclass="img"><aclass="img-wrap"href="https://awebsite.com/n/f"target="_blank"><iclass="icon"></i><imgsrc="https://www.w3schools.com/w3images/paris.jpg"alt=""><divclass="Carousel"></div></a><aclass="download"href="https://"onclick="ma('a', 'b', 'c', 'd')"download="">Download</a></div></div></div>

Useful Links:

Solution 2:

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.imgimg {
    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: 8px10px;
    color: #555;
    left: 50%;
    font-size: 14px;
    transform: translateX(-50%);
    box-shadow: .5px .5px2pxrgba(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: 65px65px;
    background-position: 00;
    z-index: 1000

}
<metaname="viewport"content="width=device-width, user-scalable=no"><style></style></head><body><br><br><divid="myDiv"class="images"><divclass="line"><divclass="img"><aclass="img-wrap"href="https://awebsite.com/n/a"target="_blank"><iclass="icon"></i><imgsrc="https://www.w3schools.com/howto/img_snow.jpg"alt=""></a><aclass="download"href="https://"onclick="ma('a', 'b', 'c', 'd')"download="">Download</a></div><divclass="img"><aclass="img-wrap"href="https://awebsite.com/n/b"target="_blank"><iclass="icon"></i><imgsrc="https://www.w3schools.com/howto/img_forest.jpg"alt=""><divclass="video"></div></a><aclass="download"href="https://"onclick="ma('a', 'b', 'c', 'd')"download="">Download</a></div><divclass="img"><aclass="img-wrap"href="https://awebsite.com/n/c"target="_blank"><iclass="icon"></i><imgsrc="https://www.w3schools.com/howto/img_mountains.jpg"alt=""><divclass="video"></div></a><aclass="download"href="https://"onclick="ma('a', 'b', 'c', 'd')"download="">Download</a></div></div><divclass="line"><divclass="img"><aclass="img-wrap"href="https://awebsite.com/n/d"target="_blank"><iclass="icon"></i><imgsrc="https://www.w3schools.com/w3images/rocks.jpg"alt=""><divclass="Carousel"></div></a><aclass="download"href="https://"onclick="ma('a', 'b', 'c', 'd')"download="">Download</a></div><divclass="img"><aclass="img-wrap"href="https://awebsite.com/n/e"target="_blank"><iclass="icon"></i><imgsrc="https://www.w3schools.com/w3images/falls2.jpg"alt=""><divclass="Carousel"></div></a><aclass="download"href="https://"onclick="ma('a', 'b', 'c', 'd')"download="">Download</a></div><divclass="img"><aclass="img-wrap"href="https://awebsite.com/n/f"target="_blank"><iclass="icon"></i><imgsrc="https://www.w3schools.com/w3images/paris.jpg"alt=""><divclass="Carousel"></div></a><aclass="download"href="https://"onclick="ma('a', 'b', 'c', 'd')"download="">Download</a></div></div></div></body>

Solution 3:

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

Post a Comment for "How To Remove Extra White Space Between Div Rows And Make All Div Images Square Size?"