How can I make the width of my match the width of the >

Question

Say, I got this code:

Answer 1

Unfortunately, setting the width of the figure instead of using max-width: 100% means that it won't shrink on narrow (mobile) devices. That is, the images will not be responsive. I resorted to inserting
to break up long captions, but I didn't like it. But this obscure CSS feature seems to work for me:

figcaption { display: run-in; width: 150px }

This keeps the image responsive, even though the caption isn't. You can pick your own caption width. I also added margin: auto; text-align: center; to center the caption on a mobile device.