Lesson: Responsive Design

📱 What is Responsive Design?

Responsive design allows your website to adapt to different screen sizes — phones, tablets, desktops — using flexible layouts and media queries.

🧠 Media Query Basics

@media (max-width: 768px) {
  body {
    background: lightblue;
  }
}

This changes the background only on small screens (768px or less).

💡 Common Breakpoints

• Mobile (Small): max-width: 575.98px
• Tablet: min-width: 768px
• Desktop: min-width: 992px

🧪 Example: Responsive Grid

<div class="grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

.grid {
  display: grid;
  gap: 16px;
}
.card {
  background: #f0f0f0;
  padding: 20px;
}
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Responsive layout that adapts to screen size!

✅ Best Practices

• Use % or vw/em units instead of fixed pixels
• Mobile-first: start with small screens then expand
• Use max-width and min-width to control design shifts
• Test with browser dev tools and real devices

🚀 Try It Yourself!