[dmac]

I have many images on a website. Some have captions that show as a line of text below the image; other images use a grey gradient over the image with the caption.

I want all the captions to be handled the same way, with the text below the image (it is so much easier to read than grey text on a grey gradient).

The second row of images on https://www.susanlittle.com/miniature-original-watercolour-paintings/ show the problem captions (using the gradient over the image). The first two painting images on https://www.susanlittle.com/gallery-watercolour/ show the ideal handling of captions.

How to I make all captions formatted in the same way? Thank you.

[tikaram]

@dmac : Login to your WordPress admin section. Go to Appearance => Customize => Additional css and add the following css

.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figcaption,
.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption {
    background: unset;
}

Let me know if this works as desired or not.

Regards,
Tikaram

[dmac]

Excellent, that has removed the gradient; thank you very much! I had to comment out some old CSS that was interfering with what you wrote, but now the pages https://www.susanlittle.com/gallery-watercolour/ and https://www.susanlittle.com/gallery-acrylic/ look much better.

I changed the text color in the same  css block so it would be black.

Now I only have weirdness with the positioning of the captions. You can see on https://www.susanlittle.com/gallery-watercolour/ that each caption is a variable distance from the bottom of the image of each painting. Can you see why that is? I’d prefer to have captions always appear the same distance from the bottom of each image.

Also, the white text and gradients are still appearing on the https://www.susanlittle.com/miniature-original-watercolour-paintings/ page. Did I do something to override things on that page?

Again, thank you very much for your help with this.

[dmac]

Any ideas on how to fix the weirdness with the positioning of the captions. You can see on https://www.susanlittle.com/gallery-watercolour/ that each caption is a variable distance from the bottom of the image of each painting. Can you see why that is? I’d prefer to have captions always appear the same distance from the bottom of each image.

Also, the white text and gradients are still appearing on the https://www.susanlittle.com/miniature-original-watercolour-paintings/ page. Did I do something to override things on that page?

 

Thank you for your help.

 

[tikaram]

@dmac : The images that you have used are not cropped in the same ratio from the border of the image. Your images have a variable length and width containing the white background from the border of the images. You can check the image below where you can find the image contains a white background which is uneven in every images. Make sure you crop the images with same dimensions from the border and upload your images again.
https://www.susanlittle.com/wp-content/uploads/2020/05/Watercolour_Painting_Horizontal_4-1-1024×724.jpg

To fix the uneven formatting on other pages please add the following additional css

@media screen and (min-width: 600px) {
 .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
   padding-bottom: 40px;
 }
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  background: unset;
  color:#000;
  font-size:20px;
}

[class^="wp-block-"]:not(.wp-block-gallery) figcaption {
  color: #000;
  font-size: .8em;
  text-align: center;
}

Regards,
Tikaram

[Author]

Posts