Jump to content

Applying padding to a lightbox slideshow, but not other lightboxes

Recommended Posts

On a page I'm designing, I need to move the images in a lightbox slideshow over to the right to make room for their captions (which I'm putting in a column to the left). I use:

.yui3-lightbox2 .sqs-lightbox-slideshow .sqs-lightbox-padder {
    position: absolute;
    top: 0%;
    left: calc(100vw - 100vh - 150px);
    bottom: 0%;
    right: 0%;
}

But this also moves other single images that have their own lightbox view on other parts of the page, which I'd prefer to leave with the default setup. Is there a way I can restrict the above CSS to only apply to lightbox slideshows/galleries or to that particular one, rather than to all lightboxes? There is only one gallery on the page, but several individual images that have lightbox views.

I'd be happy to either solve this properly by getting the code to refer only to lightbox views for items in galleries, or to do it via ids, but I don't know how to do either.

Link to comment
  • Replies 5
  • Views 379
  • Created
  • Last Reply

tuanphan, did you get my URL and password?

I'd love to know what to do about this. I think it all boils down to whether there is a way to use CSS to talk to the slideshow lightbox padder without talking to the single image lighbox one. If anyone has any ideas, I'd be very interested.

Link to comment

Thanks for sorting this out via email tuanphan. For others, the answer was to use write some additional CSS that only applies to light-boxes that aren't part of a slide show through use of :only-child

.sqs-lightbox-slideshow .sqs-gallery-design-stacked-slide:only-child .sqs-lightbox-padder {
    position: absolute;
    top: 0%;
    left: 0%;
    bottom: 0%;
    right: 0%;
}

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.