Caption modifications in Volt CMS

I Need Help
1

Hello

On the following gallery I have got stuck.

http://test1.fitzdesign.info/gallery-1/
please click on the first image of a Parisian street

I want the caption to have the same width as the image, 80% and be positioned centrally below the image. I’ve added additional css but the caption is left aligned to the lightbox window.

The additional CSS is currently as follows:
#baguetteBox-overlay .full-image img {
max-height: 80% !important;
max-width: 80% !important;
}

#baguetteBox-overlay {
background-color: white !important;
}

#baguetteBox-overlay .full-image figcaption {
background-color: white !important;
color: black !important;
width: 80% !important;
margin-bottom: 35px;
text-align: center !important;
}

2 
#baguetteBox-overlay .full-image figcaption {
    background-color: white !important;
    color: black !important;
    width: 80% !important;
    margin: 0 auto; /* This should centre the caption. */
    margin-bottom: 35px;
    text-align: center !important;
    display: block;
}
2 Likes
3

Thanks Mike, I applied this but the caption is still not centred below the image. Looking at my css for the img I have applied a max height and max width of 80% so I tried adding those statements to the code you provided but that didn’t resolve.

Here is all the css currently inserted:

#baguetteBox-overlay .full-image img {
max-height: 80% !important;
max-width: 80% !important;
}

#baguetteBox-overlay {
background-color: white !important;
}

#baguetteBox-overlay .full-image figcaption {
background-color: white !important;
color: black !important;
width: 80% !important;
margin: 0 auto; /* This should centre the caption. */
margin-bottom: 35px;
text-align: center !important;
display: block;
}

4

@RobertF

This is my thought process….

The key here is this bit. Position absolute.

CleanShot 2024-11-03 at 09.01.19@2x
CleanShot 2024-11-03 at 09.01.19@2x740×206 20.3 KB

This tells me the way I have to approach it.

left: 50%;
transform: translateX(-50%);

The Left, is relative to the parent. Moving the left edge of the caption to the middle.
The translateX, (relative to the element) moves the caption back halfway on the horizontal.
The result, a centered caption, that has a position absolute.

1 Like