Recommended Free Tools
Make an HTML page responsive by letting its layout adapt to the space available: use CSS Grid or Flexbox so content can shrink, wrap, or reflow; make images fit their containers; and use media queries when a layout needs to change at particular viewport widths. Then inspect the page at narrow widths, including the equivalent of 320 CSS pixels, and check that content, functionality, and reading order remain usable.
What responsive behavior should accomplish
A responsive page adjusts or relocates content to fit different viewport sizes. At a narrow width, a multi-column region might become one column; navigation or cards might wrap; and images should remain within their layout regions. The goal is not to make every element smaller. It is to keep the information and functions available without forcing ordinary content into two-dimensional scrolling.
WCAG 2.2 Success Criterion 1.4.10, Reflow, sets a specific check: vertically scrolling content should work at a width equivalent to 320 CSS pixels without loss of information or functionality and without requiring scrolling in two dimensions. It also defines a 256 CSS-pixel equivalent height for horizontally scrolling content. The criterion has an exception for parts that require two-dimensional layout for their use or meaning, such as some maps, data tables, video, games, and diagrams. That exception applies to the relevant part, not automatically to the entire page. Read the criterion in the WCAG 2.2 specification and its W3C explanation of Reflow.
Start with a layout that can reflow
A fixed arrangement of columns may fit a wide screen but overflow a narrow one. Use Grid or Flexbox to describe how regions fit and wrap, then add a media query if the design needs a different arrangement at a particular viewport width. These are options, not competing rules: choose based on the regions and relationships on your page.
#1 Best Overall
Use Grid when regions form a two-dimensional layout
Grid is useful when you want to control both columns and rows. The following example gives cards as many columns as will fit at a minimum width, then lets them become a single column when the available space is narrow. The exact minimum is a design choice, not a universal breakpoint.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1rem;
}
@media (max-width: 40rem) {
.page-layout {
grid-template-columns: 1fr;
}
}The W3C documents Grid with media queries as one technique for reflow. Its C32 technique is an example of a sufficient approach, not the only way to meet the criterion.
Use Flexbox when items should wrap or share a row
Flexbox is a good fit for rows of controls, navigation items, or cards that can wrap as room runs out. Set a sensible basis so items do not insist on keeping a width that exceeds their container:
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.toolbar > * {
flex: 1 1 12rem;
}Flexbox can let regions enlarge, shrink, or wrap. Avoid using visual ordering to create a sequence that differs from the meaningful document and keyboard sequence. A person navigating with a keyboard should encounter content in an order that still makes sense. See the W3C’s C31 technique for an example of Flexbox used for reflow.
Free tools Windows power users keep installed
One-click scans. No signup required.
Add breakpoints for a real layout change
A media query is useful when the current arrangement stops working, not merely because a particular phone model exists. For example, a sidebar and article may sit side by side on a wide screen and stack when the combined regions no longer fit:
.page-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 18rem;
gap: 2rem;
}
@media (max-width: 48rem) {
.page-layout {
grid-template-columns: 1fr;
}
}Here, the breakpoint is an example. Inspect your content and adjust it to the point where the two regions become cramped or cause overflow. The flexible first column can shrink, while the media query switches to a single column at narrower widths.
Keep images within their containers
An image whose intrinsic width exceeds its container can force the page wider than the viewport. A common baseline is to let images shrink to the width available while retaining their proportions:
img {
max-width: 100%;
height: auto;
}Apply the rule where it is appropriate for your content. If an image is intentionally cropped into a fixed-size card, that component may need its own sizing and cropping rules. W3C describes the max-width and height approach in technique C37.
Check the narrow layout and its reading order
Do not stop when the page looks good at desktop width. Inspect the whole page at narrow widths, including the WCAG 2.2 reflow target of 320 CSS pixels for ordinary vertically scrolling content. Check both visual fit and whether a person can still reach and use the same content and controls.
- Set a narrow viewport. Use your browser’s responsive inspection mode or resize the browser. Check a width equivalent to 320 CSS pixels, then inspect intermediate widths where columns or controls begin to crowd.
- Look for horizontal overflow. Scroll through the page and inspect long headings, code, navigation, cards, images, and embedded content. Identify which element extends beyond its available region rather than hiding overflow on the whole page as a cosmetic fix.
- Check functionality. Try the controls at the narrow width. Confirm that text is not clipped and that information or actions available at a wide width have not disappeared.
- Check sequence. Navigate through the page in its document and keyboard order. If visual placement changes, make sure the resulting sequence remains understandable and usable.
- Handle inherently two-dimensional content deliberately. A map or data table may need two-dimensional presentation. Keep that exception scoped to the part that needs it; do not let it justify avoidable horizontal scrolling across the surrounding article or page.
The 320-pixel figure is a WCAG threshold expressed in CSS pixels, not a guarantee that one physical device or every possible layout has been tested. W3C techniques illustrate possible implementations; using Grid, Flexbox, or a particular snippet alone does not establish that a page conforms.
Or skip the browser setup
If you want a screenshot of a page to inspect, ScreenshotNeo provides a website screenshot API and MCP server. Its API returns an image or PDF from one GET request. The cURL example below saves a WebP screenshot; replace the example URL with the page you are checking. See the ScreenshotNeo documentation for API options, including viewport settings.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the page verdict and billing status in headers. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for AI agents and MCP clients such as Claude and Cursor. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Sign up free for 1,000 screenshots a month, with no card required.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot common responsive-page problems
The page still scrolls sideways
Find the element that exceeds its containing region. Check oversized images, fixed-width columns, long unbroken text, navigation rows, and embedded two-dimensional content. Let ordinary regions shrink or wrap, and give a genuinely two-dimensional component its own contained treatment when needed. Avoid masking a page-wide overflow issue without finding its cause.
Columns become too cramped before the breakpoint
Change the breakpoint or make the regions more flexible. A breakpoint should reflect the point where your actual content no longer fits comfortably, not a device label. Recheck nearby widths after changing it; a layout can fail between the wide and narrow sizes you initially inspected.
The mobile visual sequence feels confusing
Review whether CSS ordering or placement has moved content away from its meaningful source and keyboard sequence. Prefer a source order that already makes sense when stacked, and use visual changes that do not make navigation jump unpredictably.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteAn image breaks the layout
Check whether it can shrink with max-width: 100% and height: auto. If a particular image is intentionally cropped or constrained, review that component’s own sizing rather than assuming the page-wide rule resolves every image treatment.
A table or map does not fit at 320 pixels
First decide whether that specific content genuinely requires two-dimensional layout for use or meaning. WCAG allows a scoped exception for such parts; it does not exempt unrelated page content. Keep the rest of the page reflowing and make the two-dimensional region’s treatment intentional.
Quick Recap
A practical completion checklist
- Layout regions can shrink, wrap, or reflow rather than retaining an inflexible multi-column arrangement.
- Images fit their available layout region where appropriate.
- Ordinary vertically scrolling content works at a 320 CSS-pixel equivalent width without loss of information or functionality or two-dimensional scrolling.
- Two-dimensional content exceptions are limited to the components that require them.
- Visual changes preserve a meaningful reading and keyboard sequence.
- Intermediate widths have been inspected, not just one wide and one narrow viewport.
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.
