[Support request] Font size on image caption

[Margaret]

How do I change the size of the font in the image caption? Right now it is the same size as the regular paragraph text. I’d like to make it a couple of sizes smaller.

I’m using the default GeneratePress theme if that makes a difference.

[Leo]

Hi there,

Try this CSS:

.wp-block-image figcaption {
    font-size: 20px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Margaret]

It didn’t work. The font size didn’t seem to change. My paragraphs are 17px. You’re recommended 20px should have been larger. I also changed your 20px to 10px. Nothing changed.

I work mainly in Google Chrome. I checked Firefox and Edge to see if the changes had gone through. No apparent change.

[Leo]

I’m not seeing the CSS being added.

It should definitely work though – I tested with browser inspector tool and this is the result:
https://www.screencast.com/t/wX55GWDLnUG

Can you make sure to clear site ground optimizer cache and any other caching plugin you might be using?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Margaret]

Okay, I hit the clear Cache button on my top menu and I went to the menu on the left to SG Optimizer and did a clear cache from there.

Then I tried the CSS again. I’m still not seeing any change.

Am I writing the CSS in the correct place? I’m editing it from the page. I click on the picture. I have a menu on the right. At the bottom of that menu is an “Advanced” tab. When I click on that, I have a CSS option show. I put your code in that box.

The only difference I can see is that when I use that box, it’s all one line. In your first response, the CSS was 3 lines. I tried using more than one line in that window. It doesn’t seem to take.

Is that somehow making a difference?

[Margaret]

Okay, I think I solved it. I added the CSS through the Appearance tab vice the individual page. It didn’t work on the page but it does work for the whole site. That meets my goal.

Thank you.

[Leo]

Not 100% sure where you are adding it but Additional CSS field in the customizer should do for every page:
https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Simon]

Hi,
I just found this and it worked for me too, thanks!
What would be the best way to align the text so it’s on the left inline with the paragraphs?
Example, here:

https://www.simonportillo.co.uk/data-point-installation/

Thanks!

[David]

Hi there,

update your CSS to this:

.wp-block-image figcaption {
    font-size: 26px;
    text-align: left;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Simon]

Hi David,
Thanks for that. Worked perfectly, on the image I was working on. Although I added a second one below and it doesn’t appear at all.
It saved ok within the media library (i’ve been back to check several times!) but nothing displayed. When viewing the source, there is no mention of figcaption on the second image.
Any ideas?
Thanks!

Here’s what I mean:

https://drive.google.com/file/d/1gZIcNOJCVsZtdc7woEVOxYunRQC7C9os/view?usp=sharing

[David]

Is the caption field visible in the Editor ? As it can be overwritten in the editor.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Simon]

I cannot see any reference to it, other than inside the media library. Please see screenshots. Thanks!

https://drive.google.com/file/d/1F-EWxo_imR8E9vccoed1R1u-5kseQZxA/view?usp=sharing

https://drive.google.com/file/d/1C6NhgGwQqMWYSMPXSc-V1Ne-8n4Rrjhe/view?usp=sharing

[David]

When you add a core Image Block it provides the field below the actual image:

If that is empty then either:

1. Remove the image, then re-add the image – it should pull in the caption.
OR
2. Add the caption in that field.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts