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

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


genelu

Question

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! 🙏

IMG_1684.JPG

Link to comment

4 answers to this question

Recommended Posts

  • 0

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;
  }
}

 

Link to comment
  • 0

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?

 

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...