The captions in gallery/slideshow are cut off on mobile

Site URL: https://www.begincollective.com/isysm/danielamartinez

Hi, I am using Squarespace 7.1, and just realized that the captions for my slideshow are cut off. I've Googled this issue and have tried out a few different CSS codes that others have supplied to folks with the same problem. I've tried installing them both on the header of the page and the Custom CSS section, and neither have worked. How can I fix this? Thank You!

19 hours ago, bsturc said:

Site URL: https://www.begincollective.com/isysm/danielamartinez

Hi, I am using Squarespace 7.1, and just realized that the captions for my slideshow are cut off. I've Googled this issue and have tried out a few different CSS codes that others have supplied to folks with the same problem. I've tried installing them both on the header of the page and the Custom CSS section, and neither have worked. How can I fix this? Thank You!

Hi @bsturc,

You can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
	.gallery-caption .gallery-caption-wrapper {
      overflow: visible;
    }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

3 hours ago, bangank36 said:

Hi @bsturc,

You can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
	.gallery-caption .gallery-caption-wrapper {
      overflow: visible;
    }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Okay, so that did work, which is incredible, thank you! I had to go in and delete some leftover coding for it to take effect. I did notice, however, that if I switch the slideshow type to "reel" and select the "full bleed" option, or if I switch the slideshow type to "full" and select the "full bleed" option, the code doesn't seem to work. Is there something I can adjust so that the captions aren't cut off for the other formatting choices? Thank you again for your help.

Also, I tried using the following code

@media screen and (max-width:767px) {
.gallery-slideshow {
    height: 40vh !important;
}
}

to stop the slideshow from getting cropped on mobile, and it isn't working. Is there a way to combine the code for the caption and code for the cropping?

I also noticed that the code you supplied in your response above works to fix the caption cropping for the first image, presumably because the caption is shorter, but it still cuts off the longer captions. 

Any help would be appreciated! Thank you again.

11 hours ago, bsturc said:

Okay, so that did work, which is incredible, thank you! I had to go in and delete some leftover coding for it to take effect. I did notice, however, that if I switch the slideshow type to "reel" and select the "full bleed" option, or if I switch the slideshow type to "full" and select the "full bleed" option, the code doesn't seem to work. Is there something I can adjust so that the captions aren't cut off for the other formatting choices? Thank you again for your help.

If you change the style of gallery, I need to look around once again.

Regarding the cutting off the longer captions, can you show me the page link and screenshots of them?

15 hours ago, bangank36 said:

If you change the style of gallery, I need to look around once again.

Regarding the cutting off the longer captions, can you show me the page link and screenshots of them?

Here's the URL that this set of images is on: https://www.begincollective.com/isysm/danielamartinez
I changed the gallery to 'reel' so you can maybe see what I mean. This is what it looks like in editing mode:

This is what the images look like on my actual phone:


And then this is the 'mobile preview' in editor mode on SquareSpace:


Let me know if you need any more details, and/or if you know where I went wrong in my code?

To clarify, when the gallery is set to "Slideshow: Full," the first image caption shows on mobile, but the other captions are cut off. When the gallery is set to "Slideshow: Reel," all of the image captions are cut off, and the code doesn't work--maybe because there's incorrect specifiers in the code? I'm not sure.

Hi, 
I'm having the same issue. Our captions are getting cut off on mobile.  We tried all the code suggested in this thread from 2021. Does anyone have a suggestion for our site?

https://synthesizer-strawberry-4bb3.squarespace.com/config/pages

Thanks!

@media only screen and (max-width:640px) { #block-yui_3_17_2_1_1624660511462_11636
 {width:20%; margin:auto}}
.gallery-caption p {white-space:pre; text-align:left}
.gallery-caption p:first-line {color: #ffe1b5; font-family: Playfair Display; font-size: 1.5rem; font-weight:bold}
.gallery-caption .gallery-caption-wrapper {
      overflow: visible;
    }

On 4/12/2023 at 5:22 AM, reena said:

Hi, 
I'm having the same issue. Our captions are getting cut off on mobile.  We tried all the code suggested in this thread from 2021. Does anyone have a suggestion for our site?

https://synthesizer-strawberry-4bb3.squarespace.com/config/pages

Thanks!

@media only screen and (max-width:640px) { #block-yui_3_17_2_1_1624660511462_11636
 {width:20%; margin:auto}}
.gallery-caption p {white-space:pre; text-align:left}
.gallery-caption p:first-line {color: #ffe1b5; font-family: Playfair Display; font-size: 1.5rem; font-weight:bold}
.gallery-caption .gallery-caption-wrapper {
      overflow: visible;
    }

What is password?

I'm having the same issue! I'm using the Gallery: Slideshow Simple. Height is set to L. 

Full captions look great on desktop, but get cut off in mobile view. Any updates from the community on how to fix this bug? It would be so great to be able to make the section longer and show more of the caption. 

On 5/30/2024 at 9:28 PM, Bell6650 said:

I'm having the same issue! I'm using the Gallery: Slideshow Simple. Height is set to L. 

Full captions look great on desktop, but get cut off in mobile view. Any updates from the community on how to fix this bug? It would be so great to be able to make the section longer and show more of the caption. 

 

Use this code