Repository navigation
Keep the portrait beside the copy on phones - #3
Merged
Merged
Conversation
On phones the portrait sat alone between the buttons and the logo strip.
The handoff specifies that ("hero stacks, portrait below the text" at
<=820px), but it reads as an orphan, so this overrides it deliberately.
Two changes, because the stacking had two separate causes:
- The breakpoint was too early. At 560px the two-column layout still
leaves the copy 348px, about 42 characters a line. It now stays a grid
down to 520px with a 140px portrait instead of stacking at 820px.
- Below 520px a fixed second column would squeeze the copy to roughly 23
characters a line, which is unreadable. There the portrait floats right
and the text wraps around it: narrow for about four lines, then full
width again. shape-outside makes the wrap follow the circle rather than
its bounding box.
A float only affects content that follows it, so the portrait had to move
ahead of the text in the markup. First attempt without that moved the
float down into the logo strip and squeezed it to 208px. On wider screens
CSS order returns it to the right-hand column; that is visual only, so
tab order is unchanged, but a screen reader now reaches the portrait
before the lead paragraph.
At 120px the circle still crowds the narrowest phones, so it drops to 92px
below 400px. Also updated the sizes attribute to match the new widths.
Measured at 1280/700/560/480/390/320: portrait beside the copy at every
width, no horizontal overflow, logo strip unaffected. On a 390px phone the
hero is 106px shorter than before. Invariants, html-validate, linkinator,
axe (0 violations) and Lighthouse all pass.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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
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 phones the portrait sat alone between the buttons and the logo strip. The handoff specifies exactly that (
<=820px— "hero stacks, portrait below the text"), so this deliberately overrides the design handoff.Two causes, two changes
The breakpoint was too early. At 560px the two-column layout still leaves the copy 348px, about 42 characters a line. It now stays a grid down to 520px with a 140px portrait, instead of stacking at 820px.
Below 520px a second column does not fit. A fixed 132px column would squeeze the copy to roughly 23 characters a line. There the portrait floats right and the text wraps around it: narrow for about four lines, then full width again.
shape-outside: circle()makes the wrap follow the circle rather than its bounding box.The markup had to change
A float only affects content that follows it, so the portrait moved ahead of the text. The first attempt without that pushed the float down into the logo strip and squeezed it from 346px to 208px.
On wider screens
orderreturns it to the right-hand column. That is visual only, so tab order is unchanged — but a screen reader now reaches the portrait before the lead paragraph. Its alt is "Carsten Bokemeyer", so it announces as a portrait of the page's subject, which seems reasonable, but it is a semantic change worth knowing about.Verification
Measured at 1280 / 700 / 560 / 480 / 390 / 320px: portrait beside the copy at every width, no horizontal overflow anywhere, logo strip unaffected. On a 390px phone the hero is 106px shorter than before, because the space beside the portrait is used instead of stacked under it.
Invariants, html-validate, linkinator (27 links), axe (4 pages, 0 violations) and Lighthouse (9 runs) all pass locally.
🤖 Generated with Claude Code