title: FancyBoxapp + Carousel - Having problem in responsiveness and increasing images
body: <p>I am using Fancyboxapp + Carousel for gallery portfolio. I wanted it adjust the height and responsiveness + add many images in this columns which I couldn't achieve. Have a look in the image <a href="https://i.stack.imgur.com/n5b7n.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n5b7n.jpg" alt="here" /></a></p>
  <p>Here is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const mainCarousel = new Carousel(document.querySelector("#mainCarousel"), {
    infinite: false,
    Navigation: false,
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.carousel__slide {
      width: 100%;
  }
  .cpad{
  margin-bottom: 80px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;div class="carousel cpad mx-auto" id="mainCarousel"&gt;
  
          &lt;div class="carousel__slide"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-6"&gt;
                      &lt;a href="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/1b.png" data-fancybox="gallery"&gt;
                          &lt;img src="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/1.png" /&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-6"&gt;
                      &lt;a href="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/2b.png" data-fancybox="gallery"&gt;
                          &lt;img src="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/2.png" /&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-6"&gt;
                      &lt;a href="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/3b.png" data-fancybox="gallery"&gt;
                          &lt;img src="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/3.png" /&gt;
                      &lt;/a&gt;
  
                  &lt;/div&gt;
                  &lt;div class="col-sm-6"&gt;
                      &lt;a href="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/4b.png" data-fancybox="gallery"&gt;
                          &lt;img src="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/4.png" /&gt;
                      &lt;/a&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-6"&gt;
                      &lt;a href="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/5b.png" data-fancybox="gallery"&gt;
                          &lt;img src="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/5.png" /&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-6"&gt;
                      &lt;a href="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/6b.png" data-fancybox="gallery"&gt;
                          &lt;img src="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/6.png" /&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-6"&gt;
                      &lt;a href="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/7b.png" data-fancybox="gallery"&gt;
                          &lt;img src="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/7.png" /&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-6"&gt;
                      &lt;a href="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/8b.png" data-fancybox="gallery"&gt;
                          &lt;img src="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/8.png" /&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
  
          &lt;div class="carousel__slide"&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-6"&gt;
                      &lt;a href="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/5b.png" data-fancybox="gallery"&gt;
                          &lt;img src="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/5.png" /&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-6"&gt;
                      &lt;a href="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/6b.png" data-fancybox="gallery"&gt;
                          &lt;img src="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/6.png" /&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-6"&gt;
                      &lt;a href="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/7b.png" data-fancybox="gallery"&gt;
                          &lt;img src="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/7.png" /&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-6"&gt;
                      &lt;a href="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/8b.png" data-fancybox="gallery"&gt;
                          &lt;img src="&lt;?php echo BASE_URL; ?&gt;/assets/img/portfolio/website/8.png" /&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>