Inline images

Hello,

You can apply flex to the parent of the thumbnails. Here is an example.

<div class="thumbnail-gallery">
  <a href="image1-large.jpg" class="colorbox" data-gallery="gallery">
    <img src="image1-thumb.jpg" alt="Thumbnail 1">
  </a>
  <a href="image2-large.jpg" class="colorbox" data-gallery="gallery">
    <img src="image2-thumb.jpg" alt="Thumbnail 2">
  </a>
  <a href="image3-large.jpg" class="colorbox" data-gallery="gallery">
    <img src="image3-thumb.jpg" alt="Thumbnail 3">
  </a>
  <a href="image4-large.jpg" class="colorbox" data-gallery="gallery">
    <img src="image4-thumb.jpg" alt="Thumbnail 4">
  </a>
</div>

.thumbnail-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* Space between thumbnails */
  justify-content: flex-start; /* Align thumbnails to the left */
}

.thumbnail-gallery a {
  display: inline-block;
  width: 100px;
  height: 100px;
  overflow: hidden; /* Ensure thumbnails don't overflow */
}

.thumbnail-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure images fit within the thumbnail dimensions */
  display: block;
}

Best wishes,
Alaa

Thanks for the help. In fact I had sketched out a similar solution, the one you propose is certainly more correct.
I congratulate you again on the theme and the set of paragraphs. I'm creating a very complex portal and this theme has saved me a lot of time

You're very welcome! I'm glad the solution aligns with what you had in mind and that the theme has been a time-saver for your project. Best of luck with your complex portal—sounds like an exciting challenge!

Automatically closed - issue fixed for 2 weeks with no activity.