Free tools Windows power users keep installed
One-click scans. No signup required.
Make a website mobile responsive by giving the browser the correct viewport, building a layout that can shrink and wrap, adding content-led layout changes where needed, and checking the result at narrow and wide widths. You do not need a separate template for every phone: responsive design uses flexible layout and media behavior to keep content usable across screen sizes.
Start with the content and its narrow-screen reading order
Write the page in a logical document order that still makes sense when it flows into one column. Start with normal document flow or a single-column layout on narrow screens, then add columns or sidebars when there is room. This keeps the reading order understandable as the visual layout changes. MDN’s responsive design guide describes flexible grids, images and media queries as foundational techniques, alongside modern CSS layout.
Responsive design is an approach, not a device-specific set of templates. A region can adapt naturally with Grid or Flexbox; use a breakpoint when the content needs a different arrangement.
Set the mobile viewport
Put this element inside the document’s <head>:
<meta name="viewport" content="width=device-width">It tells mobile browsers to use the device width as the page viewport. Without it, some mobile browsers may lay out the page against a wider viewport, so narrow-screen media queries do not behave as expected. See MDN’s explanation of the viewport.
#1 Best Overall
Build a flexible base layout
Avoid fixed desktop widths that force a phone user to scroll sideways. Let layout regions grow, shrink or wrap using normal flow, Grid or Flexbox. For example, a two-column section can become one column when its available space is too small:
<main class="page">
<article>
<h1>Page title</h1>
<p>Main content goes here.</p>
</article>
<aside>Related information</aside>
</main>.page {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
gap: 2rem;
max-width: 72rem;
margin-inline: auto;
padding: 1rem;
}
@media (max-width: 48rem) {
.page {
grid-template-columns: 1fr;
}
}This is an example, not a universal breakpoint or a required recipe. The minmax(0, ...) sizing lets the main grid track shrink without its contents forcing overflow. The 48rem query is appropriate only if your content starts to feel cramped around that width. W3C documents CSS Grid and Flexbox as techniques that can support reflow when used appropriately.
Add breakpoints where the content needs them
Begin with the narrow layout, widen the viewport, and look for the point where text lines become uncomfortable, columns crowd each other, or a component would work better in a different arrangement. Add a media query at that point rather than choosing breakpoints to match a catalog of phone models. Some Grid and Flexbox layouts adapt without any media query; others need an explicit change. MDN covers media query fundamentals and recommends content-led decisions.
Relative units such as rem are often useful for breakpoint rules. Treat any sample value as a starting point to evaluate against your own content, not a universal standard.
Keep images and media within their containers
Use a basic responsive rule so media cannot exceed the width available to it:
img,
picture,
video {
max-width: 100%;
}For images, srcset and sizes can offer alternate resource sizes, while <picture> can select a different source or crop. A large image scaled down may still waste bandwidth, and a wide-layout crop may not communicate well on a small screen. Choose the appropriate source and crop for the content; MDN’s responsive design guide explains these options.
Check the page across widths and zoom
Resize the browser or use its responsive-sizing tools. Inspect a narrow phone-like width, an intermediate width and a wide desktop width. At each, check whether content is clipped, media overflows, text wraps awkwardly, or any functionality or control becomes inaccessible.
For an accessibility target, WCAG 2.1 Success Criterion 1.4.10 Reflow is Level AA. For vertically scrolling content, it calls for presentation without loss of information or functionality and without two-dimensional scrolling at a width equivalent to 320 CSS pixels. The criterion explains that this corresponds to a 1280 CSS pixel starting viewport at 400% zoom. It allows an exception for content whose meaning or use inherently requires two-dimensional layout; examples include maps, diagrams, video, games and data tables. That exception concerns the relevant content, not ordinary page content. These are criterion dimensions, not evidence that a particular site has been tested or conforms. See the WCAG 2.1 standard and W3C’s Understanding Reflow guidance.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Common responsive-layout problems
- Phone still shows a desktop-sized page: Check that the viewport meta element is in the document head and that its content includes
width=device-width. - The page scrolls horizontally: Find the element wider than its container. Look for fixed widths and oversized media; allow layout regions to shrink or wrap and constrain images and video.
- Columns are cramped: Let the component use more width or add a content-led breakpoint that changes it to one column. Do not assume every device model needs its own rule.
- A breakpoint seems ineffective: Confirm that the viewport is being interpreted as intended, then inspect the query’s width and the cascade for conflicting CSS.
- The page fits, but an image looks wrong: Use an appropriate responsive source or crop rather than only shrinking a wide-layout image.
Or skip the browser setup
For a screenshot of a responsive page at a chosen URL and viewport, ScreenshotNeo offers a one-request API. This captures a page; it does not replace implementing and checking the layout at different widths.
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Cookie banners, popups and chat widgets are removed before the shot; bot checks, blank pages and failed loads are never billed. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo, or sign up free.
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.
