Why Responsive Design Matters — The Modern Web is Mobile

Before you write a single media query, you need to understand the problem they solve. This lesson establishes why responsive design exists, what goes wrong without it, and what you will build by the end of this module.

What responsive design means

Responsive design is an approach to web development in which layouts, images, and typography adapt fluidly to any screen size and device type. A responsive website looks and works correctly on a phone held in portrait orientation, a tablet in landscape mode, a laptop, and a large desktop monitor — all from the same HTML and CSS.

This is not about building separate mobile and desktop websites. It is about building one website that reshapes itself intelligently.

The landscape of device sizes

Screens come in a wide range of widths:

Device	Typical viewport width
Small phones	320–375px
Large phones	390–430px
Tablets (portrait)	600–768px
Tablets (landscape) / small laptops	1024px
Laptops	1280–1440px
Large desktop monitors	1440px+

There is no single “mobile size” or “desktop size.” Your layout needs to work across this entire range — and at every width in between.

Why fixed-width designs fail on mobile

If you build a layout at a fixed width — say, with a container that is always 1100px wide — several things break on a 375px phone screen:

• Content overflows — the container is wider than the screen, causing a horizontal scrollbar
• Text is too small to read — the browser scales the page down to fit, making everything tiny
• Tap targets are too small — buttons and links are sized for mouse clicks, not fingertips
• Horizontal scrollbars appear — users must scroll both up-down and left-right, which is disorienting

None of these are cosmetic issues. They make the site unusable for a significant portion of your audience.

A brief history of responsive design

The original web was built for documents — pages read on desktop monitors. Mobile devices arrived, and early solutions were separate mobile sites (m.site.com) — a maintenance nightmare that led to inconsistent experiences.

In 2010, web designer Ethan Marcotte coined the term responsive web design in an influential article, and proposed a three-pillar model that is still the foundation of modern responsive CSS:

1. Fluid grids — layouts built with relative units that flex to fill available space, rather than fixed pixel widths
2. Flexible media — images and videos that scale with their container
3. Media queries — CSS rules that activate at specific viewport widths (breakpoints)

Every technique in this module is a direct implementation of one of those three pillars.

The three pillars of responsive design

Fluid layouts — use relative units (%, rem, vw) and layout systems like Flexbox so containers resize naturally as the viewport changes. You have already done much of this with flex-wrap and flex: 1 1 280px in Module 05.

Flexible media — one rule makes all images responsive:

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

This prevents images from ever overflowing their containers. height: auto maintains the aspect ratio as the width scales.

Media queries — CSS @media rules that apply styles only when a specified condition is true:

@media (min-width: 768px) {
  .site-nav {
    flex-direction: row;
  }
}

Lessons 04–06 cover media queries in depth.

What you will build in this module

By Lesson 06, the STO site will be fully responsive:

• The navigation bar collapses to a single column on mobile and expands to a horizontal row on tablet and above
• The tour card grid shows one card per row on mobile, two on tablet, three on desktop
• Typography scales down slightly on small screens
• The hero section adjusts its height for mobile
• Every image scales within its container

The analogy: a responsive website is like a collapsible travel bag — it holds the same contents but reshapes itself to fit the space available. A small space compresses everything into a single column. A large space expands to fill it with a multi-column layout.

Exercise

Use Chrome DevTools to identify what currently breaks on the STO site at mobile widths:

1. Open index.html in Chrome with your current CSS applied.

2. Open DevTools (F12) and click the Toggle Device Toolbar button (Ctrl+Shift+M on Windows, Cmd+Shift+M on Mac). This activates the responsive design mode.

3. Set the width to 375px (iPhone SE). Observe:

   • Does the navigation fit or overflow?
   • Do the tour cards stack or overflow horizontally?
   • Is the text readable without zooming?

4. Set the width to 768px (iPad). Note what changes compared to 375px.

5. Write down three things that break or look wrong at 375px. These are the specific problems this module fixes.

Recap

• Responsive design means layouts, images, and typography that adapt to any screen size — not separate mobile and desktop sites.
• Fixed-width designs fail on mobile: content overflows, text is too small, tap targets are too small.
• The three pillars of responsive design: fluid layouts, flexible media, and media queries.
• This module adds all three to the Summit Trail Outfitters site.

Lesson 02 covers CSS units — the full set of absolute and relative units, and when to use each one for responsive work.