How to vertically center caption over a Gallery image for SS 7.1?

Just getting into SquareSpace and I already have a question!

When captions are turned on in the Gallery block for 7.1, they appear below their corresponding images. Is there a way to have the caption appear over the image itself? My CSS is SUPER rusty, but I've included a sketch showing what I'm trying to do. Thanks in advance! 🙏

I think I figured it out. Again, super rusty w/ CSS, but here's what I did. Hope this helps!

/* Make sure to target your gallery. Each gallery has its own unique collection ID, which can be found via View Source. */

#collection-5f047ea7c17ab563ed1595c4{ 

  .gallery-grid-item {
      position: relative;
      display: inline-block;
  }

  .gallery-caption-wrapper {
    display: table;
    height: 100%;
  }

  /* Caption Container */
  figcaption.gallery-caption { 
    padding: 0;  
    position: absolute;
    z-index: 999;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 0%;
    width: 100%; 
    height: 100%;
   }

  .gallery-caption-content {
    display: table-cell;
    vertical-align: middle;
  }
}

Hi genelu. I can't see the gallery ID anywhere in the source - how do you find it?

above is Page Id. See how to find Page Id.

On 10/22/2020 at 3:53 AM, LarryAP said:

Hi genelu. I can't see the gallery ID anywhere in the source - how do you find it?

 

Thanks everybody - this is really helpful. Great community!

I hope I can build up some experience and start actually helping others too!!!

This code worked great. Combined with this code from @tuanphan to make the captions wider it was just what I needed.

figcaption.gallery-caption.gallery-caption-fullscreen-slideshow {
    max-width: 100%;
}

The only remaining issue is that there is now an empty div below the slideshow where the caption used to be. Is there a way to get rid of that so the slideshow is full screen again?

On 8/26/2022 at 10:40 PM, cchs said:

This code worked great. Combined with this code from @tuanphan to make the captions wider it was just what I needed.

figcaption.gallery-caption.gallery-caption-fullscreen-slideshow {
    max-width: 100%;
}

The only remaining issue is that there is now an empty div below the slideshow where the caption used to be. Is there a way to get rid of that so the slideshow is full screen again?

Can you share link to a page where you have problem?

https://noorbeautique.com/jesse

It's that brown band below the gallery image that I'm trying to eliminate. I think it's a vestige of the caption container...

Thanks!

On 9/3/2022 at 1:00 AM, cchs said:

https://noorbeautique.com/jesse

It's that brown band below the gallery image that I'm trying to eliminate. I think it's a vestige of the caption container...

 

Thanks!

Add to Design > Custom CSS

/* delete space */
[data-section-id="6308db39dc82c82529f74699"] div.gallery-fullscreen-slideshow {
    margin-bottom: 0px !important;
}