CSS: @media

The @media rule applies CSS only when a screen or device condition matches, making responsive layouts possible.

Mobile-first example

.card {
  padding: 1rem;
}

@media (min-width: 48rem) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

The base rule serves small screens. The media query adds a two-column layout when the viewport is wide enough.

Other media features

@media (orientation: landscape) {
  .hero { min-height: 60vh; }
}

@media (hover: hover) {
  .link:hover { text-decoration: underline; }
}

Use features such as orientation and hover when they describe a real interaction or layout need. Do not assume every device has a mouse or a large screen.

Common mistakes

• Do not design only for a few named devices; choose breakpoints where the content needs them.
• Keep the viewport meta tag so mobile browsers use the intended layout width.
• Do not hide essential content only at a breakpoint.