How to move all image captions to underneath (below) the images?

How To
1

How do I move the image caption (default is on top of the image) to below it?

Note: Seems like this would be very simple but I searched and googled and cant find much. Everything I did find refers to styling the “gallery” but I just want all captions for all images on my site to be underneath the images, not overlaid.

2

This worked for me:

.brxe-image {
  display: flex;
  flex-direction: column;
}

.brxe-image figure {
  display: flex;
  flex-direction: column;
  margin: 0; /* Reset any default margins */
}

.brxe-image img {
  width: 100%; /* Ensure the image takes full width of its container */
  height: auto; /* Maintain aspect ratio */
}

.brxe-image figcaption {
  position: static !important; /* Ensure it's not absolutely positioned */
  background: none;
  padding: 0px 0 16px 0;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  color: #E0E5E5;
}
4 Likes
3

Thank you very much!
I will try this bit by bit to see how it works and adapt as necessary.

4

Thank you. This behavior is still the norm and your solution here is very helpful. One reason the styling with the caption inset in the image boundry is an issue is that when styling the image to have a radius, the bottom image radius is lost when a caption is present. (reported by my client during review, - viewing on Windows in Firefox) I’m not a fan of this default styling. :slight_smile: