10 Multimedia · 2026
Week 7 · Lesson 14

Responsive Images, Units, and Viewport

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

IND5-2IND5-3IND5-4

Learning intentions

  • I can use the viewport meta tag and explain what it does.
  • I can choose between px, rem, em, %, and vw appropriately.
  • I can make images scale with the page.

Success criteria

  • My images never exceed their container (max-width: 100%).
  • My typography uses rem units, not px.
  • I can explain when to use each CSS unit type.

Do Now · 5 min

Open a webpage on your phone. Tap a button. Is it the right size for your finger? Too small = frustrating. Too big = ugly.

Today we learn to write CSS that adapts to whoever is reading it — not the screen we designed for.

I Do · ~10 min Teacher demonstration

The viewport meta tag tells the phone browser NOT to pretend to be a desktop:

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

Without this, a phone renders the page at desktop width and shrinks it to fit, making everything tiny and unreadable. Every HTML page you build needs this tag.

CSS units:

px     /* absolute pixels - good for fine details like 1px borders */
rem    /* relative to root font size - use for font-size, spacing */
em     /* relative to parent - use inside components */
%      /* percentage of parent - use for widths */
vw     /* viewport width - use for hero sections */
vh     /* viewport height */
ch     /* width of '0' character - use for line-length (65ch) */
Rule of thumb for Year 10:
  • rem for font-size and spacing (margin, padding)
  • % or no-unit for widths inside containers
  • px only for borders and fixed details
  • ch for text column widths

Responsive images:

img {
  max-width: 100%;    /* never wider than parent */
  height: auto;       /* maintain aspect ratio */
}

We Do · ~15 min Guided build

Together, take a fixed-width design and make it fluid:

/* BEFORE - breaks on phone */
.hero { width: 1200px; padding: 48px; font-size: 32px; }

/* AFTER - fluid */
.hero {
  width: 100%;
  max-width: 1200px;
  padding: 3rem 1.5rem;
  font-size: 2rem;
}

Discuss: what's the difference between width and max-width?

You Do · ~35 min Independent practice

Audit your portfolio for responsive issues:

  1. Add viewport meta to every HTML file if not already there
  2. Find every width: Xpx and replace with either max-width or a %
  3. Convert all font-sizes from px to rem
  4. Add max-width: 100%; height: auto; to every img
  5. Test at 320px in DevTools — anything overflow horizontally?
  6. Fix all horizontal scroll issues

Differentiation

Support

Checklist with code snippets to paste. Student identifies which of their existing rules to replace.

Core

Full audit and fix.

Extension

Use clamp() for fluid typography: font-size: clamp(1rem, 2vw, 1.5rem). Explain what each value does in a comment.

Exit Ticket · 5 min

Exit ticket

1. What does the viewport meta tag do?

____________________________________________________

2. Which unit should you use for font-size? a) px   b) rem   c) %   d) vw

3. What two CSS lines make an image responsive?

______________________________

______________________________

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.