From a2afe91c623ab34e2ce23bdc05e9c01564380af6 Mon Sep 17 00:00:00 2001 From: "c.diddens" Date: Sun, 9 Aug 2026 08:03:37 +0200 Subject: [PATCH] Centre the tutorial captions under their thumbnails The browser's default figure margin (1em 40px) made the caption box 80px narrower than the 200px thumbnail and offset it 40px to the right. On wide screens the entry could grow, so image and caption still shared a centre and nothing looked wrong. On phones the entry is capped at the image width, the image overflows the figure, and the caption ended up visibly left of the picture it belongs to - and wrapped into four lines instead of two. Drop that margin and pin the figure to the thumbnail width. The gap between two thumbnails came from the very same margin, since the declared gap: calc(var(--gap) / 2) never applied - --gap is not defined anywhere, so the declaration was invalid at computed-value time. Replace it with the 80px it was worth, which keeps the desktop strip exactly as wide as before. Claude-Session: https://claude.ai/code/session_019CeqYuuPP1VTZ48tCNfcfF --- _generated/css/style.css | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/_generated/css/style.css b/_generated/css/style.css index 3d54cd5..deb796a 100644 --- a/_generated/css/style.css +++ b/_generated/css/style.css @@ -204,7 +204,9 @@ text-decoration:none; align-items: center; display: grid; grid-auto-flow: column; - gap: calc(var(--gap) / 2); + /* the breathing space between two thumbnails. It used to come from the + browser's default figure margin, which is why it is this wide. */ + gap: 80px; margin: 0; padding-bottom: 10px; @@ -270,6 +272,16 @@ text-decoration:none; overflow: hidden; } +/* Drop the browser's default figure margin (1em 40px) and pin the figure to the + thumbnail width. With the margin in place the caption box was 80px narrower + than the image and offset 40px to the right of it, so on narrow screens - + where the entry is capped at the image width and the image overflows the + figure - the caption ended up visibly left of the picture it belongs to. */ +.horizontal-media-scroller figure { + margin: 0; + width: 200px; +} + .horizontal-media-scroller figcaption { text-align: center; }