Responsive Web Design

Understand the core principles of responsive design — mobile-first thinking, fluid layouts, flexible images, breakpoints, and the viewport meta tag — so pages work well on any screen size.

Your site will be opened on a phone with a 360px-wide screen, a tablet, a laptop, and a 32-inch monitor — sometimes all by the same person in the same day. Responsive web design is the practice of building one set of HTML and CSS that adapts gracefully to all of these, instead of building separate sites for 'mobile' and 'desktop'. It's not a single CSS property; it's a way of thinking about layout, sizing, and content priority that you'll apply throughout the rest of this module.

What 'responsive' actually means

A responsive page changes its layout, sizing, and sometimes its content in response to the size of the viewport (the visible browser window). A three-column layout on a desktop might become a single stacked column on a phone. A large hero image might shrink to fit a small screen instead of forcing the user to scroll sideways.

This is different from having 'a mobile site' at a separate URL like m.example.com. Responsive design uses the same HTML document and the same CSS file(s) for every device — the CSS itself contains the rules that adapt the layout, mainly through media queries (covered in the next lesson), relative units, and flexible layout systems like Flexbox and Grid.

Mobile-first: design small, then grow

Mobile-first means you write your base CSS — the styles with no media query at all — to target the smallest, simplest screen first. Then you use media queries with min-width conditions to add complexity as the screen gets bigger. This is the opposite of the old 'desktop-first' approach, where you built the full desktop layout and then used max-width media queries to strip things down for small screens.

Mobile-first is preferred for a few concrete reasons. First, it forces you to prioritize: on a small screen there's no room for six navigation links and three sidebars, so you're forced to decide what actually matters and build the core experience around that. Second, it tends to produce less CSS that has to be undone — desktop-first often means writing a wide-screen rule and then writing an override to cancel it out for phones, which is wasted code. Third, mobile devices are now the majority of web traffic for most sites, so it makes sense to optimize the base case for the audience that is largest.

In practice, mobile-first CSS looks like this: unadorned selectors (.card { }) describe the phone layout, and @media (min-width: 768px) { .card { } } blocks layer on enhancements for larger screens — a change from a single column to a grid, larger font sizes, a visible sidebar that was hidden on mobile, and so on.

Fluid layouts: stop hardcoding pixels

A fluid (or 'liquid') layout uses relative units — percentages, fr units in Grid, em/rem for spacing and text, vw/vh for viewport-relative sizing — instead of fixed pixel widths for the things that should stretch and shrink with the screen. A width: 960px container looks fine on a laptop but forces horizontal scrolling on a 360px phone. A width: 90% or max-width: 960px container adapts.

The most common fluid pattern is to combine a percentage-based fluid width with a fixed max-width cap: width: 100%; max-width: 1100px; margin: 0 auto;. This lets the container shrink to fit small screens while preventing lines of text from becoming absurdly wide (and hard to read) on very large monitors.

Flexible images and media

Images have an intrinsic pixel size, and by default an <img> renders at that size regardless of its container — which means a 1600px-wide photo can blow out a 320px-wide mobile layout and force horizontal scrolling. The standard fix is one CSS rule applied broadly: img { max-width: 100%; height: auto; }. This tells the browser 'never let this image be wider than its container, and scale the height proportionally so it doesn't distort.' The same pattern works for video and iframe embeds.

This single rule is one of the highest-value lines of CSS you can write — without it, images are one of the most common causes of broken mobile layouts.

Breakpoints

A breakpoint is the viewport width at which your layout's design changes noticeably — where you insert a media query to adjust the design. Common conventional ranges are roughly: small phones (under ~480px), phones/large phones (~480–767px), tablets (~768–1023px), and desktop (1024px and up), but there is no official standard — the right breakpoints for your project are wherever YOUR content actually starts to look cramped or awkwardly spaced, not a fixed industry number.

A good workflow is to build mobile-first without any media queries, then slowly widen your browser window and watch the design; the moment it starts to look bad (text lines too long, too much empty space, elements too small) is where you add a breakpoint. Designing breakpoints around your own content, rather than copying a list of 'standard device widths', produces a more robust result because it doesn't assume any particular device.

The viewport meta tag

