Toby7 Posted October 20, 2020 Share Posted October 20, 2020 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
tuanphan Posted October 21, 2020 Share Posted October 21, 2020 Can you share site url? We can check easier 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
Toby7 Posted October 21, 2020 Author Share Posted October 21, 2020 Thanks! I don't want to share the URL and password publicly, so have sent them to you using your website. Link to comment
Toby7 Posted October 28, 2020 Author Share Posted October 28, 2020 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
tuanphan Posted October 28, 2020 Share Posted October 28, 2020 Can you share site url? We can check easier 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
Toby7 Posted November 1, 2020 Author Share Posted November 1, 2020 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment