CODEWITHSUNDEEP
squarespace
kmoser
kmoser

Reputation: 9308

Center captions vertically and horizontally over Squarespace gallery items

My Squarespace site has a gallery with images and captions. By default the captions appear below the image. I want the captions to appear floating on top of the images (centered horizontally and vertically in the middle of the images), but Squarespace doesn't have a way to edit the position of the captions.

Upvotes: 0

Views: 11

Answers (1)

kmoser
kmoser

Reputation: 9308

I added custom CSS that overrides the Squarespace gallery defaults. figure.gallery-fullscreen-slideshow-item is the container for each slideshow item, so that needs to be display: flex. Its two flex items (children) are .gallery-fullscreen-slideshow-item-wrapper (the image) and figcaption.gallery-caption-fullscreen-slideshow (the caption). Finally, .gallery-caption-content is the container for the actual caption.

I also had to make most of the CSS rules !important so they would override Squarespace's defaults.

figure.gallery-fullscreen-slideshow-item {
  display: flex !important;
  position: relative !important; /* Make this the containing block for absolute positioning */
  height: 100% !important;
}

.gallery-fullscreen-slideshow-item-wrapper {
  position: relative !important; /* Necessary for the child to be positioned inside it */
  flex: 1 !important;
  align-items: center !important;
}

figcaption.gallery-caption-fullscreen-slideshow {
  position: absolute !important;
  top: 50% !important; /* Center vertically within the parent */
  left: 50% !important; /* Center horizontally within the parent */
  transform: translate(-50%, -50%) !important; /* Move the caption back by 50% of its own width and height */
  width: 100% !important;
  max-width: 90% !important;
  text-align: center !important;
  height: 50% !important;
}

.gallery-caption-content {
  font-family: Sansita !important;
  font-size: 54px !important;
  font-weight: bold !important;
  line-height: 56px !important;
  color: white !important;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5) !important;
}

Upvotes: 0

Related Questions