Currently, I am engaged in a 180-day challenge to create webpages on . For website number 9, the task at hand is to showcase 8 images in a grid layout. Surprisingly, this layout appears flawlessly on my Mac when using Chrome but encounters issues displaying white space underneath the images on both my phone and Safari browser on Mac. How can I go about fixing this perplexing problem? An attached image provides a visual representation of the hiccup that needs addressing. Any assistance in resolving this matter would be immensely appreciated.
In implementing my design, I have incorporated CSS grid techniques and employed flexbox for achieving the desired grid arrangement of images.
Here is how the grid displays on my iPhone
Highlighted below is a segment of my HTML code:
<! 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>
This snippet showcases the corresponding CSS styling utilized in alignment with the HTML structure:
.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 {
}
}