Customise Grid: Simple Gallery Description style

I've tried customising the Descriptions on the Grid: Simple Gallery. I want them to be H4 and centred over the top of each image.  My positioning isn't working properly as they move on browser resize. Also the text is cut off at the bottom. What am I doing wrong?

Here's what I've used:

.gallery-caption-wrapper p {
    background: rgba(0,0,0,0.0);
    color: white;
    text-align: center;
    font-size: 30px!important;
    font-family: "Bebas-Neue"!important;
}

.gallery-caption-wrapper {
    position: absolute;
    top: -130px;
    bottom: 0;
    left: 0;
}

Thanks in advance!

Hi,

What is site url?

And with h4, actually you can wrap your description text inside h4 tag

Suppose your current image description is

mountain in the hike

You can change it to

<h4>mountain in the hike</h4>

Hi, thanks for your reply. The url is https://www.adamdocker.art. There's a section on the homepage called 'Featured Collections'. Under that is a Simple Gallery. We want the description/caption to be centred horizontally and vertically over each thumbnail but somehow it's not working.

Thanks

On 1/28/2024 at 9:53 PM, elmeto said:

Hi, thanks for your reply. The url is https://www.adamdocker.art. There's a section on the homepage called 'Featured Collections'. Under that is a Simple Gallery. We want the description/caption to be centred horizontally and vertically over each thumbnail but somehow it's not working.

Thanks

Use this new code

/* center caption */
.gallery-caption-wrapper {
    position: static !important;
}

figcaption.gallery-caption.gallery-caption-grid-simple {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
}

figure {
    position: relative !important;
}

On 2/1/2024 at 3:17 AM, tuanphan said:

Use this new code

/* center caption */
.gallery-caption-wrapper {
    position: static !important;
}

figcaption.gallery-caption.gallery-caption-grid-simple {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
}

figure {
    position: relative !important;
}

Thanks very much for this!  It works but it breaks the banner at the top of the page and moves it to the bottom of the page. I haven't saved it as the site is live but here is a screenshot showing what happens:

You can use this new CSS code

[data-section-id="65b03a4b1ec35d548ad945c6"] {
/* center caption */
.gallery-caption-wrapper {
    position: static !important;
}

figcaption.gallery-caption.gallery-caption-grid-simple {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
}

figure {
    position: relative !important;
}}

Brilliant, thank you!  That worked for the style, so now visually it looks right. However, there are two more things:

1. The text is covering the hyperlink area, so you can't click there. You can only click above or below the text. Is there a way to fix that?

2. We would like a rollover effect of some kind. Ideally an overlay fade or something simple like that.

URL is adamdocker.art

Thank you!

YES! This worked, thank you so much!