Tagged: image captions
- This topic has 4 replies, 2 voices, and was last updated 1 year ago by
dmac.
-
AuthorPosts
-
August 5, 2023 at 12:56 pm #322219
dmac
ParticipantI 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.
August 5, 2023 at 2:08 pm #322269tikaram
Participant@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,
TikaramAugust 6, 2023 at 11:08 am #322273dmac
ParticipantExcellent, 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.
August 8, 2023 at 10:02 pm #322500dmac
ParticipantAny 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.
August 8, 2023 at 10:21 pm #322518tikaram
Participant@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.jpgTo 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 -
AuthorPosts
- The topic ‘How to fix uneven formatting of image captions’ is closed to new replies.