Centre the tutorial captions under their thumbnails - #27
Merged
Conversation
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
On a phone the caption of each tutorial thumbnail sat left of the picture it belongs to, and wrapped into four short lines.
The cause is the browser's default
figure { margin: 1em 40px }. It makes the caption box 80px narrower than the 200px thumbnail and offsets it 40px to the right. On wide screens the entry can grow to accommodate both, so image and caption still share a centre; below 600px the entry is capped at the image width, the image overflows the figure to the right, and the mismatch becomes visible.gap: calc(var(--gap) / 2)never applied, because--gapis not defined anywhere and the declaration was therefore invalid at computed-value time. It is replaced by the 80px it was worth, so the desktop strip keeps exactly the width it had.Checked with headless Chromium at 390px and 1200px against the current CSS: the desktop strip is unchanged apart from losing the stray 1em above and below, and on the phone the caption is centred under its thumbnail.
https://claude.ai/code/session_019CeqYuuPP1VTZ48tCNfcfF