Responsive article page

What this demonstrates

The document uses an article, a visible heading hierarchy, a fluid shell, and a bounded reading measure. It remains readable when CSS fails.

Document and heading structure

The title and heading serve different contexts but describe the same resource. Font sizes use fluid limits rather than a device list. No fixed width can force ordinary page content beyond a narrow viewport.

The article element contains a complete piece that could be distributed or linked independently. Its H1 names the article, while later H2 headings divide the subject into useful sections. The surrounding site header remains outside the article so its navigation is not mistaken for part of the story.

Do not choose headings for their default size. Preserve a logical hierarchy and style the elements you need. A short metadata line may be a paragraph or list; it does not become a heading merely because it is visually prominent.

Reading measure and fluid type

Long lines slow scanning and make it harder to find the next line. The shared shell limits the reading measure while allowing the background and page structure to use the full viewport. Relative units let text respond to user font settings.

clamp() can keep a heading fluid between tested minimum and maximum sizes. The middle value should not make text grow so aggressively that words clip or the heading dominates intermediate widths. Body text still needs a comfortable fixed-relative size and line height.

Reflow and zoom behavior

Responsive content should follow available space rather than a list of device models. At narrow widths, padding reduces, lines wrap, and blocks remain in the same meaningful source order. At 200% browser zoom, content must remain available without two-dimensional scrolling.

Avoid fixed heights on text containers. They fail when a person enlarges text, when copy changes, or when fonts load differently. Use max-width for measure, min-height only when a control needs a target floor, and let articles grow vertically.

Test notes

• Keyboard: move through every link without a trap or hidden focus.
• Responsive: inspect 320, 768, and 1440 CSS pixels.
• Zoom: test 200% browser zoom and text-only enlargement.
• Preferences: check dark mode, reduced motion, and forced colors if supported.
• Failure: disable CSS and confirm the article remains readable in source order.
• Dependencies: none.

Common failure modes

Watch for a hero title that clips on long words, a fixed sidebar that covers the article, code or tables wider than the viewport, and images without intrinsic dimensions that shift the page while loading. Sticky headers must not obscure focused links or anchored headings.

Responsive images need explicit dimensions, useful alternative text, and source choices that do not download an unnecessarily large file on a small screen. Those concerns are outside this text-only preview but belong in a production article.

Known limitation

This focused sample does not demonstrate responsive images or a complete site footer.