Responsive: media queries

A media query applies rules only when a condition holds: @media (max-width: 600px) { .cols { flex-direction: column; } } stacks the columns on screens up to 600px wide. Write the default for the layout you consider primary (many people design for small screens first and add min-width queries for large ones).

For phones to report their real width, the page also needs <meta name="viewport" content="width=device-width, initial-scale=1"> in the head; the starter includes it. The check here reads your stylesheet rather than resizing the preview.

@media (max-width: 600px) {
  .cols { flex-direction: column; }
}

Your task

Keep .cols as a flex row by default and add a media query for widths up to 600px that changes .cols to flex-direction: column.

Part of the final project. .cols is the two-column section that stacks on narrow screens. It is saved in this browser and loaded into Project: a one-page site when you get there.

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.cols { display: flex; gap: 12px; }
.cols > div { flex: 1; padding: 12px; background: rgb(232, 239, 255); }
@media (max-width: 600px) {
  .cols { flex-direction: column; }
}
</style>
</head>
<body>
<div class="cols">
  <div>Left</div>
  <div>Right</div>
</div>
</body>
</html>