Responsive Design and Media Queries

What Is It?

Responsive CSS adapts a design to available space or user preferences. A media query applies rules only when its condition matches.

Properties, Tags and Attributes Explained

• @media (min-width: 600px): Applies rules when the viewport is at least 600 CSS pixels wide.
• viewport meta: The HTML meta tag makes the layout viewport match device width on mobile.
• mobile first: Write the small-screen layout first, then enhance it for wider screens.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Responsive columns

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Design and Media Queries</title>
  <style>
    .cards { display: grid; gap: 12px; }
    article { padding: 16px; background: #dbeafe; }
    @media (min-width: 600px) { .cards { grid-template-columns: repeat(3, 1fr); } }
  </style>
</head>
<body>
  <div class="cards"><article>Read</article><article>Try</article><article>Build</article></div>
</body>
</html>

What you see: Below 600px the cards stack; at 600px and above they form three columns.

Example 2: Responsive navigation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Design and Media Queries</title>
  <style>
    nav { display: flex; flex-direction: column; gap: 12px; }
    @media (min-width: 500px) { nav { flex-direction: row; } }
  </style>
</head>
<body>
  <nav aria-label="Demo"><a href="#intro">Introduction</a><a href="#practice">Practice</a></nav><p id="intro">Start here.</p><p id="practice">Try the code.</p>
</body>
</html>

What you see: Navigation changes from a column to a row at 500px.

When and Where to Use It

Choose breakpoints when the content needs more space, rather than for one specific device model. Open the editor and resize the window or preview in DevTools.

Common Mistake or Useful Tip

Queries inside the preview use the iframe viewport width, which may be narrower than the page.

Try It Yourself

Change the first breakpoint to 400px and resize the preview.