I have created a card with an image and some content, but there seems to be unwanted space between the two elements. How can I remove this space so it looks consistent across all devices?
Here is the HTML code:
<div class="project-card hidden" id="modal1">
<div class="overlay">
<img src="https://cnet1.cbsistatic.com/img/93uMH3e8dHhNEucNfioED7-TvAU=/2018/07/31/abf6d5b3-96ef-489f-b223-26a4cb70e568/img-7041.png" alt="Project1 Picture">
<div class="overlay-content">
<h2>Game</h2>
<p>Lorem</p>
</div>
</div>
</div>
And here is the CSS code:
.project-card{
width: 40%;
position: relative;
position: fixed;
top: 15%;
left: 10%;
z-index: 1;
}
.overlay{
width: 100%;
height: auto;
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 1.2);
/* background-color: royalblue; */
img{
width: 100%;
height: 180px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
}
.overlay-content{
background-color: #37393d;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
padding-left: 15px;
padding-top: 10px;
padding-right: 15px;
font-family: 'Roboto', sans-serif;
h2{
color: #ffde59;
font-size: 1.3em;
padding-top: 10px;
margin-bottom: 20px;
}
p{
color: #fff;
padding-bottom: 20px;
}
}
You can view a visual representation on CodePen.
Any assistance in resolving this issue would be greatly appreciated.