A responsive landing page keeps every piece of content and every action usable while its layout adapts to the visitor’s viewport. Build it with a narrow-screen-first structure, flexible Grid or Flexbox regions, images that cannot overflow their containers, and testing at the WCAG 2.2 reflow width of 320 CSS pixels. Then measure loading, interaction, and visual stability separately with Core Web Vitals.
1. Define the page outcome before writing CSS
Write down the single action the page is intended to support—such as starting a trial, requesting a quote, or downloading a guide. Keep the heading, explanation, evidence, form or button, and legal/supporting text available at every viewport size. Responsive design changes arrangement, not meaning or functionality.
Use a simple content model
- Value proposition: a concise heading and supporting sentence.
- Primary action: a labeled link or button that remains keyboard accessible.
- Evidence: details users need to decide, such as capabilities, terms, or proof.
- Support: contact, privacy, and other required information.
The sources for this guide do not establish a universal hero, benefit, testimonial, or breakpoint sequence. Choose sections that answer your users’ questions rather than copying a fixed marketing formula.
2. Start with semantic, narrow-screen HTML
Use landmarks so the page remains understandable when columns collapse. A minimal structure is:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<header>...brand and navigation...</header>
<main>
<section class="hero" aria-labelledby="hero-title">...</section>
<section class="details" aria-labelledby="details-title">...</section>
</main>
<footer>...</footer>Put the primary action in a real <a> or <button>, provide labels for form controls, and preserve a logical reading order in the source. Do not make essential text available only inside hover states or decorative images.
3. Create a flexible layout with Grid or Flexbox
W3C documents CSS Grid with media queries and Flexbox as sufficient techniques for reflow. They are implementation choices; WCAG evaluates the resulting access to information and functionality.
Example Grid layout
:root { --gutter: clamp(1rem, 4vw, 4rem); }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; color: #17202a; }
.hero, .details { width: min(100% - 2 * var(--gutter), 72rem); margin-inline: auto; }
.hero { display: grid; gap: 2rem; padding-block: 3rem; }
@media (min-width: 48rem) {
.hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
}
.details { display: grid; gap: 1.25rem; padding-block: 2rem 4rem; }
@media (min-width: 42rem) {
.details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
The mobile rule is the default: content stacks in one column. At wider widths, columns appear only when the available space can support them. minmax(0, 1fr) prevents long content from forcing a grid track wider than its container.
Flexbox alternative
.action-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.card-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.card-row > * { flex: 1 1 16rem; min-width: 0; }
Allowing items to wrap is safer than relying on horizontal scrolling. Avoid fixed widths that exceed the viewport, and check that focus indicators remain visible after wrapping.
Recommended Free Tools
4. Meet the WCAG reflow requirement
WCAG 2.2 Success Criterion 1.4.10 (Level AA) says content must be presentable without loss of information or functionality and without two-dimensional scrolling at a width equivalent to 320 CSS pixels for vertically scrolling content. The criterion allows an exception where two-dimensional layout is essential to the content’s use or meaning. Read the standard at WCAG 2.2 and the explanatory guidance at Understanding Reflow.
Test reflow, not just device sizes
- Open the page in a desktop browser’s responsive-design mode.
- Set the viewport to 320 CSS pixels wide, then inspect every section.
- Confirm that headings, controls, error messages, navigation, and footer links are reachable without sideways scrolling.
- Zoom the page to 400% and repeat the check; text must not disappear behind clipped containers.
- Use keyboard navigation and a screen reader to verify that the source order still makes sense.
Do not treat 320 pixels as a recommended design breakpoint. It is a conformance test condition; choose breakpoints where your content needs them.
5. Keep images inside their layout region
Images can create overflow even when text reflows. W3C’s advisory fitting technique recommends sizing an image to its available region with a maximum width and appropriate height behavior (W3C C37).
img, svg, video, canvas { max-width: 100%; height: auto; }
.hero img { display: block; width: 100%; border-radius: .75rem; }
Give informative images useful alternative text and mark purely decorative images with an empty alt. If an image is a link or button, its accessible name must describe the action, not merely the file.
Rank #3
6. Make controls usable at every width
- Let button and input text wrap or grow rather than clipping it.
- Keep labels associated with controls and show validation errors next to the relevant field.
- Do not rely on color alone for status or required fields.
- Ensure the focus outline has sufficient contrast and is not hidden by overflow.
- When navigation collapses, provide a real toggle with an accessible name and a predictable keyboard order.
These checks complement reflow: a page can fit in 320 pixels and still make its form or navigation unusable.
7. Test performance separately from responsive layout
Responsive layout correctness does not prove fast loading or stable interaction. Google Search Central describes Core Web Vitals as real-user measures of loading, interactivity, and visual stability. Its “good” targets are LCP 2.5 seconds, INP 200 milliseconds, and CLS 0.1 (Core Web Vitals guidance).
- LCP: reduce blocking CSS and JavaScript, and avoid unnecessarily large hero assets.
- INP: keep click handlers and other main-thread work short, especially on mobile hardware.
- CLS: reserve image space with dimensions or an aspect ratio so content does not jump while assets load.
These are user-experience targets, not conversion guarantees and not a complete definition of responsive design. Measure representative pages with field data or a lab tool, then fix the largest cause.
8. A repeatable review checklist
- At 320 CSS pixels, all information and actions remain available without two-dimensional scrolling.
- At 400% zoom, text and controls reflow rather than becoming clipped.
- Grid or Flexbox tracks can shrink; no child has an accidental fixed width.
- Images, SVGs, videos, and canvases stay within their containers.
- Keyboard focus is visible and follows a sensible order.
- Labels, errors, names, and alternative text are exposed to assistive technology.
- Navigation and forms still work when columns stack.
- Performance is measured independently against LCP 2.5 s, INP 200 ms, and CLS 0.1 targets.
Or skip the browser setup
If you need screenshots while reviewing breakpoints, ScreenshotNeo can capture a URL through one request. It accepts consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchcURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);See the complete parameter reference in the ScreenshotNeo documentation. Every plan includes features such as full-page and element capture, device presets, custom viewports, retina scale, dark mode, PDF output, custom CSS and JavaScript, waits, request blocking, headers and cookies, geolocation, signed links, webhooks, bulk capture, caching, and a usage API. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Troubleshooting common failures
Horizontal scrolling appears
Use browser inspection to find the element wider than the viewport. Check long unbroken strings, fixed-width grids, transforms, and media without max-width: 100%. Replace the offending width with a flexible track or wrapping rule; do not hide the problem with global overflow-x: hidden.
A column collapses too early
Inspect the minimum content width of each child. Add min-width: 0 to grid or flex children, reduce fixed padding, or move the media query to the width at which the content actually fits.
Content is hidden at zoom
Look for fixed heights, clipped overflow, absolute positioning, and text embedded in background images. Let sections grow with their content and keep essential text in HTML.
The screenshot shows a popup or blank page
Consent dialogs, newsletter overlays, chat widgets, bot checks, failed loads, and blank pages can obscure a review capture. With ScreenshotNeo, these known overlays are removed before capture and unsuccessful page verdicts are not billed; inspect the X-Page-Verdict and X-Billed response headers when diagnosing a request.
Frequently Asked Questions
Is responsive design the same as mobile-first design?
No. Mobile-first is one implementation strategy that starts with the narrow layout. Responsive design is the resulting ability to preserve content and functionality across available viewport sizes.
Do I have to use CSS Grid?
No. W3C lists Grid and Flexbox as sufficient techniques, but the requirement concerns reflow outcomes, not a particular technology.
Does passing a 320-pixel test guarantee accessibility?
No. Reflow is one WCAG criterion. Keyboard access, names and labels, contrast, focus visibility, semantics, and other requirements still need separate review.
Free tools Windows power users keep installed
One-click scans. No signup required.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
