I am creating a section of a page where I have to fetch the Movie Details and fill into these cards as user types but I encountered a problem, Where this section isn't covering the whole height space available.
Any Help on how to resolve this would be greatly appreciated.
The Code
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="blac-cont">
<div class="inpt"><input type="text" id="tx" placeholder="Enter Keyword to search">
<span class="cls-overly" id="clovr"><i class="fa-regular fa-circle-xmark"></i></span>
</div>
<div class="crdmn">
<div class="crds">
<div class="hvractv">
<span class="txtp">
Movie
</span>
<span class="txdtl">
<span class="txmn flwr">
All Quiet Among the Western Front
</span>
<span class="txsesn">
<i class="fas fa-circle"></i>
2005
</span>
<span class="txdur">
<i class="fas fa-circle"></i>
225min
</span>
</span>
<span class="icna">
<a href="https://google.com">
<i class="fas fa-play"></i>
</a>
</span>
</div>
</div>
<div class="crds">
<div class="hvractv">
<span class="txtp">
Movie
</span>
<span class="txdtl">
<span class="txmn flwr">
All Quiet Among the Western Front
</span>
<span class="txsesn">
<i class="fas fa-circle"></i>
2005
</span>
<span class="txdur">
<i class="fas fa-circle"></i>
225min
</span>
</span>
<span class="icna">
<a href="https://google.com">
<i class="fas fa-play"></i>
</a>
</span>
</div>
</div>
<div class="crds">
<div class="hvractv">
<span class="txtp">
Movie
</span>
<span class="txdtl">
<span class="txmn flwr">
All Quiet Among the Western Front
</span>
<span class="txsesn">
<i class="fas fa-circle"></i>
2005
</span>
<span class="txdur">
<i class="fas fa-circle"></i>
225min
</span>
</span>
<span class="icna">
<a href="https://google.com">
<i class="fas fa-play"></i>
</a>
</span>
</div>
</div>
<div class="crds">
<div class="hvractv">
<span class="txtp">
Movie
</span>
<span class="txdtl">
<span class="txmn flwr">
All Quiet Among the Western Front
</span>
<span class="txsesn">
<i class="fas fa-circle"></i>
2005
</span>
<span class="txdur">
<i class="fas fa-circle"></i>
225min
</span>
</span>
<span class="icna">
<a href="https://google.com">
<i class="fas fa-play"></i>
</a>
</span>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
background-color: #3fa885;
font-family: Arial, sans-serif;
overflow-x: hidden;
}
.blac-cont {
display: flex;
flex-wrap: wrap;
flex-direction: row;
background-color: black;
width: 100%;
height: 100%;
padding: 18px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: 10;
}
.inpt {
display: flex;
margin: 12px 13px auto;
gap: 12px;
width: 95%;
height: 11%;
}
#tx {
display: flex;
flex-grow: 0.97;
border: none;
outline: none;
caret-color: white;
font-size: 18px;
color: white;
border-bottom: 2px solid #c1c1c1;
background-color: transparent;
padding: 10px;
}
.cls-overly{
display: flex;
background: #fff;
padding: 10px;
border-radius: 49%;
font-size: 1.6rem;
height: max-content;
cursor: pointer;
}
.crdmn {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 5px;
width: 89%;
height: 98%;
gap: 10px;
}
.crds {
overflow: hidden;
position: relative;
margin: 10px auto;
cursor: pointer;
background: url("https://image.tmdb.org/t/p/w300//2IRjbi9cADuDMKmHdLK7LaqQDKA.jpg");
background-size: 101% 100%;
background-repeat: no-repeat;
border-radius: 12px;
box-shadow: rgba(0, 0, 0, 0.5) 1px 25px 44px,
rgba(0, 0, 0, 0.29) 1px 19px 16px;
padding: 10px;
width: 14.85rem;
height: 46.15vh;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between;
}
.hvractv {
overflow: hidden;
background: blue;
border-radius: 12px;
position: absolute;
left: 0;
right: 0;
width: 100%;
display: none;
justify-content: space-between;
flex-direction: column;
height: 100%;
}
.crds:hover .hvractv {
animation: bottom 1.3s ease-in forwards;
display: flex;
}
@keyframes bottom {
from {
bottom: -85%;
opacity: 0;
}
to {
bottom: 0%;
opacity: 1;
}
}
.txtp {
padding: 6px;
border: 2px solid #050;
width: max-content;
border-radius: 10px;
margin: 3px auto;
font-size: 16px;
background-color: black;
color: white;
}
.txdtl {
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 7px;
width: 96%;
margin: 1px auto;
background: rgba(92, 168, 126, 0.23);
border-radius: 12px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(8.2px);
-webkit-backdrop-filter: blur(8.2px);
border: 1px solid rgba(92, 168, 126, 0.33);
justify-content: space-between;
}
.txmn {
margin: 2px auto;
overflow-wrap: break-word;
text-align: center;
font-size: 18px;
font-style: italic;
font-weight: bold;
}
.txmn:hover {
transform: scale(1.01) translateY(-0.5px);
}
.txsesn {
font-size: 16px;
margin: 5px auto;
font-weight: bold;
text-align: center;
}
.txsesn:hover {
transform: scale(1.1) translateY(-1px);
}
.txdur {
font-size: 16px;
margin: 6px auto;
text-align: center;
font-weight: bold;
}
.txdur:hover {
transform: scale(1.1) translateY(-1px);
}
.icna {
margin: 47px auto;
border-radius: 50%;
background-color: #ffe300;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-wrap: wrap;
width: 44px;
height: 44px;
box-shadow: rgba(0, 0, 0, 0.5) 1px 25px 44px,
rgba(0, 0, 0, 0.29) 1px 19px 16px;
}
.icna:hover {
transform: scale(1.1) translateY(-1px);
}
.flwr {
display: flex;
flex-wrap: wrap;
}
.fa-circle {
text-align: center;
font-size: 6.2px !important;
color: black !important;
}
What I have tried:
As You can see cards don't seamlessly integrate with the rest of the space available in the div. I've tried adjusting various CSS properties, but I'm unable to pinpoint the exact issue.
Submit an article or tip