This space Needs to be removed
Please help me to remove this space I need it to upload on my website I tried everything but it doesn't work. I first tried to change height of infra-col to 50% but it doesn't work. on inspecting on chrome the infra-col show that there is a whole block there please find me a way to remove the space or to make the size of that block small.
.row {
margin-top: 5%;
display: flex;
justify-content: space-between;
}
.infrastructure {
width: 80%;
margin: auto;
text-align: center;
padding-top: 50px;
}
.infra-col {
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
block-size: 400px;
}
.infra-col img {
width: 100%;
display: flex;
height: 60%;
}
.layer {
background: transparent;
height: 60%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
.layer:hover {
background: rgba(226, 0, 0, 0.7);
}
.layer h3 {
width: 100%;
font-weight: 500;
color: #fff;
font-size: 26px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
position: absolute;
opacity: 0;
transition: 0.5s;
}
.layer:hover h3 {
bottom: 50%;
opacity: 1;
}
<section >
<h1>Facilites We Provide</h1>
<p>We provide advanced machines, specialist doctors, nurses, and other paramedical professionals and developed pharmaceutical industries.</p>
<div >
<div >
<img src="images/Office_Photo.jpg">
<div >
<h3>Studio Office</h3>
</div>
</div>
<div >
<img src="images/Studio_Working.jpg">
<div >
<h3>Studio Photoshoot</h3>
</div>
</div>
<div >
<img src="images/Studio_Eqpupment.jpg">
<div >
<h3>Tansportation</h3>
</div>
</div>
</div>
</section>
CodePudding user response:
If I've guessed the problem right, you want to remove the white space after those flex items. Check your code:
.infra-col {
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
block-size: 400px;
}
In the code, you've added block-size: 400px
this is what is responsible for the white space. Remove it and check out if it fixes the problem for you.
CodePudding user response:
Add height to your row class
.row{
margin-top: 5%;
display: flex;
justify-content: space-between;
height:30vh
}