Move slideshow gallery meta caption below image

Site URL: https://alvin-dela-cruz.squarespace.com/portfolio

I've managed to get a slideshow gallery on my 7.1 site using the Chrome extension SquarespaceWebsites Tools. I've also managed to get the slideshow meta caption to sit below the image on desktop using the code below. However, I'm struggling to get it to show on mobile - I think there might be an overflow issue because the caption seems completely hidden.

The password for this site is "pearler"

Thanks!

.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta {
   bottom: -130px;
}


.sqs-gallery-block-slideshow img {
   top: 0 !important;
   height: 100% !important;
}

.sqs-gallery-controls .next, 
.sqs-gallery-controls .previous {
  color: #242424!important;
  background-color: rgba(0,0,0,0)!important;
}


.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta {
    background: none!important;
}

.sqs-gallery-block-slideshow .meta .meta-title {
  margin-top: 100px!important;
}

@tuanphan thanks so much! When I add the code, it works for a second, then disappears when the next slide shows. All images have a caption. You can see it here: https://share.getcloudapp.com/o0uvKRgK

I've managed to fix it completely, thanks @tuanphan 🙏

/* Push description to under slide */
.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta {
   bottom: -130px;
}

@media screen and (max-width:767px) {.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta {
   bottom: 10px;
  }}


.sqs-gallery-block-slideshow img {
   top: 0 !important;
   height: 100% !important;
}

.sqs-gallery-controls .next, 
.sqs-gallery-controls .previous {
  color: #242424!important;
  background-color: rgba(0,0,0,0)!important;
}

.sqs-gallery-block-slideshow .meta .meta-description, .sqs-gallery-block-slideshow .meta .meta-description p, .sqs-gallery-block-slideshow .meta .meta-title  {
  	color: #242424!important;
  	font-size: 1.4rem;
  	letter-spacing: 0px!important;
}

.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta {
	background: none!important;
}

.sqs-gallery-block-slideshow .meta .meta-title {
  margin-top: 100px!important;
}


@media screen and (max-width:767px) {
.sqs-gallery-block-slideshow .meta {
    display: block !important;
}
.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta {
     overflow: visible!important;
  }
}

@tuanphan are you able to help me a little more on this? It's looking good, except just a few the caption appears very far down compared to the others:

1. https://share.getcloudapp.com/YEupJzL0
2. https://share.getcloudapp.com/8Lu7l6X6

Thank you!

On 7/9/2020 at 10:49 AM, pearler1570048501 said:

@tuanphan are you able to help me a little more on this? It's looking good, except just a few the caption appears very far down compared to the others:

1. https://share.getcloudapp.com/YEupJzL0
2. https://share.getcloudapp.com/8Lu7l6X6

Thank you!

Have you solved it yet?

I'm having the same issue here. Is it possible to help me too? 

Video: https://www.loom.com/share/1f92431176b6489fad6824ac488dd78a

Website: https://polygon-duck-e926.squarespace.com/

Password: demo

On 5/18/2023 at 9:37 AM, AJY said:

I'm having the same issue here. Is it possible to help me too? 

Video: https://www.loom.com/share/1f92431176b6489fad6824ac488dd78a

Website: https://polygon-duck-e926.squarespace.com/

Password: demo

I see the page is long. Which slideshow are you referring to?