Mobile-First CSS: How to Build Responsive Websites

Build a responsive website by starting with a usable narrow-screen layout, then adding CSS changes only when the available space calls for a different arrangement. Use Grid or Flexbox to let content reflow, keep images and long strings from overflowing, and check that zoom and keyboard use preserve access to information and controls.

There is no universal set of breakpoint values. Choose each breakpoint by finding where the content or layout needs to change, not by targeting a particular device model. Responsive design combines fluid layout behavior with conditional styling. MDN’s responsive design guide covers this approach and the role of breakpoints.

1. Start with the narrow layout

Write the base styles for a narrow viewport first. Put the essential content in a meaningful reading order, let sections stack naturally, and make controls usable without requiring a wide screen. Then enhance the arrangement at widths where more space makes another layout clearer.

This is a workflow, not a requirement that every project be written in this order. Its practical benefit is that the base layout describes the compact case directly, while wider-screen rules add only the changes the design needs.

<main class="page">
  <header class="site-header">
    <a href="/">Site name</a>
    <nav aria-label="Main navigation">
      <a href="/guides">Guides</a>
      <a href="/about">About</a>
    </nav>
  </header>
  <div class="layout">
    <article>
      <h1>A page title that can wrap naturally</h1>
      <p>The main content comes first in the document.</p>
    </article>
    <aside aria-label="Related information">Related links</aside>
  </div>
</main>

2. Add breakpoints when content needs them

A media query applies rules when a browser or device condition matches. Viewport width is a common condition for responsive layouts; width ranges can be expressed with minimum or maximum width conditions. Pick the threshold by resizing the page and observing where the current arrangement becomes cramped, awkward, or unnecessarily sparse. MDN’s media query guide describes the conditions and syntax.

The example below has one content-driven breakpoint: the article and related content sit in a column by default, then use two columns once the available width can comfortably hold both.

/* Base styles: narrow viewport */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.page {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.layout {
  display: grid;
  gap: 1.5rem;
}

/* Add a second column only when this content has room for it. */
@media (min-width: 48rem) {
  .layout {
    grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
    gap: 2rem;
  }
}

The 48rem value is illustrative, not a standard breakpoint. Substitute the width at which this particular layout needs to change. Prefer a small number of meaningful changes over a collection of device-shaped presets; inspect the design at widths around each threshold as well as at the threshold itself.

3. Use Grid and Flexbox for reflow

Grid is useful when regions relate across rows and columns, such as a main column beside a sidebar. Flexbox is useful for a row or column of items that should distribute or wrap within the available space. Either can support layouts that adapt to the viewport; neither is categorically better for every responsive page. W3C’s Grid technique and Flexbox technique describe examples relevant to reflow.

/* A flexible row that wraps when the available space runs out. */
.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card-list > * {
  flex: 1 1 16rem;
  min-width: 0;
}

/* A grid that creates as many columns as comfortably fit. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}

Keep the DOM order useful for reading and keyboard navigation. CSS can make items appear in a different visual order, but a changed visual sequence may not match source reading order or keyboard focus order. Avoid using order or grid placement to make a fundamentally different content sequence unless the source order still makes sense. W3C discusses these concerns in its Grid and Flexbox techniques.

4. Prevent images and text from overflowing

Responsive containers do not help if their contents force a wider page. A common implementation is to constrain images to their containing block while preserving their aspect ratio. For long URLs or other unbroken strings, allow wrapping so a single token does not force horizontal scrolling. These are practical CSS implementations of the issues addressed by W3C techniques; they are examples, not a mandated single solution. See W3C technique C37 for image sizing and technique C33 for wrapping text.

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

/* Use on content areas that may contain URLs or user-provided strings. */
.article-content {
  overflow-wrap: anywhere;
}

/* Grid and flex children sometimes need this to shrink below min-content width. */
.layout > *,
.card-list > * {
  min-width: 0;
}

Use overflow-wrap: anywhere selectively: it can break long strings at otherwise unusual positions. For content whose formatting inherently requires two-dimensional layout, such as a wide data table, provide a suitable contained scrolling region and preserve access to that content instead of allowing it to expand the whole page.

5. Preserve access under zoom and keyboard use

Responsive layout is an accessibility concern as well as a visual one. WCAG 2.1 Success Criterion 1.4.10 says: “Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:” The criterion applies to vertically scrolling content at a width equivalent to 320 CSS pixels, and horizontally scrolling content at a height equivalent to 256 CSS pixels, except for parts that require two-dimensional layout for use or meaning. W3C explains that these equivalences relate to 400% zoom from specified starting viewport dimensions; they are not device-size requirements. Read the full WCAG Understanding Reflow guidance.

Resize the viewport until the content is equivalent to 320 CSS pixels wide. Check that information and functionality remain available without page-wide horizontal scrolling, except for content that inherently needs two-dimensional layout.
Increase text size or browser zoom. Check for clipped labels, overlapping controls, inaccessible content, and dialogs that extend beyond the visible area.
Use the keyboard to move through links and controls. Confirm the focus order follows a sensible sequence and remains visible.
Compare the visual arrangement with the document order. If they diverge, reconsider the markup or layout rather than relying on a visual reorder.

6. A practical responsive CSS checklist

Start with the essential content and a narrow-screen layout.
Choose breakpoints when the content needs a different arrangement; do not assume universal device widths.
Use Grid for related two-dimensional regions and Flexbox for wrapping rows or columns when those relationships fit.
Let images shrink within their containers and handle long strings deliberately.
Keep source, visual, and keyboard order understandable.
Check narrow widths, widths around each breakpoint, zoomed text, keyboard navigation, and any inherently two-dimensional content.

7. Troubleshooting common responsive layout problems

Symptom	Likely cause	Fix
The whole page scrolls horizontally on a narrow viewport	A fixed-width child, image, long unbroken string, or grid track is wider than its container.	Find the overflowing element; constrain media with `max-width: 100%`, allow long text to wrap, and let grid or flex children shrink with `min-width: 0`.
Columns look cramped before the breakpoint	The breakpoint was chosen for a device assumption instead of the content’s minimum comfortable arrangement.	Move the breakpoint to the width where the content needs a new layout, or keep the regions stacked longer.
A flex child refuses to shrink	Its min-content size, often from long text or a nested element, is constraining the flex item.	Set `min-width: 0` on the relevant flex item and wrap long strings in the content area.
Visual order differs from keyboard order	CSS ordering or placement changed the display sequence without changing source order.	Keep meaningful source order and adjust the layout so visual and focus sequences remain understandable.
Content disappears or controls overlap at high zoom	The layout or fixed dimensions do not accommodate the narrower effective viewport or enlarged text.	Use flexible sizing, allow wrapping, and retest at narrow widths and enlarged text; avoid fixed heights for content blocks.
A table causes horizontal scrolling	The content genuinely needs multiple dimensions to convey relationships.	Contain scrolling to the table region, keep it reachable, and ensure the rest of the page still reflows.

8. Performance, reliability, and maintenance

Mobile-first CSS is a layout strategy, not a performance guarantee. The research sources do not establish performance benchmarks for a particular breakpoint strategy. Keep the stylesheet understandable, avoid unnecessary overrides, and verify the actual page at the widths and zoom levels your content must support. Flexible layout rules reduce dependence on one exact viewport, while explicit checks catch overflow and ordering issues that a desktop-only review can miss.

There is no special runtime service or per-request cost required to use CSS media queries, Grid, or Flexbox. The main maintenance cost is keeping layout rules aligned with changing content. Revisit breakpoints when navigation, cards, sidebars, or text lengths change.

9. Capture responsive screenshots without setting up a browser

To review your own responsive pages, you can use a browser’s responsive viewport tools and inspect the layout at narrow and wide sizes, then test zoom and keyboard flow. When you need repeatable screenshots in a script, CI workflow, or AI agent, ScreenshotNeo is a website screenshot API and MCP server. Its API can capture a URL at a chosen viewport, device preset, or retina scale; use your own browser and layout checks to decide whether the CSS behaves correctly.

Or skip the browser setup

Make one GET request with the page URL and API key. This example captures a sample page; replace the URL with the page you want to inspect. See the ScreenshotNeo API documentation for configuration and response details.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

Cookie banners are accepted and removed before the screenshot; more than 60 known consent platforms, newsletter popups, and chat widgets are handled, and each step can be turned off.
Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing. Response headers identify the page verdict and billing status.
An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
The free plan includes 1,000 screenshots a month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is available on every plan.

10. Frequently asked questions

Is mobile-first CSS required?

No. It is a useful workflow for building from a narrow layout and adding wider arrangements as needed, but it is not the only way to make a responsive site.

Should I use Grid or Flexbox?

Choose based on the relationship among the items: Grid for row-and-column regions, Flexbox for a row or column that distributes or wraps. Either can support reflow.

What breakpoint should I use?

Use the width where your content needs a different arrangement. There is no universal breakpoint value established by the cited guidance.

Does responsive CSS mean the page must never scroll horizontally?

WCAG’s reflow criterion allows exceptions for content that inherently requires two-dimensional layout. Keep such content usable without letting it force unrelated page content to overflow.