Captions are "scruntched up"

[frodojrr]

When I create a post from scratch on eNews Park Forest, the images will not center, and the captions are crunched together, centered, and floating to the left beneath each respective image.

Using Gutenberg Version 3.8.0.

See here: https://www.enewspf.com/park-forest/speaker-madigan-supports-mcdonalds-worker-strike-over-sexual-harassment/

You can see the caption under the main headline, how it is all crunched together. I just added another image from the image library just for purposes of sending this bug report. The image is 400 pixels wide, aligns left, and the caption below it is all crunched together.

To Reproduce

Don't know what to say here, except that I added images already in our image library.

Expected behavior

Screenshots below pretty much tells the story.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 69.0.3497.92 (Official Build) (64-bit)

Additional context

• Please add the version of Gutenberg you are using in the description.

Done. Above.

[designsimply]

This looks like it might be related to your theme.

May I ask what theme you are using?

Can you walk through your steps to add captions, even if they are basic, for how you add captions to images? Do you copy and paste text from another source or are you typing in the full caption by hand into an image block directly?

[frodojrr]

I type captions in by hand. Sometimes I cut and paste. I don't see underlying code. In Gutenberg, I always use the Media Library option. When I've tried "Upload" from Gutenberg, I can never find the image in my library.

The theme is MH Magazine, using a Child Theme.

Gutenberg works fine on my other blogs, so, yes, this may be specific to my theme.

Could it be that one of the files in my child theme hasn't really updated with updates from the template?

Thank you.

[manonatelier]

The theme is fine. It's the CSS.

The caption tag, "figcaption" is display:table-caption. In order for it to work properly in this instance, you need to have the parent tag "figure" as display:table.

Currently the CSS for the parent tag "figure" is display:block.

[frodojrr]

Where would I put that? In additional CSS in the theme, or in the plugin somewhere?

[manonatelier]

I would let the WP people fix it.

But if you want to fix it in the interim, just put it in APPEARANCE > CUSTOMIZER > Custom CSS for now.

[manonatelier]

My suggestion:

Need to have a class for when there's captions on the parent tag "figure", such as .has-caption, and have that display:table. So that they can keep display:block when there's no captions.

[frodojrr]

Thanks, Manon.

I had to add !important; for it to work, but it works now!

figure { display: table !important; }

[mtias]

Closing as there's nothing much to do here (theme forces a display on figcaption) outside of targeting the caption class rather than the element.