bsturc Posted November 15, 2021 Share Posted November 15, 2021 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! Link to comment
Beyondspace Posted November 16, 2021 Share Posted November 16, 2021 (edited) 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 Edited November 16, 2021 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
bsturc Posted November 16, 2021 Author Share Posted November 16, 2021 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
bsturc Posted November 16, 2021 Author Share Posted November 16, 2021 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
Beyondspace Posted November 17, 2021 Share Posted November 17, 2021 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
bsturc Posted November 17, 2021 Author Share Posted November 17, 2021 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? Link to comment
bsturc Posted November 17, 2021 Author Share Posted November 17, 2021 (edited) 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 November 17, 2021 by bsturc clarity Link to comment
reena Posted April 11 Share Posted April 11 (edited) 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; } Edited April 11 by reena Link to comment
tuanphan Posted April 15 Share Posted April 15 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment