Move Slideshow Gallery Caption Title and Description to the bottom of slideshow image

I'm currently working on https://julietmorrison.squarespace.com
Password: juliet

I'm trying to move the gray caption box DOWN to the bottom of the image (so her face is not covered.)

She does NOT want the caption in the bottom corner or top corner OR direct center. Only bottom center and I cannot find any code that will move the box down. Canm anyone help?

The problem is the gallery block is barely supported on v7.1. SS only brought it over because everyone complained when it wasn't on v7.1 originally.

It is quite frankly a bit broken.

One way to get the effect you want is to set the Title and Description to Bottom Left then add some CSS to center.

Add the following to Website > Website Tools > Custom CSS.

.sqs-gallery-block-slideshow.sqs-gallery-block-show-meta .sqs-active-slide .meta {

  left : 50% !important;
  transform : translateX( -50% );
  
  }

Let us know how it goes.

This worked perfectly but I cannot figure out how to fix it on mobile. Can you have a look for me? @creedon

Quote

I cannot figure out how to fix it on mobile.

I don't think there is a fix per se as SS by default hides the meta information on mobile. If I'm reading the code right. The reason they do that is there just isn't really much room to get much text there.

You could override the meta hiding. This is the code that hides meta on mobile.

@media only screen and (max-width: 480px) {
  .sqs-gallery-block-slideshow .meta {
    display:none !important
  }
}

Then you'd have to deal with trying to fit the text in somewhere.

I do not have a solution to the mobile issue.

Gallery descriptions are so frustrating! Thank you for helping by adding this code. I have the same issue, only I'm trying to show descriptions (w/links) using a grid.

I used your code provided about (for Slideshow), but the slideshow image is too wide, and the full description is not showing (and it's not intuitive for web users to know to scroll down in the description). 

GOAL: I'm designing a site for an insurance company. My client wants their customers to be able to click on the insurance carrier they have and then select the "file a claim" link or visit their "customer service" link (I've added both links in the description but cannot get the description to display). The only way the title AND description (w/ links) will display is by choosing "STACKED" which makes the page super long and hard to navigate; it now also works with SLIDESHOW--using your code--but the image is too wide and the full description doesn't show.

(1) Is there a way to have the title and description (w/ links) display in gallery block grid mode on desktop & mobile?

if not,

(2) is there a way to add more code to your above option that will reduce the image width and show the full description (on desktop and mobile)?

OR

(3) Is there a way to code the Stacked gallery block with thumbnail-size images and in rows (to basically emulate a grid with the addition of descriptions in desktop & mobile)?

www.meinberginsurance.com/partners

pass: insurance

Any insight or ideas on how to achieve this is greatly appreciated!