Responsive Design

Responsive design makes a page look good on phones, tablets, and desktops. A media query applies CSS rules only when the screen meets a condition, such as a maximum width.

• @media screen and (max-width: 600px) targets small screens
• Rules inside apply only when the condition is true
• Use it to stack columns or shrink text on phones

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