Responsive Basics

More than half of all web visits happen on phones. If your website only looks good on a big monitor, most visitors never see it at its best. The good news: two ideas, max-width and media queries, get you most of the way to a site that looks great everywhere.

The problem with fixed widths

Imagine you set your content area to width: 800px;. On a laptop, lovely. On a 375px-wide phone, disaster: the content is more than twice as wide as the screen, and visitors have to scroll sideways to read anything. Fixed widths are promises the small screen cannot keep.

max-width to the rescue

The fix is to make the width a ceiling instead of a fixed size:

.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px;
}

Read max-width: 800px; as "be as wide as you can, but never wider than 800px". On a big screen, the content stops at a comfortable 800px and the margin: 0 auto; centers it. On a phone, the same content simply uses the full width available. One rule, every screen handled. The side padding keeps text from touching the screen edges on small devices.

Why cap the width at all? Reading comfort. Text lines that stretch across a huge monitor are exhausting to follow, because your eyes lose their place traveling back to the start of each line. Around 600px to 800px is the sweet spot for comfortable reading.

Flexible images

Images have a similar problem: a large photo will happily overflow a small screen. This one rule tames every image on your site:

img {
  max-width: 100%;
  height: auto;
}

It means "an image may never be wider than its container, and its height should scale to match". Add it to your stylesheet once and forget about overflowing images forever.

Media queries: different styles for different screens

Sometimes you want styles to actually change on small screens, not just shrink. A media query wraps CSS rules in a condition:

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

Read @media (max-width: 600px) as "only when the screen is 600px wide or narrower, apply the rules inside". So the gallery is three columns on a laptop, but on a phone it becomes a single column, with each item getting the full width. The rules inside a media query override the earlier ones when the condition is true. The screen width where your layout changes is called a breakpoint, and you do not need many: plenty of good websites get by with one or two, often around 600px and 900px.