Free tools Windows power users keep installed
One-click scans. No signup required.
Make an HTML page responsive by letting its layout adapt to the viewport: use flexible columns that can wrap or stack, constrain images to their containers, and add media queries where the content needs a different arrangement. Then inspect the page at narrow widths, including the equivalent of 320 CSS pixels, and check that content remains usable without horizontal scrolling.
Start with a viewport that matches the device
For a page to use the device’s viewport width rather than a wider desktop-style layout scaled down, include this element in the document’s <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">This setting is the starting point, not a responsive layout by itself. The layout still needs CSS that can accommodate different available widths.
Build the layout to adapt instead of fixing every column
Choose CSS Grid or Flexbox based on the shape of the layout. Both can support reflow; neither is automatically best for every page. W3C documents Grid with media queries as one approach to reflow, and also describes Flexbox as a way to let regions grow, shrink, or wrap. These techniques are examples, not exclusive requirements. W3C technique C32 and W3C technique C31 explain those approaches.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problems#1 Best Overall
Example: a two-column page that stacks on narrow screens
This complete example has a main article and a sidebar. Its 48rem breakpoint is an example chosen for this layout, not a universal device width. Adjust it when the content no longer fits comfortably.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive article layout</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
.page {
width: min(100% - 2rem, 70rem);
margin-inline: auto;
}
.layout {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
gap: 2rem;
padding-block: 2rem;
}
main, aside { min-width: 0; }
img, video {
max-width: 100%;
height: auto;
}
@media (max-width: 48rem) {
.layout { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="page">
<header><h1>A responsive page</h1></header>
<div class="layout">
<main>
<h2>Article</h2>
<p>The main content can use the available width.</p>
<img src="example.jpg" alt="A description of the image">
</main>
<aside>
<h2>Related information</h2>
<p>This region moves below the article at a narrow width.</p>
</aside>
</div>
</div>
</body>
</html>minmax(0, 2fr) allows the main track to shrink rather than letting its minimum content size force the grid wider. min-width: 0 on the grid items can also help long content fit within its track. The min() expression keeps the page within the viewport while limiting its width on larger screens.
Use Flexbox when items should flow in a row or wrap
Flexbox is useful for a row of controls, cards, or navigation items that can wrap when they run out of room. For example:
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
flex: 1 1 16rem;
min-width: 0;
}Each card can grow, shrink, or move to a new line. If the layout has a clear two-dimensional relationship between rows and columns, Grid may be easier to describe; if items primarily flow along one axis and wrap, Flexbox may be simpler. Check the actual content at narrow widths before settling on either.
Recommended Free Tools
Use media queries when the content needs a different arrangement
A media query lets CSS respond to viewport conditions. Use one when a layout that works at a wider width becomes cramped or confusing, such as when a sidebar should move below an article or a multi-column list should become one column. Breakpoints should respond to the content’s needs, not merely to a list of device models.
Start with the simpler flexible rule—such as wrapping or a fluid grid—and add a breakpoint for a change in structure only when needed. This avoids maintaining a separate fixed layout for every screen width. W3C describes responsive design as adjusting or relocating content to fit smaller viewports. W3C’s explanation of Reflow discusses that goal.
Keep images and other content inside their regions
An image with a fixed width larger than its container can create horizontal overflow. A common baseline is img { max-width: 100%; height: auto; }: the image can shrink to fit its containing region while retaining its proportions. W3C’s C37 technique describes using maximum width and height behavior to fit images within a layout region.
Inspect more than images. Long URLs, unbroken strings, code blocks, embedded media, and wide controls can also exceed their containers. Wrap or constrain such content where appropriate. Do not hide overflow across the entire page just to conceal a layout problem; that can make content unreachable. If a particular item genuinely needs two-dimensional interaction, handle that item deliberately rather than allowing it to widen the whole page.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Preserve reading and keyboard order
Responsive CSS can change where regions appear visually, but the document order should still make sense when read from top to bottom and when navigating by keyboard. Avoid using Flexbox ordering to make a region appear in a sequence that conflicts with its position in the HTML: keyboard navigation follows the underlying content order, which may then feel disconnected from what is shown. W3C highlights this concern in technique C31.
Prefer a sensible source order in the markup and let stacking or wrapping preserve that sequence. After changing a layout, use the keyboard to move through links and controls at both wide and narrow widths.
Check the page at the WCAG reflow width
WCAG 2.2 Success Criterion 1.4.10, Reflow, requires vertically scrolling content to work at a width equivalent to 320 CSS pixels without loss of information or functionality and without requiring scrolling in two dimensions. For horizontally scrolling content, the criterion specifies a height equivalent to 256 CSS pixels. It has an exception for parts that require two-dimensional layout for use or meaning; the exception applies to those parts, not automatically to the entire page. The exact criterion is in the WCAG 2.2 specification.
- Open the page in a browser’s responsive or device-emulation view, or resize the browser window.
- Set the viewport to the equivalent of 320 CSS pixels wide and inspect ordinary vertically scrolling content.
- Scroll through the full page. Look for clipped text, missing controls, overlapping regions, and page-level horizontal scrolling.
- Test interactive elements with a keyboard as well as by touch or pointer; check that their visual positions and focus order remain understandable.
- Repeat at intermediate widths, where a desktop layout may be too tight but the narrow layout has not yet taken over.
This is a practical check against the stated reflow condition, not proof by itself that a page conforms to all of WCAG. Maps, data tables, video, games, and diagrams are examples of content that may need two-dimensional layout; make sure any such exception is limited to the relevant component.
Common responsive-layout problems and fixes
- The page is wider than the viewport: inspect wide images, fixed-width columns, long unbroken text, embedded content, and grid items’ minimum sizes. Constrain the offending element or let its layout track shrink.
- Columns become cramped before they stack: move the breakpoint to the width where the content stops fitting, or use a fluid/wrapping layout so it can adapt between the two arrangements.
- An image is clipped or distorted: let it scale within its container and retain its aspect ratio with
max-width: 100%andheight: auto. - Visual order and keyboard order disagree: revise the source order or layout so the sequence remains meaningful; do not rely on visual reordering alone.
- A table or diagram still needs two dimensions: keep the specialized component usable on its own and prevent it from making unrelated page content require horizontal scrolling.
- The narrow view works but intermediate widths do not: inspect several widths rather than only a phone-sized and desktop-sized view. Let the content determine where a structural breakpoint belongs.
Or skip the browser setup
You can inspect a rendered page with ScreenshotNeo, a website screenshot API and MCP server for developers. Its capture can accept cookie or consent banners and remove known consent platforms, newsletter popups, and chat widgets before taking the shot; those steps can be turned off. Its response identifies page verdict and billing headers, and bot checks or failed captures are not billed. The MCP server provides screenshot and page-info tools for AI agents.
One GET request can return a screenshot. The following cURL example saves a WebP image of the responsive page; replace the URL with your page’s publicly reachable address and provide an API key:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for request options, including viewport settings useful when capturing different page widths. ScreenshotNeo has a free plan with 1,000 shots a month and no card required; paid plans start at $5 for 3,000 shots. Learn about ScreenshotNeo or sign up free for 1,000 screenshots a month, with no card.
Frequently Asked Questions
Does a responsive page need a separate mobile HTML file?
No. The example uses one HTML document and CSS rules that adapt its layout.
Does passing the 320 CSS-pixel reflow check establish full WCAG conformance?
No. Reflow is one WCAG success criterion; conformance involves other applicable criteria too.
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.
