Responsive Design Basics

Web Development · 3 minute lesson

Responsive design allows the same content to work across different screen sizes. Start with a narrow layout that reads naturally from top to bottom. Add columns only when the content has enough room. This keeps the small-screen experience simple and helps reveal the most important information.

Prefer flexible widths, wrapping layouts, and sensible maximum widths. A media query can change styles when the viewport reaches a chosen condition. Choose breakpoints by watching where the content becomes cramped, rather than targeting one specific phone model.

Images should fit their container, and long text should remain readable without horizontal scrolling. Test the navigation, code examples, and forms as well as the page shell. A responsive header is useful only if visitors can still reach every destination and understand the current page.

Try the example

.lesson-grid { display: grid; gap: 1rem; }
img { max-width: 100%; height: auto; }
pre { overflow-x: auto; }

@media (min-width: 48rem) {
  .lesson-grid { grid-template-columns: repeat(2, 1fr); }
}

Practice

Resize a two-card layout from a narrow phone width to a desktop width. Check that text remains readable, images stay inside their cards, and code can scroll within its own block.

Continue learning: Official documentation.