10 Multimedia · 2026
Week 7 · Lesson 13

Mobile-First Thinking and Media Queries

Week 7 · 75 minutes · Year 10 Industrial Technology — Multimedia

IND5-2IND5-3IND5-9

Learning intentions

  • I can explain what mobile-first design means.
  • I can write a media query to change styles at different screen widths.
  • I can test my page at phone, tablet, and desktop widths.

Success criteria

  • My CSS starts with mobile styles and uses min-width queries to add desktop styles.
  • My page works at 320px (phone), 768px (tablet), and 1440px (desktop).
  • Nothing overflows horizontally on a phone.

Do Now · 5 min

More than 60% of web traffic is on mobile phones. Your teacher tests this right now: open your school website on your phone and look at how it compares to desktop.

If the site doesn't work well on phone, people leave. Today we learn to design mobile-first.

I Do · ~10 min Teacher demonstration

Teacher explains mobile-first: write CSS for the smallest screen first, then use media queries to enhance for larger screens:

/* Base styles - applied to ALL screens (mobile-first) */
.nav {
  display: block;
  text-align: center;
}

.card-row {
  display: flex;
  flex-direction: column;  /* stacked on phone */
  gap: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  .card-row {
    flex-direction: row;    /* side-by-side on tablet+ */
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .nav {
    text-align: left;
  }
  body {
    font-size: 18px;
  }
}

Teacher opens DevTools → Toggle Device Toolbar (Ctrl+Shift+M) and resizes the exemplar at 320 / 768 / 1024 / 1440 pixels. Watch the layout adapt.

We Do · ~15 min Guided build

Together, convert an existing page to mobile-first. Start with:

.container {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.card { width: 100%; }      /* phone default */

@media (min-width: 640px) {
  .card { width: calc(50% - 1rem); }  /* 2 per row on tablet */
}

@media (min-width: 1024px) {
  .card { width: calc(33.333% - 1.5rem); }  /* 3 per row on desktop */
}

Test in DevTools device mode at each width.

You Do · ~35 min Independent practice

Take the recipe card from Assessment 1 (or your current portfolio) and make it responsive:

  1. Add the viewport meta tag to your HTML head if not already there
  2. Rewrite styles mobile-first (no fixed widths on phone)
  3. Add a 768px breakpoint for tablet adjustments
  4. Add a 1024px breakpoint for desktop adjustments
  5. Test at 320px (iPhone SE), 768px (tablet), 1440px (desktop) in DevTools
  6. Take 3 screenshots — phone, tablet, desktop

Differentiation

Support

Provided CSS with breakpoints pre-written. Student fills in the specific changes at each breakpoint.

Core

Complete the task independently.

Extension

Write a third 'ultra-wide' breakpoint (1600px+) with larger typography and wider max-width for premium desktop experience.

Exit Ticket · 5 min

Exit ticket

1. What does 'mobile-first' mean in one sentence?

____________________________________________________

2. Complete the media query for tablet+:

@media (_________________: 768px) { ... }

3. Upload 3 screenshots to Classroom (phone / tablet / desktop).

Resources for this lesson

📚 Deeper Reading

External references drawn from Shay Howe's "Learn to Code HTML & CSS" and University of Michigan's "Web Design for Everybody" Coursera specialization. All credit to original authors.