As I venture into the world of CSS/HTML coding, I am encountering a minor issue with a grid layout I designed. Despite not being visible in this snippet, there is a persistent white space appearing under the grid in the content management system (CMS) I utilize. This anomaly only arises when I integrate a specific code snippet. Please refer to the following code:
<style type="text/css>
.cardcontainer {
height: 125vh;
width: 100%;
display: flex;
justify-content: center;
}
.card {
grid-template-columns: repeat(3, 1fr);
align-items: center;
position: absolute;
display: grid;
gap: 0 50px;
padding: 100px;
}
.card .card-item {
position: relative;
}
.card img {
height: 250px;
width: 300px;
transition: 0.4s ease-in-out all;
}
.card .card-details {
position: absolute;
padding: 10px 5px;
bottom: 0px;
opacity: 0;
transition: 0.4s ease-in-out all;
}
.card-details h1 {
font-size: 18px;
color: white;
margin: 2px 0;
}
.card-details p {
font-size: 14px;
}
.card-item:hover .card-details {
opacity: 1;
bottom: 10px;
}
.card-item:hover img {
transform: scale(1.05);
}
@media(max-width:600px) {
.card {
grid-template-columns: 1fr;
gap: 0 10px;
}
</style><div class="cardcontainer">
<div class="card">
<div class="card-item"><img alt="" src="/content/Banana.png" style="width: 400px; height: 300px;" />
<div class="card-details">
<h1>Banana</h1>
</div>
</div>
<div class="card-item"><img alt="" src="/content/Apple.png" style="width: 400px; height: 300px;" />
<div class="card-details">
<h1>Apple</h1>
</div>
</div>
<div class="card-item"><img alt="" src="/content/Oranges.png" style="width: 400px; height: 300px;" />
<div class="card-details">
<h1>Oranges</h1>
</div>
</div>
</div>
</div>