genelu Posted July 28, 2020 Share Posted July 28, 2020 Just getting into SquareSpace and I already have a question! When captions are turned on in the Gallery block for 7.1, they appear below their corresponding images. Is there a way to have the caption appear over the image itself? My CSS is SUPER rusty, but I've included a sketch showing what I'm trying to do. Thanks in advance! 🙏 Link to comment
genelu Posted July 29, 2020 Author Share Posted July 29, 2020 I think I figured it out. Again, super rusty w/ CSS, but here's what I did. Hope this helps! /* Make sure to target your gallery. Each gallery has its own unique collection ID, which can be found via View Source. */ #collection-5f047ea7c17ab563ed1595c4{ .gallery-grid-item { position: relative; display: inline-block; } .gallery-caption-wrapper { display: table; height: 100%; } /* Caption Container */ figcaption.gallery-caption { padding: 0; position: absolute; z-index: 999; margin: 0 auto; left: 0; right: 0; top: 0%; width: 100%; height: 100%; } .gallery-caption-content { display: table-cell; vertical-align: middle; } } kellyhutsbydesigns and LarryAP 2 Link to comment
LarryAP Posted October 21, 2020 Share Posted October 21, 2020 Hi genelu. I can't see the gallery ID anywhere in the source - how do you find it? Link to comment
tuanphan Posted October 23, 2020 Share Posted October 23, 2020 above is Page Id. See how to find Page Id. On 10/22/2020 at 3:53 AM, LarryAP said: Hi genelu. I can't see the gallery ID anywhere in the source - how do you find it? LarryAP 1 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
LarryAP Posted October 23, 2020 Share Posted October 23, 2020 Thanks everybody - this is really helpful. Great community! I hope I can build up some experience and start actually helping others too!!! Link to comment
cchs Posted August 26, 2022 Share Posted August 26, 2022 This code worked great. Combined with this code from @tuanphan to make the captions wider it was just what I needed. figcaption.gallery-caption.gallery-caption-fullscreen-slideshow { max-width: 100%; } The only remaining issue is that there is now an empty div below the slideshow where the caption used to be. Is there a way to get rid of that so the slideshow is full screen again? Link to comment
tuanphan Posted August 28, 2022 Share Posted August 28, 2022 On 8/26/2022 at 10:40 PM, cchs said: This code worked great. Combined with this code from @tuanphan to make the captions wider it was just what I needed. figcaption.gallery-caption.gallery-caption-fullscreen-slideshow { max-width: 100%; } The only remaining issue is that there is now an empty div below the slideshow where the caption used to be. Is there a way to get rid of that so the slideshow is full screen again? Can you share link to a page where you have problem? 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
cchs Posted September 2, 2022 Share Posted September 2, 2022 https://noorbeautique.com/jesse It's that brown band below the gallery image that I'm trying to eliminate. I think it's a vestige of the caption container... Thanks! Link to comment
tuanphan Posted September 6, 2022 Share Posted September 6, 2022 On 9/3/2022 at 1:00 AM, cchs said: https://noorbeautique.com/jesse It's that brown band below the gallery image that I'm trying to eliminate. I think it's a vestige of the caption container... Thanks! Add to Design > Custom CSS /* delete space */ [data-section-id="6308db39dc82c82529f74699"] div.gallery-fullscreen-slideshow { margin-bottom: 0px !important; } 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