benjaminolsen.devRepair a cascade and width failure
The introduction disappears into its background, and the page is wider than a phone. There are competing .intro rules, a fixed content width and extra padding. Repair the causes without deleting content or hiding overflow.
Get started
- Open the page at a narrow width. Inspect the .intro declarations and the main box.
- Keep the text and image. Repair the conflicting colours and the width calculation.
- Test at 320px and 768px, read the longer introduction and run the checks.
Requirements
- Preserve the profile structure, text and image.
- Make the .intro foreground and background distinguishable with at least 4.5:1 contrast.
- Remove the fixed-width overflow at 320px and 768px.
- Keep every word visible rather than hiding or clipping content.
- Keep readable type and underlined links.
Manual checks
- Open your saved index.html directly in a browser. Follow every link with Tab and Enter, keeping focus visible.
- Read the headings and content in source order. Check that the wording and alternative text match the content.
- Enlarge the page to 200%, try a longer heading and paragraph, and check that all words remain visible. Check text and link contrast against their actual background with the contrast checker; aim for 4.5:1.
Hints
Hint 1
The last matching rule matters when specificity is equal. Width also includes more than content under content-box.
Hint 2
Compare the last .intro colour with its background. Then include padding and border when measuring main.
Hint 3
Remove the later white-on-white introduction rule or give it a dark foreground. Use border-box with width: 100% and max-width, and let main and paragraphs grow naturally.
Explain your decision
Why does overflow: hidden disguise this failure instead of repairing it?
Compare a practice solution after your attempt
This is one valid solution, not the only design. Compare the structure and behaviour rather than copying the appearance.
Download practice solution