Responsive Web Design: Layouts That Adapt

A visitor might open your site on a small phone on a train, a tablet in landscape on the sofa, a laptop with the browser half the width of the screen, or a large monitor at the office. They expect it to work on all of them without pinching, zooming or sideways scrolling. Responsive web design is the approach of building one site whose layout, images and interactions adapt to the space and device available. This guide explains the building blocks, from the viewport setting and fluid layouts to media and container queries and responsive images, shows a practical CSS pattern, and covers how to test and avoid the mistakes that make responsive sites feel broken.

What responsive web design means in practice

A responsive site is one codebase that adapts, rather than a separate mobile site. Content reflows to fit the width available, images are served at sizes suited to the screen, and touch targets and text remain usable. The goal is not identical appearance everywhere; it is that every visitor can read, navigate and complete tasks comfortably.

Responsive design overlaps with, but is not the same as, mobile-first design. Mobile-first is a way of working, starting with the smallest screen and adding layout as space allows. Our guide to mobile-first web design covers that approach for service businesses; this guide focuses on the techniques that make any layout adapt.

Start with the viewport

Mobile browsers render pages in a virtual viewport wider than the screen unless told otherwise, which is why some sites appear zoomed out on phones. MDN's viewport reference recommends a meta tag setting the viewport width to the device width. Without it, none of the other techniques behave as expected on phones.

Fluid layouts instead of fixed widths

Fixed pixel widths are the main cause of sideways scrolling. Modern CSS layout tools adapt naturally:

• Flexbox for one-dimensional arrangements, such as navigation bars or rows of cards that wrap
• Grid for two-dimensional layouts, including grids that fit as many columns as space allows
• Relative units and functions, such as percentages, rem, min(), max() and clamp(), so sizes scale with the container or text size
• A maximum width on text columns so lines do not become too long to read on large screens

Many layouts need surprisingly few breakpoints when built this way.

Media queries and container queries

Media queries apply styles based on characteristics of the device or viewport, most commonly its width. MDN's guide to using media queries describes both the familiar min-width and max-width form and the newer range syntax. Choose breakpoints where your content starts to look wrong, not at the widths of particular devices.

Container queries solve a different problem. A card component might appear in a wide main column and a narrow sidebar on the same page. Media queries only know the viewport width; container queries let the component respond to the width of its own container. MDN's container queries guide explains declaring a container with the container-type property and writing @container rules.

Responsive images

Images are often the heaviest part of a page. Sending a large desktop image to a phone wastes data and slows loading. MDN's guide to responsive images explains the srcset and sizes attributes, which offer the browser several versions of an image and hints about how wide it will be displayed, so it can pick the right file. The picture element handles art direction, such as a tighter crop on small screens. Always set width and height, or an aspect ratio, so the page does not jump as images load. Frameworks such as Next.js can generate these variants automatically; our guide to Next.js and Tailwind covers that setup.

Worked example: a responsive card grid with a container query

The simplified, untested CSS below creates a grid of service cards that fits as many columns as space allows, and changes each card's internal layout based on the card's own width rather than the viewport. Class names are placeholders.

/* Grid fits as many 16rem-wide columns as the space allows */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: 1.5rem;
}

/* Each card is a size container for its own content */
.card {
  container-type: inline-size;
  padding: clamp(1rem, 3vw, 1.5rem);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* When a card is wide enough, place image and text side by side */
@container (width >= 28rem) {
  .card__body {
    flex-direction: row;
    align-items: center;
  }
  .card__image {
    flex: 0 0 40%;
  }
}

/* Comfortable reading width for long text on large screens */
.prose {
  max-width: 65ch;
}

No device-specific breakpoints are needed: the grid adapts to the viewport, and each card adapts to the space it is given, whether in the main column or a sidebar.

Design for touch and zoom

Responsive web design is also about interaction. Links and buttons need enough size and spacing to tap accurately; WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels at level AA, with exceptions. Hover-only menus and tooltips do not work on touch screens, so provide another way to reach the same content. Users who zoom should not lose content: WCAG 2.2's Reflow criterion asks that content work without two-dimensional scrolling at a width equivalent to 320 CSS pixels, apart from content that genuinely needs a two-dimensional layout, such as data tables or maps.

Handle tables, forms and navigation

Some elements resist reflowing. Wide data tables can scroll horizontally inside their own container, so the rest of the page stays put, or be restructured so each row becomes a stacked card on narrow screens. Forms should use a single column on small screens, with labels above fields and input types that bring up the right keyboard, such as numeric or email. Navigation with many items usually needs a collapsible menu on small screens; make sure the menu button is labelled, reachable by keyboard and announces whether it is open.

Test on real conditions

Browser developer tools can simulate screen sizes, which is useful while building. Before launch, also test:

• On at least one real phone and tablet, on mobile data as well as Wi-Fi
• With the browser window resized gradually from wide to narrow, watching for awkward in-between widths
• At high zoom levels and with larger default text
• With a keyboard only, since layout changes can break focus order
• Key tasks end to end, such as filling in a form or completing a purchase, on a small screen

Common mistakes in responsive sites

• Missing the viewport meta tag
• Fixed-width elements, such as tables or embeds, causing sideways scrolling
• Breakpoints chosen for specific devices rather than content
• One large image served to every screen size
• Navigation that only works with hover
• Testing only in desktop browser simulation

Frequently Asked Questions

What is responsive web design?

It is building a single website whose layout, images and interactions adapt to different screen sizes and devices, so it works well on phones, tablets and desktops.

What is the difference between media queries and container queries?

Media queries respond to the viewport or device, such as its width. Container queries let a component respond to the size of its own container, so it adapts wherever it is placed.

How do you make images responsive?

Use the srcset and sizes attributes, or the picture element, so the browser downloads an appropriately sized image, and set dimensions to prevent layout shift.

How many breakpoints does a responsive site need?

As few as your content needs. Fluid layouts with grid, flexbox and container queries often need only a handful, placed where the content starts to break.

Build a site that works on every screen

We design and build responsive websites and web applications that adapt cleanly to any device. See our custom app development services, or talk to us about your site.

About the Author

Manav Sharma is the founder of Insyrge and a CRM solutions architect. He works across Zoho, Salesforce, HubSpot, Odoo and more, designing the CRM setups, integrations and automations that keep sales and operations teams working from the same data.