[Support request] Caption help needed please :)

[Sheree]

I have (finally) made the switch from Classic Editor on WordPress to Gutenberg. I have the following caption formatting in my Simple Custom CSS but it is no longer applying to the posts made in Gutenberg. All the posts which were formatted in the old classic editor are still displaying correctly.

How can I get this to apply to all posts on the website, regardless of whether they were formatted in classic or Gutenberg?

Thank you 🙂

.wp-caption .wp-caption-text {
font-size: 16px;
font-style: italic;
text-align: center;

[David]

Hi there,

change the CSS selector from:

.wp-caption .wp-caption-text {

to:

figure .wp-caption-text {

[Sheree]

Hi David,

Thanks for your answer. I’ve just tried that and nothing appears to have changed. Still having the same issue on the new posts 🙁

[David]

Try:

.wp-caption .wp-caption-text,
figure.wp-caption .wp-caption-text {
    font-size: 16px;
    font-style: italic;
    text-align: center;
}

[Sheree]

No success with this code either. Would it be helpful to know everything in the CSS box, in case another piece of code is interfering?

[Leo]

Which page/post can I see a picture with captions?

[Sheree]

Hi Leo,

This is the most recent post where the captions are not displaying properly; https://www.wingingtheworld.com/cows-dangers/

[Leo]

Can you try this instead?

.wp-block-image figcaption {
    font-size: 16px;
    font-style: italic;
    text-align: center;
}

Make sure to clear any caching plugins if you are using any.

[Sheree]

Hi Leo,

That seems to have worked on the new post created in Gutenberg – thanks!

However, the captions on the previous posts (created using classic editor plugin) have now aligned left and are slightly different font size to the new.

Is there a way we can standardise the captions across all posts please?

[David]

Try including the other selector.

Like so:

.wp-caption .wp-caption-text,
.wp-block-image figcaption {
    font-size: 16px;
    font-style: italic;
    text-align: center;
}

[Nic]

why we need additional css for this? in gutenberg edit mode the figcaption is 13px and aligned centered. in frontend nothing of this was applied. so i had to add the same css once again in my custom style.css:

.wp-block-image figcaption {
  font-size: 13px;
  color: #555d66;
  text-align: center;
}

[David]

WP has the wonderful habit of updating its core blocks markup and its related CSS. And as in this case leaving it out of their front end stylesheet.

It’s really an issue with WP’s blocks. And we’re loathe to add CSS that should belong in core.
But it seems to be a common occurrence so this will be included in GP 3.0

[Rohan Verma]

Can you help me on how to increase or decrease default wp text editor font size. Whether I use block editor or classic editor. It’s set to 12px by default. How to change that.

[Nic]

In GP global Settings. You find them in customizer.

[Author]

Posts