Hice una sección de imágenes de la galería usando el filtro de isótopos de la galería, pero las imágenes de la galería se desbordan en la sección de testimonios. He usado HTML y CSS simples pero no funciona. ¿Cómo puedo solucionar esto?

Esta es una galería de imágenes que utiliza el efecto isótopo y la sección inferior es una sección de testimonios con un carrusal. Por lo que he intentado, esto no funciona. Las imágenes de la galería se desbordan en las secciones de testimonios.

#gallery {
  padding: 40px 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.portfolio-menu {
  text-align: center;
  margin-bottom: 20px
}

.navigation a {
  display: inline-block;
  margin: 0;
  list-style: none;
  padding: 10px 15px;
  border: 1px solid #8cd2ed;
  cursor: pointer;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  text-decoration: none;
}

.navigation a:hover {
  background: #8cd2ed;
  color: #ffffff;
}

.portfolio-item {
  width: 100%;
}

.portfolio-item .item {
  float: left;
  margin-bottom: 15px;
  margin-right: 20px;
}

.harley {
  height: 268px;
  width: 350px;
}

li.active {
  background: #8cd2ed;
  color: #ffffff;
}

#testimonials {
  text-align: center;
  background-color: #b1e8ed;
  color: #fff;
}

#testimonials .carousel-item {
  padding: 7% 15%;
}

#testimonials .testimonials-image {
  width: 20%;
  border-radius: 100%;
  margin: 20px;
}

#press {
  background-color: #b1e8ed;
  text-align: center;
  padding-bottom: 3%;
}

.press-logo {
  width: 15%;
  margin: 20px 20px 50px;
}
<section id="gallery">
  <div class="container">
    <h1>Gallery</h1>
    <div class="portfolio-menu">
      <div class="navigation">
        <a href="#gallery" data-filter="all" class="button active">All</a>
        <a href="#gallery" data-filter="bike" class="button">Bike</a>
        <a href="#gallery" data-filter="engine" class="button">Engine</a>
        <a href="#gallery" data-filter="custom" class="button">Custom</a>
      </div>

    </div>
    <div class="portfolio-item">
      <div class="item engine">
        <img class="harley" src="img/gallery1.jpg">
      </div>
      <div class="item custom">
        <img class="harley" src="img/gallery2.jpg">
      </div>
      <div class="item custom">
        <img class="harley" src="img/gallery3.jpg">
      </div>
      <div class="item bike">
        <img class="harley" src="img/gallery4.jpg">
      </div>
      <div class="item engine">
        <img class="harley" src="img/gallery5.jpg">
      </div>
      <div class="item custom">
        <img class="harley" src="img/gallery6.jpg">
      </div>
      <div class="item bike">
        <img class="harley" src="img/gallery7.jpg">
      </div>
      <div class="item bike">
        <img class="harley" src="img/gallery8.jpg">
      </div>
      <div class="item engine">
        <img class="harley" src="img/gallery9.jpg">
      </div>
      <div class="item bike">
        <img class="harley" src="img/gallery10.jpg">
      </div>
    </div>
  </div>
</section>

<section id="testimonials">
  <div id="testimonials-carousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="hover">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <h2>This is the best bike shop i have ever encountered and love it.</h2>
        <img class="testimonials-image" src="img/testimonial1.jpg" alt="dog-profile">
        <em>Pebbles, New York</em>
      </div>
      <div class="carousel-item">
        <h2 class="testimonial-text">Best custom made bikes i have seen so far in the world and trust me i am a bike fanatic.</h2>
        <img class="testimonials-image" src="img/testimonial2.jpg" alt="lady-profile">
        <em>Beverly, Illinois</em>
      </div>
    </div>
    <a class="carousel-control-prev" href="#testimonials-carousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#testimonials-carousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>


</section>

<section id="press">
  <img class="press-logo" src="img/techcrunch.png" alt="tc-logo">
  <img class="press-logo" src="img/tnw.png" alt="tnw-logo">
  <img class="press-logo" src="img/bizinsider.png" alt="biz-insider-logo">
  <img class="press-logo" src="img/mashable.png" alt="mashable-logo">

</section>

El resultado esperado que debería tener es una sección diferente con la parte de carrusal y una sección diferente con la parte testimonial.

-1
kaunish roy 4 nov. 2019 a las 11:25

1 respuesta

Imágenes de la galería que se desbordan en la sección Testimonios debido a la altura. la altura se aplica a #gallery.

Debe eliminar la altura de #gallery. Una vez que se elimina la altura, las secciones de galería y testimonios se muestran como una sección diferente.

Gracias

0
Akshay Kothekar 4 nov. 2019 a las 12:44