Home > Software engineering >  How can I remove this space from my html page
How can I remove this space from my html page

Time:08-15

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
}
  • Related