< Back to Course

INF-250: Web Design and Development — Responsive Design, Layout Patterns

Media Query Review

A media query is a block of CSS that only applies when a condition is met — most commonly a screen width. Everything outside the @media block applies at all sizes; everything inside only applies when the condition is true. 

/* Styles outside apply at ALL screen sizes */
h1 {
    font-size: 3rem;
}

/* Styles inside only apply when the condition is true */
@media (max-width: 600px) {
    h1 {
        font-size: 1.75rem;
    }
}
  • max-width: 600px — apply these styles when the screen is 600px wide or narrower (phones)
  • min-width: 768px — apply these styles when the screen is 768px wide or wider (tablets and up)
Media query styles don't replace your base CSS — they add to or override it. The normal rules of the CSS cascade still apply.

Exercise 1 — Heading Overload

Open in CodePen

Exercise 2 — Attack of the Sidebar

Open in CodePen

Exercise 3 — Navigation Overflow

Open in CodePen

Exercise 4 — Image Gallery

Open in CodePen

Responsive Design Principles

  • Big header navigation reduces to a "hamburger menu" on smaller screens
  • "Nice to have" design elements become hidden
  • Horizontal layouts stack vertically
  • Font sizes retain their readability
  • Buttons, links, and interactive elements remain sized appropriately for interaction
  • Keep important content front and center

Group work: Local University Responsiveness

Find breakpoints and analyze what works and what doesn't.