LESSON 12

Width and Height

Learning objective: Size elements with fixed and flexible units.

Understand

You can size elements in pixels or relative units.

width and height accept fixed units (px) or relative ones (%, vw, vh). Relative units adapt to the screen. max-width is especially useful to keep content readable on large screens.

Analogy: Fixed sizes are like a rigid frame; relative sizes are like elastic that stretches with the screen.

See It in Action

A responsive-friendly width:

.container {
  width: 90%;
  max-width: 800px;
}
How it works: The container takes 90% of its parent but never grows beyond 800px, staying readable on wide screens.

Try It Yourself

  1. Set an element's width in pixels.
  2. Change it to a percentage and resize the window.
  3. Add a max-width and observe the cap.

Quick Quiz

What does max-width do?

Challenge

Make a content container that is fluid but never wider than 800px.

Success condition: Your container scales with the window but stops at its max-width.