Gallery Trouble

TheBeeSpot
Tourist
8 1 1

I'm having trouble with a custom gallery I'm trying to put together. Admittedly been trying to mix and match bits of CSS I can find to fix the issue and while I'm getting... "better" results. The spacing of images still seems to be an issue. Ideally I'd have masonry tiling or mosaic tiling but I understand those get kind of crazy so block tiling that works without gaps like I have would be fine. Here is how it's turned out with the coding I have.

Screenshot 2020-12-09 at 11.59.10 AM.png

 

From my understanding my CSS should be limiting column numbers to 5 based screen width. I might have created conflicts though that I'm not seeing. The larger issue though are the gaps between images in columns 2, 5 and 8. Hopefully the solution is a two for one fix. Here's page code, the commented out parts are for a lightbox I can't get running but am looking to revisit and tinker with once I have the gallery up and running in some form first.

 

Click to expand...
<!DOCTYPE html>
<html>
<style>
* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
}

/* Center website */
.main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 4px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 2px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  flex: 25%;
  display: none; /* Hide all elements by default */
}


/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 1px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #F6B70A;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}
  
#photos {
  /* Prevent vertical gaps */
  line-height: 0;
   
  -webkit-column-count: 5;
  -webkit-column-gap:   0px;
  -moz-column-count:    5;
  -moz-column-gap:      0px;
  column-count:         5;
  column-gap:           0px;  
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}
  
@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}
  
<!--/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
-->
  
</style>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
  filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Show filtered elements
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

// Hide elements that are not selected
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
</script>

<script>
function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

for (var i = 0; i < 25; i++) {
  var width = getRandomSize(200, 400);
  var height =  getRandomSize(200, 400);
  $('#photos').append('<img src="//www.lorempixel.com/'+width+'/'+height+'/cats" alt="pretty kitty">');
}
</script>
  
  <!--  
<script>

  // Open the Modal
function openModal() {
  document.getElementById("myModal").style.display = "block";
}

