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

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