Responsive Design

People visit sites on phones, tablets and large monitors. Responsive design means one page that adapts its layout to any screen instead of shipping separate sites. This lesson covers the viewport tag, flexible units and media queries.

The viewport meta tag

On mobile, browsers pretend the screen is wide unless you tell them otherwise. Add this to the head so the page uses the real device width:

<meta name='viewport' content='width=device-width, initial-scale=1'>

Without it, a mobile browser zooms out and your layout looks tiny. This single line is the foundation of every responsive page.

Flexible units

Fixed pixel widths do not adapt. Prefer relative units: percentages for widths, rem for text, and max-width so an element never grows past a limit but can shrink below it.

img {
  max-width: 100%;
  height: auto;
}
.container {
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
}

Setting max-width: 100% on images stops them overflowing their box on small screens.

Media queries

A media query applies CSS only when a condition is true, most often a screen width. Use min-width for a mobile-first approach: write the base styles for small screens, then add rules as the screen grows.

.menu {
  display: block;
}

@media (min-width: 768px) {
  .menu {
    display: flex;
  }
}

The widths where the layout changes are called breakpoints. Choose them where the design starts to look cramped, not for specific device models.

Putting it together

A common pattern is a grid that stacks in one column on phones and spreads into several columns on wider screens:

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 600px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

Testing your work

You do not need many devices to test a responsive page. Open the browser developer tools with the F12 key and use the device toolbar to shrink and stretch the screen. Drag the window narrower and watch where the layout breaks; that width is where a new breakpoint usually belongs. Always check both a narrow phone width and a wide desktop width before you finish.