// Close the Modal
function closeModal() {
  document.getElementById("myModal").style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
  
</script>
-->
  
</head>
<body>

<!-- MAIN (Center website) -->
<div class="main">
  <h1>Memories at The Bee Spot</h1>
<hr>
	<div id="myBtnContainer">
  		<button class="btn active" onclick="filterSelection('all')"> Show all</button>
  		<button class="btn" onclick="filterSelection('Nature')"> Nature</button>
  		<button class="btn" onclick="filterSelection('Weddings')"> Weddings</button>
  		<button class="btn" onclick="filterSelection('BeeTours')"> Bee Tours</button>
	</div>

<!-- Portfolio Gallery Grid -->
  <section id="photos">
  	<div class="column Weddings">
    	<div class="content">
      		<img src="https://cdn.shopify.com/s/files/1/2589/8858/files/Arbor2.png?v=1596235308" alt="Arbor" style="width:100%" class="hover-shadow">
    	</div>
  	</div>
  
  	<div class="column Weddings">
    	<div class="content">
      		<img src="https://cdn.shopify.com/s/files/1/2589/8858/files/bee_spot200715113222.jpg?v=1596224892" alt="ArborCloseUp" style="width:100%" class="hover-shadow">
    	</div>
  	</div>
  
  	<div class="column Weddings">
    	<div class="content">
      		<img src="https://cdn.shopify.com/s/files/1/2589/8858/files/Wagon_Wheel.png?v=1596153279" alt="Haybales" style="width:100%" class="hover-shadow">
    	</div>
  	</div>
  
  	<div class="column Weddings">
    	<div class="content">
      		<img src="https://cdn.shopify.com/s/files/1/2589/8858/files/20200723_153744.jpg?v=1595533131" alt="TammyField" style="width:100%" class="hover-shadow">
    	</div>
  	</div>
  
  	<div class="column Weddings">
    	<div class="content">
      		<img src="https://cdn.shopify.com/s/files/1/2589/8858/files/20200721_112234.jpg?v=1595345074" alt="TammyDionCloseup" style="width:100%" class="hover-shadow">
    	</div>
  	</div>
  
  	<div class="column Weddings">
    	<div class="content">
      		<img src="https://cdn.shopify.com/s/files/1/2589/8858/files/kelly_and_Ben_Sneak_peeks200926165634.jpeg?v=1607011685" alt="BenKellyDance" style="width:100%" class="hover-shadow">
    	</div>
  	</div>
  
  	<div class="column Weddings">
    	<div class="content">
      		<img src="https://cdn.shopify.com/s/files/1/2589/8858/files/IMG_20200929_171633_015.jpg?v=1607011884" alt="BenKellyWalk" style="width:100%" class="hover-shadow">
    	</div>
  	</div>
  
  	<div class="column Weddings">
    	<div class="content">
      		<img src="https://cdn.shopify.com/s/files/1/2589/8858/files/kelly_and_Ben_Sneak_peeks200926173131.jpeg?v=1607011886" alt="BenKellyPiano" style="width:100%" class="hover-shadow">
    	</div>
  	</div>
  
  	<div class="column Weddings">
    	<div class="content">
      		<img src="https://cdn.shopify.com/s/files/1/2589/8858/files/IMG_20200930_172515_842.jpg?v=1607012215" alt="BrandonLaurelHug" style="width:100%" class="hover-shadow">
    	</div>
  	</div>
  
  	<div class="column Weddings">
    	<div class="content">
      		<img src="https://cdn.shopify.com/s/files/1/2589/8858/files/laurel_Brandon_sneak_peeks200927133751.jpeg?v=1607012223" alt="BrandonLaurelSit" style="width:100%" class="hover-shadow">
    	</div>
  	</div>
  
  	<div class="column Weddings">
    	<div class="content">
      		<img src="https://cdn.shopify.com/s/files/1/2589/8858/files/laurel_Brandon_sneak_peeks200927130315.jpeg?v=1607012218" alt="BrandonSon" style="width:100%" class="hover-shadow">
    	</div>
  	</div>
  
  	<div class="column Nature">
    	<div class="content">
    		<img src="https://cdn.shopify.com/s/files/1/2589/8858/files/20190813_101842.jpg?v=1606927615" alt="FlowerField1" style="width:100%">
    	</div>
  	</div>
  
  	<div class="column Nature">
    	<div class="content">
    		<img src="https://cdn.shopify.com/s/files/1/2589/8858/files/73460625_2417882211801693_5366086076098150400_n.jpg?v=1606927815" alt="FlowerField2" style="width:100%">
    	</div>
  	</div>

  	<div class="column Nature">
    	<div class="content">
    		<img src="https://cdn.shopify.com/s/files/1/2589/8858/files/Oct13.jpg?v=1603736591" alt="AutumnArbor" style="width:100%">
    	</div>
  	</div>
  
  	<div class="column Nature">
    	<div class="content">
    		<img src="https://cdn.shopify.com/s/files/1/2589/8858/files/65270802_2265790173673898_7143455843692838912_n_187aa0dc-7381-45d2-b28b-0e6493b47fe1.jpg?v=1582050175" alt="Pollinating" style="width:100%">
    	</div>
  	</div>
  
  	<div class="column Nature">
    	<div class="content">
    		<img src="https://cdn.shopify.com/s/files/1/2589/8858/files/IMG_0212_1.jpg?v=1603827209" alt="FieldShade" style="width:100%">
    	</div>
  	</div>
  
  	<div class="column BeeTours">
    	<div class="content">
      		<img src="https://cdn.shopify.com/s/files/1/2589/8858/files/DSC02624.JPG?v=1561044031" alt="HoneyFrame" style="width:100%">
    	</div>
  	</div>
  
  	<div class="column BeeTours">
    	<div class="content">
      		<img src="https://cdn.shopify.com/s/files/1/2589/8858/files/20190826_101223.jpg?v=1568925719" alt="TourGroup" style="width:100%">
    	</div>
  	</div>
  </section>
</div>
<!-- END GRID -->

<!--
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="https://cdn.shopify.com/s/files/1/2589/8858/files/Arbor2.png?v=1596235308" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="https://cdn.shopify.com/s/files/1/2589/8858/files/bee_spot200715113222.jpg?v=1596224892" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="img3_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="img4_wide.jpg" style="width:100%">
    </div>
-->

    <!-- Next/previous controls 
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <!-- Caption text 
    <div class="caption-container">
      <p id="caption"></p>
    </div>

    <!-- Thumbnail image controls 
    <div class="column">
      <img class="demo" src="https://cdn.shopify.com/s/files/1/2589/8858/files/Arbor2.png?v=1596235308" onclick="currentSlide(1)" alt="Nature">
    </div>

    <div class="column">
      <img class="demo" src="img2.jpg" onclick="currentSlide(2)" alt="Snow">
    </div>

    <div class="column">
      <img class="demo" src="img3.jpg" onclick="currentSlide(3)" alt="Mountains">
    </div>

    <div class="column">
      <img class="demo" src="img4.jpg" onclick="currentSlide(4)" alt="Lights">
    </div>

  </div>
</div>
  
<!-- END MAIN -->
</div>

</body>
</html>
0 Likes