XirfadHub Roadmap
Frontend Developer Roadmap
Step 3 / 1890 min

Responsive Design

Web Foundations

Explanation

Responsive design adapts layouts for phones, tablets, and desktops using fluid units and media queries.

Code example

css
.container {
  width: min(1100px, 92%);
  margin-inline: auto;
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

Helpful resources

Exercise

Make your intro page look great on mobile and desktop using media queries and fluid widths.