Jump to content

Lightbox caption css

Recommended Posts

Site URL: https://wrap.space

Hey there - this forum has been so helpful as I work through site updates.

I have a couple of linked questions, hoping you can help...

I've added css for the gallery on this page:

https://wrap.space/draft-coworking

1) the overlay keeps changing despite me setting it and it looking good. Any advice on this? And how can I make this code ONLY appear on this page.

2) I believe this css is the culprit for making the caption text on this page https://wrap.space/workspace1 all bunched up in the centre of the grid:

402654641_Screenshot2022-07-14at18_26_51.png.6ff2cfab3cff7663b4e037688127a4d8.png

3) I've trialled so many versions of code sourced on this forum but nothing seems to work to customise the caption styling. Is it possible to adjust the size and colour? And maybe add a block colour behind the text to highlight it?

Thanks SO MUCH in advance. legends.

 

Link to comment

Hey @tuanphan thanks for the reply.

#1. Yes correct, the images above the Make it button. The overlay on both screen and mobile should be aligned with the bottom of the image. 

662122246_Screenshot2022-07-15at11_52_46.thumb.png.6144c49d4338abc0c400e457badb5bbb.png

 

#2. No, not the same effect. On this gallery https://wrap.space/workspace1 (as pasted in original message) and on the homepage gallery also - see below. I would like to customise the caption title to a larger font which will be fixed (not on hover) and centred in the image, preferably with a white background for the text. 

The homepage gallery currently looks like this:

1861597363_Screenshot2022-07-15at11_56_40.thumb.png.251027f8ae9c77e2cbba3f3d4c55f250.png

 

Link to comment

Don't remove any code in your current code. Add this CSS

.list-item-content {
    height: 100%;
    margin: 0 !important;
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 9999;
    padding: 0 !important;
    justify-content: center !important;
}
li.list-item {
    position: relative;
}
.list-item-media {
    margin: 0 !important;
}

image.thumb.png.a57f1cd0d9f2c0138e77d0535d3b9310.png

#2. 

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
On 7/18/2022 at 5:18 PM, ToucanRR said:

That fixed #1 thanks @tuanphan 🙂 Hoping you can solve the other problems for me too!

You mean Gallery Reel? I don't see Grid.

If reel, can you enable caption & add some demo captions? We can test code easier

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

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.