Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Gallery Captions & Padding between Images?


Site URL: https://smilodon-ocelot-my5f.squarespace.com/lost-america

Thanks to users on this forum, I've added gallery captions UNDER my galley images.

However, when scaling the site, the images can cover the caption above them.

Is there code to prevent this - maybe it needs percentage padding below the captions to override Squarespace's gallery settings?

passcode: trythis












Share this post

Link to post

6 answers to this question

Recommended Posts

  • 1

You can try adding the JavaScript code below which adjusts the height of the image containers to account for the caption height. Here's a video that shows a before and after when executing the code below:



(function (document) {
  var timeout;

  if (document.readyState === 'loading') {
    window.addEventListener('DOMContentLoaded', init);
  } else {

  function init() {

    setTimeout(function () {
    }, 100);

    window.addEventListener('resize', function () {
      // If there's a timer, cancel it
      if (timeout) window.cancelAnimationFrame(timeout);

      // Setup the new requestAnimationFrame()
      timeout = window.requestAnimationFrame(handleMasonryItemsCaptions);

  function handleMasonryItemsCaptions() {
    var galleries = document.querySelectorAll('.gallery-masonry');

    if (!galleries) return;

    if (isDesktop()) {
      document.querySelectorAll('.gallery-masonry-item').forEach(function (item) {
        item.style.height = '';

    galleries.forEach(function (gallery) {

      var items = gallery.querySelectorAll('.gallery-masonry-item');

      items.forEach(function (item) {
        var height = 0;
        var wrapper = item.querySelector('.gallery-masonry-item-wrapper');
        var caption = item.querySelector('.gallery-caption');

        if (wrapper) {
          height += wrapper.offsetHeight;

        if (caption) {
          caption.style.paddingBottom = 0 + 'px';
          height += caption.offsetHeight;

        item.style.height = height + 'px';

  function triggerResizeEvent() {
    var event;
    if (typeof (Event) === 'function') {
      event = new Event('resize');
    } else { /*IE*/
      event = document.createEvent('Event');
      event.initEvent('resize', true, true);

  function isDesktop() {
    return window.matchMedia('(min-width: 1024px)').matches;

  function addNodeListForEachPolyfill() {
    if (window.NodeList && !NodeList.prototype.forEach) {
      NodeList.prototype.forEach = Array.prototype.forEach;


Be sure the code above is between <script> tags, example:

  // Add JS code here


Share this post

Link to post
  • 0



I think it's best to use individual images instead of a gallery to get around this. It's a pain, but it's the only guarantee the captions work across all media sizes when it's scaled.

Share this post

Link to post
  • 0
@media screen and (max-width: 767px){
	.gallery-grid--layout-grid .gallery-grid-wrapper {
		grid-row-gap: 3vw !important;
Add this at the very bottom of the custom CSS.

Share this post

Link to post
  • 0



It doesn't work. Thanks anyway though!

I've rebuilt one page already with seperate images instead of a Gallery. It's a pain and I can't understand why Squarespace don't provide captions to galleries in 7.1.



Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...