📱 CSS COURSE – MODULE 10: RESPONSIVE DESIGN

📁 File: responsive.md

📱 Responsive Design in CSS

📌 Introduction

Responsive design means: 👉 Your website adapts to all screen sizes

• 📱 Mobile
• 📟 Tablet
• 💻 Desktop

Without responsive design → website breaks on phones.

🧠 1. Mobile-First Concept

Modern CSS starts with mobile first:

body {
  font-size: 16px;
}

✔ Default = mobile styles ✔ Then we scale up for bigger screens

📐 2. Media Queries

Media queries allow different styles based on screen size.

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

✔ Applies only on screens ≤ 768px (tablet/mobile)

📱 3. Common Breakpoints

🧩 4. Responsive Text

h1 {
  font-size: 2rem;
}

@media (max-width: 600px) {
  h1 {
    font-size: 1.5rem;
  }
}

✔ Smaller text on small screens

🧱 5. Responsive Layout with Flexbox

.container {
  display: flex;
}

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

✔ Row → Column on mobile

🧱 6. Responsive Grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

✔ 3 columns → 1 column on mobile

📏 7. Fluid Units (VERY IMPORTANT)

Use flexible units instead of fixed px:

div {
  width: 80%;
}

or:

div {
  font-size: 1rem;
}

✔ Helps scaling across devices

📱 8. Viewport Meta Tag (HTML IMPORTANT)

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

✔ REQUIRED for responsive design

🧠 9. Responsive Strategy

1. Mobile first
2. Use flexible units (%, rem, fr)
3. Use media queries
4. Test on real devices

🧩 Real Example

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

.container {
  display: flex;
  gap: 10px;
}

.box {
  flex: 1;
  padding: 20px;
  background: blue;
  color: white;
}

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

⚠️ Common Mistakes

• Designing only for desktop ❌
• Using only px ❌
• Forgetting viewport meta tag ❌
• Overusing media queries ❌

🎯 Pro Tip

👉 Best responsive combo:

• Flexbox → layout adaptation
• Grid → structure
• rem/% → sizing
• media queries → control breakpoints

🧪 Mini Exercise

Create:

1. A responsive navbar
2. A 3-column layout → becomes 1 column on mobile
3. A responsive text section
4. A card layout that adapts screen size