Remove space in gallery block

I have created a gallery block for a filterable gallery for logos. There are 8 categories and when the user clicks on a button it shows a set of logos pertaining that industry. Art and Technology, Beauty, Fashion etc..

The issue is that when the page loads, even though only the filtered logos are shown, the space for all logos is still being accounted for in the layout, leading to excessive negative space. To address this, you need to ensure that the container adjusts its height dynamically based on the visible content. Here's how you can achieve this: Ensure only visible logos affect the container height. Hide non-visible logos properly so they don't take up space.

the css i have added is this:
 

/* General Styles */
.gallery-section {
  position: relative;
  z-index: 1;
}

.title {
  font-size: 46px;
  font-weight: 700;
  font-family: "Playfair Display", serif;
  color: #f44336;
}

.filter {
  text-align: center;
  max-width: 1050px;
  margin: auto;
}

.abc {
  display: none !important;
}

.btn {
  padding: 10px 12px;
  margin: 5px 8px;
  display: inline-block;
  color: #003;
  background: #FFF;
  border: white;
  transition: all 0.4s;
  font-size: 13px;
  font-weight: 300;
  text-decoration: none;
  position: relative;
}

.btn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: 0;
  left: 0;
  background-color: #e0fef4;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.btn:hover::after,
.btn-active::after {
  transform: scaleX(1);
}

/* Gallery Styles */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 50px auto;
  max-width: 1200px;
  overflow: hidden; /* Hide overflow to prevent extra space */
}

.gallery a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px;
}

.gallery img {
  max-width: 250px;
  max-height: 200px;
  object-fit: contain;
  transition: transform 0.3s ease-in-out;
  border-radius: 12px;
}

.gallery img:hover {
  transform: scale(1.05);
}

.sets .hide,
.sets .pophide {
  display: none; /* Hide non-visible logos */
}

/* Modal Styles */
.closeBtn {
  position: absolute;
  font-size: 22px;
  font-weight: 500;
  right: 25px;
  top: 25px;
  color: white;
  transition: 0.5s linear;
  padding: 8px 40px;
  border-radius: 25px;
  background: red;
  outline-offset: -6px;
  outline: 2px solid #fff;
}

.closeBtn:hover {
  cursor: pointer;
  background: white;
  color: black;
  outline: 2px solid #000;
}

.openDiv {
  width: 100%;
  height: 100vh;
  background: #000000e7;
  position: fixed;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  left: 0;
  z-index: 9999;
}

.imgPreview {
  width: 70%;
  object-fit: scale-down;
  max-height: 40vw;
  height: auto;
}

.prevButton,
.nextButton {
  transition: 1s linear;
  padding: 10px 35px;
  font-size: 18px;
  border: none;
  color: white;
  background: #0005;
  border-radius: 10px;
  border: 1px solid white;
  margin: 10px;
}

.prevButton:hover,
.nextButton:hover {
  background: #fff;
  color: black;
}

the code injection code i have added is this:
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Function to filter logos
    function filterLogos(filter) {
      let logos = document.querySelectorAll('.sets a');
      logos.forEach(function(logo) {
        if (logo.classList.contains(filter)) {
          logo.style.display = 'block';
        } else {
          logo.style.display = 'none';
        }
      });
    }

    // Initially show Art logos
    filterLogos('Art');

    // Add event listeners to filter buttons
    let filterButtons = document.querySelectorAll('.filter a');
    filterButtons.forEach(function(button) {
      button.addEventListener('click', function(e) {
        e.preventDefault();
        let filter = button.getAttribute('href').substring(1);
        filterLogos(filter);
        // Add active class to the clicked button
        filterButtons.forEach(function(btn) {
          btn.classList.remove('btn-active');
        });
        button.classList.add('btn-active');
      });
    });

    // Image preview functionality
    let imgs = document.querySelectorAll('.sets a img');
    let count;
    imgs.forEach((img, index) => {
      img.addEventListener('click', function(e) {
        if (e.target == this) {
          count = index;
          let openDiv = document.createElement('div');
          let imgPreview = document.createElement('img');
          let butonsSection = document.createElement('div');
          butonsSection.classList.add('butonsSection');
          let closeBtn = document.createElement('button');
          let nextBtn = document.createElement('button');
          let prevButton = document.createElement('button');
          prevButton.innerText = 'Previous';
          nextBtn.innerText = 'Next';

          nextBtn.classList.add('nextButton');
          prevButton.classList.add('prevButton');
          nextBtn.addEventListener('click', function() {
            if (count >= imgs.length - 1) {
              count = 0;
            } else {
              count++;
            }
            imgPreview.src = imgs[count].src;
          });

          prevButton.addEventListener('click', function() {
            if (count === 0) {
              count = imgs.length - 1;
            } else {
              count--;
            }
            imgPreview.src = imgs[count].src;
          });

          closeBtn.classList.add('closeBtn');
          closeBtn.innerText = 'Close';
          closeBtn.addEventListener('click', function() {
            openDiv.remove();
          });

          imgPreview.classList.add('imgPreview');
          imgPreview.src = this.src;

          butonsSection.append(prevButton, nextBtn);
          openDiv.append(imgPreview, butonsSection, closeBtn);

          openDiv.classList.add('openDiv');
          document.querySelector('body').append(openDiv);
        }
      });
    });
  });
</script>

please help!

8 minutes ago, shreyakothari1234 said:

