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 8
  • Created
  • Last Reply

Top Posters In This Topic

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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
  • 1 year later...

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;
    }

Screen Shot 2023-04-11 at 3.21.33 PM.png

Edited by reena
Link to comment
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;
    }

Screen Shot 2023-04-11 at 3.21.33 PM.png

What is password?

image.png.dd549bb35f04e9e6439097a82eef0ff6.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.