None of this works without one crucial line in your HTML <head>: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Mobile browsers, by default, render pages at a fake desktop-width 'virtual viewport' (often 980px) and then zoom the whole thing out to fit the screen — this is why, without this tag, mobile Safari or Chrome shows your page tiny and zoomed out rather than actually responsive.

width=device-width tells the browser to set the viewport width to the actual width of the device in CSS pixels, and initial-scale=1.0 sets the initial zoom level to 100%. Without this meta tag, your media queries will not behave as expected on real mobile devices, because the browser is measuring against its fake 980px viewport, not the phone's real screen width.

• width=device-width — match the viewport to the device's actual width • initial-scale=1.0 — start at 100% zoom, no artificial scaling • Belongs in every HTML document's <head>, before any CSS that relies on media queries

The viewport tag and a basic fluid container

The viewport tag is HTML, not CSS — but responsive CSS silently fails without it. max-width on the container caps the width on huge screens while width: 100% lets it shrink on small ones.

<!-- In the <head> of every page -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* Mobile-first fluid container */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* All media, always */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

Code Examples

The base rule (no media query) is the simplest possible layout: one column, which works on any screen no matter how narrow. Each min-width query only adds complexity as more space becomes available — nothing needs to be undone or overridden.

This image will always fill its container's width (up to its own natural pixel size — max-width: 100% never upscales it beyond the original) and will never overflow, causing horizontal scrolling on small screens.

/* Base styles: one column, targets phones */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Enhancement: two columns once there's room */
@media (min-width: 600px) {
  .card-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Enhancement: three columns on wide screens */
@media (min-width: 1000px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hero-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

Mobile-first layering

Each breakpoint adds styles on top of the base — nothing is stripped away going up.

Base CSS (no media query)      →  applies to ALL screens
      │  smallest, simplest layout
      ▼
@media (min-width: 600px)      →  layers on tablet enhancements
      │  more columns, bigger type
      ▼
@media (min-width: 1000px)     →  layers on desktop enhancements
         full layout, sidebars, etc.

Important Rules

Always include <meta name="viewport" content="width=device-width, initial-scale=1.0"> in the <head>.

Write base (unadorned) CSS for the smallest screen, then use min-width media queries to enhance for larger screens.

Apply max-width: 100%; height: auto; to images, video, and iframes as a default.

Prefer relative units (%, fr, rem, vw) for anything that should scale; reserve fixed pixels for things like borders that should stay crisp.

Choose breakpoints based on where your own content breaks down, not a fixed list of 'device sizes'.

Why this matters commercially

Search engines including Google rank pages partly on mobile usability, and analytics on most consumer sites show more than half of traffic arriving from phones. A layout that only 'sort of works' on mobile — tiny tap targets, horizontal scrolling, unreadable text — directly costs conversions and search ranking. Responsive design isn't a nice-to-have feature; for most real projects it is the baseline requirement.

Hardcoding a fixed width defeats the purpose — it forces every device to pretend it's 1024px wide, which is exactly the fake-viewport behavior you're trying to escape..sidebar { display: none; } /* then un-hide with max-width for mobile */

Write the no-sidebar mobile layout as the base rule, then add the sidebar inside a min-width media query.

Desktop-first CSS that hides things for mobile via max-width often ships unnecessary desktop-only CSS to phones and creates more overrides to maintain than the mobile-first equivalent.

[Multiple Choice] Why is mobile-first CSS generally preferred over desktop-first CSS? A. Mobile-first CSS runs faster in every browser because phones have slower processors B. It forces prioritization of core content and typically avoids writing styles that later need to be undone for smaller screens C. Media queries only work when written with min-width, never with max-width D. Desktop browsers cannot render media queries at all

B. It forces prioritization of core content and typically avoids writing styles that later need to be undone for smaller screens — Mobile-first isn't about raw performance or a technical limitation of max-width queries (which work fine) — it's a design discipline that starts from the simplest, most constrained case and layers on complexity, which tends to produce leaner, more intentional CSS.

Take a two-column layout (grid-template-columns: 1fr 1fr;) written desktop-first with no media queries, and rewrite it mobile-first: the base CSS should be a single column, with a min-width media query adding the two-column layout for screens 700px and wider..layout { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 700px) {.layout { grid-template-columns: 1fr 1fr; } }

Start by deleting the two-column rule entirely and replacing it with grid-template-columns: 1fr; as the base. Then wrap the original two-column rule inside @media (min-width: 700px) { ... }.