Jump to content

The captions in gallery/slideshow are cut off on mobile

Recommended Posts

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!1716835606_ScreenShot2021-11-15at12_57_36PM.thumb.png.d1f1ff1dd1a0fd976c98ca58cff02152.png

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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!1716835606_ScreenShot2021-11-15at12_57_36PM.thumb.png.d1f1ff1dd1a0fd976c98ca58cff02152.png

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

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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.

Link to comment

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.

Link to comment
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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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:
2114946377_ScreenShot2021-11-17at4_38_03PM.thumb.png.a3673daabd6196b5ae3d5b743cd58c15.png

This is what the images look like on my actual phone:
IMG_0528.thumb.PNG.f2427e08f4ba51421d239919dff22986.PNGIMG_A27ED372C982-1.thumb.jpeg.481da86683809efd3a7f78d5e58e73d5.jpeg

And then this is the 'mobile preview' in editor mode on SquareSpace:
190587544_ScreenShot2021-11-17at4_38_41PM.thumb.png.706e12665b57029a4f31d6ec3441bc6b.png44608856_ScreenShot2021-11-17at4_38_53PM.thumb.png.83fbcfd2c1665b73b10dfb66f47d09d7.png

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

Link to comment

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.

Edited by bsturc
clarity
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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.