Responsive Layouts and Media Queries

Responsive design means your website layout adapts to different screen sizes and device capabilities (phone, tablet, laptop, large desktop) without breaking, overlapping, or becoming hard to use. The goal is a layout that is flexible by default, and only changes when it needs to.

---

1) Mobile-first design (build from small to large)

Mobile-first means you start styling for small screens first, then add enhancements for larger screens using media queries.

Why this works well:

• Most layouts are simplest on mobile (single column, larger touch targets).
• It improves performance (you load and render fewer heavy layout rules first).
• It encourages better content prioritisation.

Key idea: your base CSS (outside any media queries) should work on mobile.

Example (base styles = mobile):

/* Base (mobile-first) */
.page {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.sidebar {
  display: none; /* hide on small screens */
}

Then you enhance for wider screens:

@media (min-width: 768px) {
  .page {
    grid-template-columns: 1fr 300px;
    align-items: start;
  }

  .sidebar {
    display: block;
  }
}

---

2) Viewport basics (so your layout scales correctly on mobile)

For responsive CSS to behave properly on phones, ensure your HTML includes the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Without this, mobile browsers may “pretend” the screen is wider, making text and layouts appear zoomed out and too small.

---

3) Flexible layouts: fluid sizing and modern layout tools

Responsive layouts rely on relative units and flexible containers, not fixed pixel widths everywhere.

Use percentages, rem, vw, and clamp()

• % works well for widths inside a container.
• rem scales with the user’s font size (good for accessibility).
• vw relates to viewport width (use carefully).
• clamp(min, preferred, max) helps create fluid sizes with limits.

Example: fluid headings that don’t get too small or too big

h1 {
  font-size: clamp(1.6rem, 2.5vw, 2.6rem);
}

Prefer Flexbox and Grid over floats

• Flexbox is best for one-dimensional layouts (row OR column).
• CSS Grid is best for two-dimensional layouts (rows AND columns).

---

4) Flexible grids (responsive structure)

A “grid” doesn’t have to mean a 12-column system. The aim is consistent spacing and adaptable columns.

Example: responsive card grid using CSS Grid

This pattern automatically adds columns as space allows:

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

What this does:

• Each card must be at least 220px.
• The browser fits as many columns as will fit.
• When the screen is narrow, it naturally becomes one column.

This often reduces how many media queries you need.

---

5) Breakpoints (when and how to choose them)

A breakpoint is a point where the layout needs to change to remain usable and attractive.

Avoid “device-based” breakpoints

Instead of targeting specific phones (which change all the time), set breakpoints based on:

• where your content starts to look cramped
• where line lengths become too long
• where navigation or columns stop working

A practical set to start with (adjust based on your design):

• ≥ 480px: small phones / larger phones
• ≥ 768px: tablets
• ≥ 1024px: small laptops
• ≥ 1280px: larger screens

---

6) CSS media queries (core technique)

Media queries let you apply CSS only when certain conditions are true.

The most common: min-width

Mobile-first typically uses min-width:

/* Base styles: phones */
main {
  padding: 1rem;
}

/* Tablets and up */
@media (min-width: 768px) {
  main {
    padding: 2rem;
  }
}

/* Desktops and up */
@media (min-width: 1024px) {
  main {
    max-width: 1100px;
    margin: 0 auto;
  }
}

Use max-width carefully

max-width can work, but it’s usually easier to maintain mobile-first with min-width. If you do use max-width, keep it consistent.

---

7) Responsive navigation patterns

Navigation often needs layout changes across screen sizes.

Common approach:

• Mobile: stacked links or a menu button (hamburger)
• Desktop: horizontal navigation bar

Example (simple responsive nav layout):

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

Tip: If you use a toggle button for mobile menus, make sure it’s accessible (keyboard and screen reader friendly). That is covered more deeply in the accessibility topic, but plan for it in your layout.

---

8) Responsive images (prevent overflow and wasted data)

Images must scale to fit their containers and remain clear.

Make images fluid

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

This prevents images from overflowing smaller screens.

Use srcset and sizes for different resolutions

This helps the browser download the most suitable image size, improving performance.

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1024px) 80vw, 1100px"
  alt="A person using a laptop at a desk"
/>

What this means:

• The browser chooses the best image from the srcset list.
• sizes tells the browser how wide the image will likely be at different screen widths.

Responsive background images (use with care)

Background images in CSS don’t support alt text, so don’t use them for important content.

.hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
}

---

9) Responsive typography and readable line lengths

Text is part of responsiveness. If text becomes too wide, it becomes harder to read.

Good practices:

• Keep paragraph line length roughly 45–90 characters
• Use scalable units (rem, clamp())

Example:

.content {
  max-width: 70ch; /* 'ch' relates to character width */
}

---

10) Testing responsive layouts (practical workflow)

Responsive issues are easiest to fix early if you test continuously.

Recommended workflow:

1. Build the mobile layout first.
2. Resize your browser gradually (not only at fixed widths).
3. Use DevTools device emulation, but also test on a real phone when possible.
4. Check:
   • no horizontal scrolling
   • buttons and links are not too small
   • spacing is consistent
   • navigation and forms remain usable

Quick debugging tip:

* { outline: 1px solid rgba(255, 0, 0, 0.2); }

Temporarily outlining elements helps you spot unexpected widths or overflowing items.

---

11) Common responsive problems and fixes

Problem: horizontal scrolling on mobile

Common causes:

• fixed-width elements (e.g. width: 1200px)
• long unbroken text (URLs, code)
• images not set to be fluid

Useful fix for long text:

p, a {
  overflow-wrap: break-word;
}

Problem: layout breaks at “in-between” widths

Fix:

• use flexible patterns (auto-fit, minmax())
• add a breakpoint where content needs it (not where a specific device suggests it)

Problem: columns too tight on tablets

Fix:

• increase spacing (gap)
• change from 3 columns to 2 columns at an appropriate breakpoint

---

Practice: Build a responsive section (mini task)

Create a “Services” section that:

• shows 1 column on phones
• shows 2 columns on tablets (≥ 768px)
• shows 3 columns on desktops (≥ 1024px)
• uses fluid images and consistent spacing

Start with Grid:

.services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .services {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .services {
    grid-template-columns: repeat(3, 1fr);
  }
}

---

Key takeaways

• Start with a mobile layout, then enhance using @media (min-width: ...).
• Use flexible units and modern layout tools (Flexbox and Grid).
• Choose breakpoints based on content needs, not specific devices.
• Make images responsive (max-width: 100%) and consider srcset for performance.
• Test across a range of widths and fix overflow early.