Change image caption font size

abbzah · Member · Mar 28, 2020 at 1:11 pm
Copy link

Add topic to favorites
Hi, I’m trying to change the caption size on media embeds such as images in my posts but not having any luck.

I’ve tried a number of different methods from other threads but not getting any results through CSS amendments.

Could anyone help on this please?

Many thanks,

Abbas.

The blog I need help with is: (visible only to logged in users)
kokkieh · Staff · Mar 30, 2020 at 7:37 am
Copy link
Hi Abbas,

Can you point me to a specific post or page on your site where you have an image with captions? All the ones I’ve checked has the caption added as a separate paragraph underneath the image, rather than using the built-in image caption itself.
abbzah · Member · Mar 30, 2020 at 10:46 am
Copy link
Hi Thanks for responding.

Yes I had to revert to that method in order to make the font smaller on the page.

Here is a page where I am using the caption under the first image:

Fish Bar Symposium

Please let me know if you can help. Many thanks,

abbas.
staff-mckluskey · Staff · Mar 30, 2020 at 1:06 pm
Copy link
Thanks for that.

Have you tried adding this code to My Site>Design>Customize>CSS?
```
/*Changes the size of caption font*/
figcaption {
    font-size: small;
}
```
You may replace the word small with x-small or experiment with different numbers.

Also, bear in mind that with your plan you can access live chat directly from https://wordpress.com/help/contact
abbzah · Member · Mar 30, 2020 at 3:42 pm
Copy link
Thanks that works!

Is there a way to make the captions centred alignment with the image ?
abbzah · Member · Mar 30, 2020 at 3:42 pm
Copy link
Oh and I cant seem to stop hyphenation in body text and captions too, even with pasting certain CSS – can you help on this?

Thanks in advance
staff-doublebassd · Staff · Mar 30, 2020 at 9:28 pm
Copy link
Hi there,

You can add this snippet to center the captions:
```
figcaption {
	
  text-align: center;
}
```
abbzah · Member · Mar 31, 2020 at 2:22 pm
Copy link
thanks!

anyone can help with stopping text hyphenation all over my site?
staff-blorbo · Staff · Mar 31, 2020 at 4:44 pm
Copy link
I’m not seeing any unintentional text hyphenation there. Were you able to correct that?
abbzah · Member · Mar 31, 2020 at 9:44 pm
Copy link
captions on this page are showing hyphenation
abbzah · Member · Mar 31, 2020 at 9:44 pm
Copy link
forgot to give link: https://abbzah.com/2018/02/08/manna2/
kokkieh · Staff · Apr 1, 2020 at 6:37 am
Copy link
Whether or not you see hyphenation would depend on the size of the screen, as that affects whether or not breakpoints in words fall across the end of a line.

I see you already have CSS to prevent that in paragraphs and headings, so just add the figcaption selector to that existing CSS declaration.

In other words, modify the first line of your CSS to body, p, h1, h2, h3, h4, h5, h6, figcaption

No items found.