Responsive Design

Responsive design makes your website look good on all screen sizes: phone, tablet, and desktop. You use media queries to apply different styles at different screen widths.

/* Mobile first: default styles */
.container {
  flex-direction: column;
  padding: 16px;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
    padding: 32px;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}