Responsive Intro

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Adapt layout to different device sizes

Responsive Web Design is about making a website read, click, and work well across desktop, tablet, and phone alike. If a page looks great on desktop but causes horizontal scroll on phone, the user's finger will soon find the browser back button. Responsive design means thinking about flexible widths, readable font sizes, stackable layouts, scrollable code blocks, and tap-friendly buttons.

css

.container {
  width: min(100% - 32px, 1100px);
  margin: 0 auto;
}

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

You should see

The container will have a max width on desktop and shrink to fit the screen on mobile. Images will no longer overflow past the container.

Tip

Think mobile-first. Getting the mobile layout right first and then expanding for desktop is usually the easier path.