CSS · Lesson 7 of 7

Responsive design

The viewport meta tag, media queries and mobile-first CSS.

Responsive pages adapt to any screen. Three essentials:

The viewport tag: <meta name="viewport" content="width=device-width, initial-scale=1">.
Flexible layouts — %, fr, flex-wrap, max-width: 100% on images.
Media queries to change styles at breakpoints.

/* mobile first: base styles for phones */
.cols { display: grid; gap: 12px; }
@media (min-width: 700px) {
  .cols { grid-template-columns: 1fr 1fr; }
}

Resize the preview below to see the layout switch.

Try it yourself

Code editor

Edit the code and press Run (or Ctrl/⌘ + Enter). Code runs only in your browser, in a sandbox.

Key points

Always include the viewport meta tag.
Write mobile styles first, then add min-width queries.
Test at phone width.

Quick check

In mobile-first CSS, media queries usually use…

max-width min-width orientation only device-pixel-ratio

Practice task

Make a two-column profile layout that stacks into one column below 600px, and make images never overflow.

Interview corner

What is mobile-first design?

Write base styles for small screens, then add min-width media queries for larger screens — simpler CSS and faster on phones.

What does the viewport meta tag do?

It makes mobile browsers use the device width instead of a zoomed-out desktop width, so media queries work as expected.