Remove the .figure__container element. According to Tess, putting a <figcaption> inside a child of a <figure> "doesn't obey the content model" or some shit. Fiiiiine. Getting small figures to lay out the way I want them to without the container was a bit of a trick. Instead of letting the figure span the entire width of the grid column, let it fit the size of its contents, and then set margin-inline to auto so it centers. Doing this also allowed me to remove the .figure--image, etc styles because the styles and markup are a lot more similar among figures containing different kinds of elements. Nice! |
||
|---|---|---|
| .. | ||
| caption.html | ||
| fullwidth-image.html | ||
| fullwidth-video.html | ||
| fullwidth.html | ||
| resource-source.html | ||
| small-image.html | ||
| small.html | ||