By default, WordPress Gutenberg Galleries place the figure caption as on overlay on top of the image, with a black tint behind the caption. If you want a standard caption that is positioned below the image, here is how to override the Gutenberg Gallery figcaption style using your themes stylesheet or WP Customize Additional CSS settings.
CSS Code To Reposition The Caption Below Image
Paste this into your WP Customize > Additional CSS settings, or in your style.css:
figure.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
background: none;
color: #000;
font-size: 18px;
font-weight: bold;
line-height: 1.2em;
margin-top: 0.2em;
position: relative;
}I’ll explain how this code works below.
CSS Class Used By The FigCaption
The Gutenberg Gallery figure caption CSS rule is: .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {...}
To override the Gutenberg CSS rule raise the priority of your override rule by adding the figure element name to it:
figure.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {...}
CSS Properties Used By The FigCaption
CSS properties control the position and look of the figcaption. You can modify them to dial in the look you want.
The “position” property sets up where the caption will show. I use position: relative; to have it render below the image. It was position: absolute; which caused it to be an overlay.
The other important properties are the background and text colors. We have to remove the background tint and set the font to a visible color (not White).
Modify any of these properties in the CSS Code above to fine tune the figcaption to look the way you want. Here is what they are and a few tips on changing them:
background: none;/* none removes the background tint */color: #000;/* #000 sets the text color to black */font-size: 18px;/* I needed a large font size, you may want to go smaller */font-weight: bold;/* I like bold, you may want to use normal */line-height: 1.2em;/* this is the spacing between lines */margin-top: 0.2em;/* this is how much space is between image and caption */position: relative;/* this moves caption below the image. (‘absolute’ put it on top of the image) */
