Laurea University of Applied Sciences

WS05 – Responsive Design

Building websites that adapt to any screen size — mobile-first with CSS media queries

Welcome to WS05

This module builds on the page layout skills from WS04 and introduces responsive design — the practice of building websites that adapt to any screen size. Resize your browser window or open DevTools (F12) to see the layout change!

What you will find here

  1. Gallery – responsive image grid using auto-fit minmax()
  2. Contact – responsive form that adapts to screen width

New CSS features in WS05

  • CSS Custom Properties (variables)
  • Mobile-first min-width media queries
  • Fluid typography with clamp()
  • CSS-only hamburger navigation (checkbox hack)
  • repeat(auto-fit, minmax()) for fluid grids
  • Viewport units (vw, vh)

How to test responsive design

Open your browser's Developer Tools with F12 and click the device toolbar icon (phone/tablet icon). Try switching between different device presets or drag the viewport width manually. Watch the navigation, sidebar, and layout respond at 600px, 900px, and 1200px breakpoints.