HTML & CSS · Responsive Design · Lesson 18 of 25

Media Queries

Concept

Media Queries

media rules apply CSS only when conditions like screen width are met, which is the foundation of responsive design.

Common breakpoints tend to cluster around typical device widths — roughly 480px for phones, 768px for tablets, and 1024px+ for desktops — though the right breakpoint is really wherever your own layout starts to look cramped.

By the end of this lesson

Explain the core idea behind Media Queries.
Predict output before running a change.
Test one realistic and one unusual input.
Use the result to make the next decision.

How to study this page

1. Read one concept.
2. Change the example.
3. Run, compare, and explain.
4. Complete the challenge below.

Syntax

@media (min-width: 768px) {
  .selector {
    /* styles for wider screens */
  }
}

ExampleRunnable

.container {
  width: 100%;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

Try it Yourself »

A max-width query for small screens only

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

Self-check before continuing

Without looking at the example, describe what changes when you modify one input in Media Queries. Then reopen the editor and prove your explanation with a small test.

You are ready to continue when you can predict, test, and explain the result.

Your turn

Write a media query that changes text color on screens narrower than 600px.

Loading editor…

Console

Output will appear here...