Bulma: figcaption obscured by image with size classes such as ".is-4by3"

[lukegravitt]

This is about Bulma.

Steps to Reproduce

1. Use <figcaption> with <figure class="image is-4by3"> and an appropriate <img>

Example fiddle: https://jsfiddle.net/1ba2ofk6/

Expected behavior

Caption is visible.

Actual behavior

Caption is obscured by image.

[jgthms]

Use the figcaption outside the figure. Or use a div as the img parent.

The class should only contain an image tag.

[lukegravitt]

This causes the bulma styling for figcaption to not be applied as it's a child to figure.

Relevant links:

https://bulma.io/documentation/elements/content/
https://github.com/jgthms/bulma/blob/27c5e7bd57a8031bb477816535b90721f63f6c74/css/bulma.css#L2712

If you nest two figures, it has double the margin.

I think a bulma change/documentation change is needed here.

[Wikiki]

@jgthms, it's too bad to not use figcaption inside figure as it is supposed to be :-(

[JosephBlythe]

I agree this is a poor implementation, Bulma should handle figcaption inside the figure as intended outside has no context.

[sebmor]

I agree this is a poor implementation, Bulma should handle figcaption inside the figure as intended outside has no context.

Completely agree

[alex996]

It might just be a limitation of the padding-bottom/top hack given that it uses absolute positioning. Nested figure tags are legal in HTML, so following jgthms's comment, you could do

<figure>
  <figure class="image is-4by3">
    <img src="/path/to/img" alt="Some image" />
  </figure>
  <figcaption>Some text</figcaption>
</figure>

This padding trick is by far not the only way to prevent content reflow, but the above should do the job with the current Bulma implementation.