J'ai créé une section d'images de galerie en utilisant le filtre d'isotopes de la galerie, mais les images de la galerie débordent dans la section des témoignages. J'ai utilisé du HTML et du CSS simples mais cela ne fonctionne pas. Comment résoudre ce problème?

Il s'agit d'une galerie d'images utilisant l'effet isotope et la section inférieure est une section de témoignages avec un carrousal. Pour autant que j'ai essayé, cela ne fonctionne pas. Les images de la galerie débordent dans les sections témoignages.

#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>

Le résultat attendu que je devrais avoir est une section différente avec la partie carrousal et une section différente avec la partie témoignage.

-1
kaunish roy 4 nov. 2019 à 11:25

1 réponse

Images de la galerie débordant dans la section Témoignage en raison de la hauteur. la hauteur est appliquée à #gallery.

Vous devez supprimer la hauteur de #gallery. Une fois la hauteur supprimée, la galerie et les sections de témoignage s'affichent comme une section différente.

Merci,

0
Akshay Kothekar 4 nov. 2019 à 12:44