Jump to content

SqSp 7.1FE CSS control over Lightbox caption box desktop and smartphone

Recommended Posts

On June 15th, Member @Beyondspace was kind to help me resize my Lightbox images on the gallery block on my website. Works great. (Thank you.)

I have a related question(s) to the "Lightbox max size" provided. (Line 175 in my CSS):

Note: I edited this request to give priority to the items. It's the positioning of the caption box that is most important. (The thickness of the arrows and the position of the close button are secondary.)

Priority 1) Lightbox Caption position. I've identified the caption 'box' as .sqs-lightbox-meta and the title as 'H1' and the description text a 'p'. (Line 208 in my CSS)

Desktop: I'd like to make the white (#ffffff) caption box 80%-100% opaque; I'd like it always to be about 30px (or so) below the image. 

Smartphone: In SqSp, it's showing up on top of the image and I'd like it below with the same attributes as the desktop. On my actual iPhone the caption box is not visible at all. (Is it below and out of sight?) (Line 220 in my CSS) (I obviously don't need the arrows showing on the smartphone as they are on SqSp, but not my actual phone.)

Priority 2) Previous and Next arrows. I've identified them and positioned them just outside the 50% image which seems to be working although there's probably better CSS code.  I've added a round white background dot and made the arrows the color #e60000 (red). I'd like to make the arrows a bit larger and thicker. (Line 191 in my CSS)

Priority 3) Lightbox Close Button. I like the changes I made, however can it be moved to be closer to the image? About 20px above on upper-right? (Line 237 in my CSS)

I know this is a lot to ask. I've looked at all the SqSp Forum entries I could find.

I use the 'Jazzikology' image in the "Identity & Branding Design Systems" page (Small and Medium-Sized Business gallery at top of page) because it has both a Title and a Description

Thanks! My site is live and screenshots are below. www.taitdesign.com 

Thanks also to @tuanphan who responded to my initial request. Any ideas? 

Screen Shot 2023-06-20 at 8.07.39 AM.png

Screen Shot 2023-06-20 at 8.08.10 AM.png

Screen Shot 2023-06-20 at 8.08.34 AM.png

Screen Shot 2023-06-20 at 8.09.04 AM.png

Edited by TaitDesign
I simplified the priorities of the request.
Link to comment
  • Replies 2
  • Views 397
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

#1. Add to Design > Custom CSS

.yui3-lightbox2 .sqs-lightbox-meta {
    background-color: rgba(255,255,255,0.8) !important;
}
@media screen and (min-width:901px) {
    .sqs-lightbox-slide img.thumb-image.loaded {
    width: 30% !important;
    top: 50px !important;
    transform: translateX(-50%) !important;
}
}
@media screen and (max-width:900px) {
.yui3-lightbox2 .sqs-lightbox-meta {
    left: 0 !important;
    right: 0 !important;
}
}

#2. Use this CSS

.yui3-lightbox2 .sqs-lightbox-next::before, .yui3-lightbox2 .sqs-lightbox-previous::before {
    font-size: 35px !Important;
}

#3. 

.yui3-lightbox2 .sqs-lightbox-close {
    top: 100px;
    right: 100px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks 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.