Full Stack Camp

🧑‍💻 Week 2 Day 5 – Responsive Web Design in CSS

👋👋 Heyyy Campers. Today we will make our webs compatible and attractive in any devices. Let's go.

🌐 What is Responsive Design?

Responsive design is an approach to web design that makes your websites adapt to different screen sizes—whether it’s a big desktop monitor or a small mobile phone.

The goal is:
👉 Look good 💅
👉 Work well ⚙️
👉 Stay readable and usable 📖

🔧 Why is it important?

📱 80%+ of users browse using phones!
🖥️ Your site must work on all screen sizes.
🧼 It improves user experience, accessibility, and SEO.

🧰 Core Techniques in Responsive Design
We use the following tools:
✅ Flexible Layouts (percent, em, vw, etc.)
✅ Media Queries
✅ Responsive Images
✅ Flexible Text
✅ Mobile-first approach
1️⃣ Flexible Layouts – Not Fixed Sizes

❌ Don’t do this:
.container { width: 1200px; }
This forces the layout to stay wide even on small screens. Bad idea 😩.

✅ Do this instead:
.container { width: 90%; max-width: 1200px; }

90% makes it flexible.
max-width keeps it from stretching too wide on big screens.

2️⃣ Media Queries – the Magic Wand 🪄

A media query lets you apply CSS only when certain conditions are true, like screen width.

🧱 Basic Syntax:
@media (condition) { /* styles */ }

🧪 Example: Small screens

@media (max-width: 768px) { .menu { display: block; text-align: center; } }

📌 That means:
If the screen width is 768px or smaller, apply those styles.

🔁 Example: Change layout on screen size

.container { display: flex; gap: 20px; } .box { flex: 1; } /* On small screens, stack them */ @media (max-width: 600px) { .container { flex-direction: column; } }

📏 Common Breakpoints (you can change as needed):

➤➤

 Large desktops 
@media (min-width: 1200px) {} 

➤➤ Desktops 
@media (min-width: 992px) and
(max-width: 1199px) {} 

➤➤ Tablets 
@media (min-width: 768px) and (max-width: 991px) {} 

➤➤/Phones 
@media (max-width: 767px) {}

3️⃣ Responsive Images 📸
Images should resize automatically to fit the screen.

img { max-width: 100%; height: auto; }

🔍 max-width: 100% = image won’t overflow its container
🔍 height: auto = keep proportions

4️⃣ Responsive Units 📐

Avoid fixed units like px. Use:
🧪 Example:
h1 { font-size: 3vw; }
⏳ Text will grow/shrink with screen size.

5️⃣ Responsive Typography ✍️
Make your text adjust well. Example:

html { font-size: 16px; } @media (max-width: 768px) { html { font-size: 14px; } } @media (max-width: 500px) { html { font-size: 12px; } }

💡 Bonus: Mobile First Approach
Start by styling for mobile devices first, then add styles for larger screens using min-width.

➤➤

 Mobile first 

.card {
     width: 100%; }
 
➤➤Tablets and up 

@media (min-width: 768px) { 
   .card {
        width: 50%; } }

🧪 FULL WORKING EXAMPLE

<style> 
.container {
     width: 90%;
     max-width: 1200px;
     margin: auto;
    display: flex;
    gap: 20px;
    flex-wrap: wrap; } 
.card { 
    flex: 1 1 300px;
    background: #f2f2f2; 
    padding: 20px;
    border-radius: 10px; } 
img {
     max-width: 100%;
     height: auto; } 
/* Media Query for small screens */ 
@media (max-width: 600px) { 
   .container {
        flex-direction: column; }
   .card {
        font-size: 14px; } }
</style> 


<div class="container">
      <div class="card"> 
           <h2>Course 1</h2> 
           <img src="course1.jpg" alt="Course 1">
          <p>Learn HTML from scratch.</p>
    </div>
    <div class="card"> 
         <h2>Course 2</h2> 
         <img src="course2.jpg" alt="Course 2"> 
         <p>Master CSS step by step.</p> 
    </div> 
</div>

🔥 Recap
✅ Use %, em, vw, vh instead of px
✅ Images: max-width: 100%; height: auto;
✅ Media Queries: change layout/styles per screen
✅ Mobile First: write mobile styles first, then add for bigger
✅ Flexbox/Grid + media queries = powerful layout control

79 views08:31