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