Jump to content

Brine: How to Position Captions under Slideshow Gallery

Go to solution Solved by tuanphan,

Recommended Posts

I want the image Title & Description to appear below the slideshow (rather than overlapping the image). Has anyone done this in Brine?

Temp URL is https://horse-blue-mllf.squarespace.com/landscapes pp: wyunabayartist

I've had multiple attempts at adapting other people's code for this and no joy.I'm just learning CSS so would appreciate any advice.

Edited by JacquiChan
Initial Revision
Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

@JacquiChan


/* Push description to under slide */
.collection-type-gallery.view-list .slide-meta.show {
   bottom: -130px;
}
/* Fix height issue */
.collection-type-gallery.view-list .sqs-gallery-design-stacked-slide img {
   top: 0 !important;
   height: 100% !important;
}
/* Remove overflow content */
.collection-type-gallery.view-list .slides-controls {
   overflow: visible !important;
}
.collection-type-gallery.view-list .slide.sqs-gallery-design-stacked-slide {
   overflow: visible !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

Thanks again @tuanphan. I'm wondering if you could also clarify how I'd adapt that if I go with a gallery block rather than gallery page: https://horse-blue-mllf.squarespace.com/alternative-galleryMy client thinks the gallery page slideshow is too wide, so I'm offering her this narrower version, but once again she wants the titles etc below. I had a poke around but wasn't sure how to target the gallery on this page.

Link to comment

Thanks again @tuanphan. I'm wondering if you could also clarify how I'd adapt that if I go with a gallery block rather than gallery page: https://horse-blue-mllf.squarespace.com/alternative-gallery My client thinks the gallery page slideshow is too wide, so I'm offering her this narrower version, but once again she wants the titles etc below. I had a poke around but wasn't sure how to target the gallery on this page.

Link to comment

@JacquiChan These code for Alternative-gallery page. Add to Home > Design > Custom CSS.


.collection-type-page .sqs-gallery-block-slideshow .meta {
   bottom: -90px !Important;
}
.collection-type-page .sqs-gallery-design-stacked-slide {
   overflow: visible !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

@tuanphan // Gallery Slideshow Captions Titles & Description//.sqs-gallery-block-slideshow .meta-title { font-size: 18px !important; font-style: italic; font-weight: 500; letter-spacing: 0.01em; text-indent: 20px;}

.sqs-gallery-block-slideshow .meta-description p { font-size: 15px !important; color: white !important; font-weight: 400; padding-left: 20px ; padding-bottom: 10px; letter-spacing: 0.05em; }

Link to comment

@JacquiChan I have just checked your page, and you have inserted the missing }. Please copy and paste the exact code I sent

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
  • 5 months later...

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.