Я выполняю 180-дневный вызов веб-страницы на https://taniaswebpages.com,, и на веб-сайте 9 по некоторым причинам предполагается отображать 8 изображений в сетке.На моем Mac (Chrome) он работает отлично, но по какой-то причине на моем телефоне появляются изображения с пробелами внизу, а также Safari на Mac.Как я могу это исправить??Я приложил изображение, которое показывает проблему, с которой я имею дело.Если кто-то может помочь мне решить эту проблему, я был бы очень признателен.
Я использовал методы сетки CSS и flexbox для отображения моих изображений в сетке.
Отображение сетки на моем iphone
МОЙ HTML:
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="taniaWebsite7.css" type="text/css" rel="stylesheet" />
</head>
<body class="mainpage8">
<div class="containerr">
<h1 class="heading">New Zealand 2018 <span> Image Gallery</span></h1>
<div class="gallery">
<div class="gallery-item"><img class="gallery-image" src="1.png" alt="one" /></div>
<div class="gallery-item"><img class="gallery-image" src="2.png" alt="two" /></div>
<div class="gallery-item"><img class="gallery-image" src="3.png" alt="three" /></div>
<div class="gallery-item"><img class="gallery-image" src="4.png" alt="four" /></div>
<div class="gallery-item"><img class="gallery-image" src="5.png" alt="five" /></div>
<div class="gallery-item"><img class="gallery-image" src="6.png" alt="six" /></div>
<div class="gallery-item"><img class="gallery-image" src="7.png" alt="seven" /></div>
<div class="gallery-item"><img class="gallery-image" src="8.png" alt="eight" /></div>
</div>
</div>
</body>
</html>
CSS:
.heading {
font-family: oswald;
font-size: 4rem;
font-weight: 500;
line-height: 1.5;
text-align: center;
padding: 3.5rem 0;
color:lightblue;
}
.heading span {
display: block;
}
.gallery {
display: flex;
flex-wrap: wrap;
/* Compensate for excess margin on outer gallery flex items */
margin: -1rem -1rem;
}
.gallery-item {
flex: 1 0 24rem;
margin: 1rem;
box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.gallery-image {
display: block;
width: 100%;
height: 50%;
object-fit: cover;
transition: transform 400ms ease-out;
}
.gallery-image:hover {
transform: scale(1.15);
}
@supports (display: grid) {
.gallery {
grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
grid-gap: 2rem;
}
.gallery,
.gallery-item {
}
}