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/

[Author]

Posts