I have created a gallery block for a filterable gallery for logos. There are 8 categories and when the user clicks on a button it shows a set of logos pertaining that industry. Art and Technology, Beauty, Fashion etc..

 

The issue is that when the page loads, even though only the filtered logos are shown, the space for all logos is still being accounted for in the layout, leading to excessive negative space. To address this, you need to ensure that the container adjusts its height dynamically based on the visible content. Here's how you can achieve this: Ensure only visible logos affect the container height. Hide non-visible logos properly so they don't take up space.

 

the css i have added is this:
 

/* General Styles */
.gallery-section {
  position: relative;
  z-index: 1;
}

.title {
  font-size: 46px;
  font-weight: 700;
  font-family: "Playfair Display", serif;
  color: #f44336;
}

.filter {
  text-align: center;
  max-width: 1050px;
  margin: auto;
}

.abc {
  display: none !important;
}

.btn {
  padding: 10px 12px;
  margin: 5px 8px;
  display: inline-block;
  color: #003;
  background: #FFF;
  border: white;
  transition: all 0.4s;
  font-size: 13px;
  font-weight: 300;
  text-decoration: none;
  position: relative;
}

.btn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: 0;
  left: 0;
  background-color: #e0fef4;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.btn:hover::after,
.btn-active::after {
  transform: scaleX(1);
}

/* Gallery Styles */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 50px auto;
  max-width: 1200px;
  overflow: hidden; /* Hide overflow to prevent extra space */
}

.gallery a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px;
}

.gallery img {
  max-width: 250px;
  max-height: 200px;
  object-fit: contain;
  transition: transform 0.3s ease-in-out;
  border-radius: 12px;
}

.gallery img:hover {
  transform: scale(1.05);
}

.sets .hide,
.sets .pophide {
  display: none; /* Hide non-visible logos */
}

/* Modal Styles */
.closeBtn {
  position: absolute;
  font-size: 22px;
  font-weight: 500;
  right: 25px;
  top: 25px;
  color: white;
  transition: 0.5s linear;
  padding: 8px 40px;
  border-radius: 25px;
  background: red;
  outline-offset: -6px;
  outline: 2px solid #fff;
}

.closeBtn:hover {
  cursor: pointer;
  background: white;
  color: black;
  outline: 2px solid #000;
}

.openDiv {
  width: 100%;
  height: 100vh;
  background: #000000e7;
  position: fixed;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  left: 0;
  z-index: 9999;
}

.imgPreview {
  width: 70%;
  object-fit: scale-down;
  max-height: 40vw;
  height: auto;
}

.prevButton,
.nextButton {
  transition: 1s linear;
  padding: 10px 35px;
  font-size: 18px;
  border: none;
  color: white;
  background: #0005;
  border-radius: 10px;
  border: 1px solid white;
  margin: 10px;
}

.prevButton:hover,
.nextButton:hover {
  background: #fff;
  color: black;
}

the code injection code i have added is this:
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Function to filter logos
    function filterLogos(filter) {
      let logos = document.querySelectorAll('.sets a');
      logos.forEach(function(logo) {
        if (logo.classList.contains(filter)) {
          logo.style.display = 'block';
        } else {
          logo.style.display = 'none';
        }
      });
    }

    // Initially show Art logos
    filterLogos('Art');

    // Add event listeners to filter buttons
    let filterButtons = document.querySelectorAll('.filter a');
    filterButtons.forEach(function(button) {
      button.addEventListener('click', function(e) {
        e.preventDefault();
        let filter = button.getAttribute('href').substring(1);
        filterLogos(filter);
        // Add active class to the clicked button
        filterButtons.forEach(function(btn) {
          btn.classList.remove('btn-active');
        });
        button.classList.add('btn-active');
      });
    });

    // Image preview functionality
    let imgs = document.querySelectorAll('.sets a img');
    let count;
    imgs.forEach((img, index) => {
      img.addEventListener('click', function(e) {
        if (e.target == this) {
          count = index;
          let openDiv = document.createElement('div');
          let imgPreview = document.createElement('img');
          let butonsSection = document.createElement('div');
          butonsSection.classList.add('butonsSection');
          let closeBtn = document.createElement('button');
          let nextBtn = document.createElement('button');
          let prevButton = document.createElement('button');
          prevButton.innerText = 'Previous';
          nextBtn.innerText = 'Next';

          nextBtn.classList.add('nextButton');
          prevButton.classList.add('prevButton');
          nextBtn.addEventListener('click', function() {
            if (count >= imgs.length - 1) {
              count = 0;
            } else {
              count++;
            }
            imgPreview.src = imgs[count].src;
          });

          prevButton.addEventListener('click', function() {
            if (count === 0) {
              count = imgs.length - 1;
            } else {
              count--;
            }
            imgPreview.src = imgs[count].src;
          });

          closeBtn.classList.add('closeBtn');
          closeBtn.innerText = 'Close';
          closeBtn.addEventListener('click', function() {
            openDiv.remove();
          });

          imgPreview.classList.add('imgPreview');
          imgPreview.src = this.src;

          butonsSection.append(prevButton, nextBtn);
          openDiv.append(imgPreview, butonsSection, closeBtn);

          openDiv.classList.add('openDiv');
          document.querySelector('body').append(openDiv);
        }
      });
    });
  });
</script>

please help!

Can you share your URL so we can take a look?

http://banjo-rhino-35g9.squarespace.com
 

Password 123