How can I remove this space from my html page-CodePudding

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
}