Caption modifications in Volt CMS

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

#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

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

@RobertF

This is my thought process….

The key here is this bit. Position absolute.

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.

2 Likes

Thanks very much Pete, I’ll apply this evening.

1 Like