Lightbox caption css

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:

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.

#1. What should it look like? And you mean 4 images above Make it button?

https://wrap.space/draft-coworking

#2. Make effect same as draft-coworking page?

#3. Which page are you referring to?

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. 

#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:

Can anyone help with this please? I'd really appreciate it! Any thoughts on a fix @tuanphan?

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;
}

#2. 

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

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