Introduction
In today’s world, users access websites on different devices like mobile phones, tablets, and desktops. A website must look good on all screen sizes.
👉 This is where Responsive Design comes in.
Responsive design ensures that your website adapts to different screen sizes and provides a better user experience.
What you’ll Learn
- Responsive design basics
- Media queries in CSS
max-widthvsmin-width- Mobile-first approach
- Responsive Flexbox layouts
- Responsive Grid layouts
- Responsive units (
%, rem, vw) - Making images responsive
- Testing responsive design
- Common mistakes to avoid
1️⃣ What is Responsive Design?
Responsive design means:
👉 Your website adjusts automatically
👉 Based on screen size
👉 Mobile, tablet, laptop, desktop
Without responsive design:
- Website may look good on laptop
- But broken on mobile
2️⃣ What is a Media Query?
Media queries are a feature in CSS that allow you to apply styles based on screen size or device type.
Example:
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}
Explanation:
@media→ Defines a media querymax-width: 768px→ Applies styles when screen width is 768px or smaller
3️⃣ Most Common Breakpoints
Breakpoints are screen sizes where your layout changes.
👉 Common breakpoints:
- Mobile → up to 480px
- Tablet → 481px to 768px
- Small laptops → 769px to 1024px
- Desktop → 1025px and above
👉 These are not fixed rules—you can adjust based on your design.
Using max-width vs min-width
max-width (Desktop First)
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
👉 Applies styles for smaller screens.
min-width (Mobile First)
@media (min-width: 768px) {
.container {
flex-direction: row;
}
}
👉 Applies styles for larger screens.
4️⃣ Making Flexbox Responsive
Example:
.container {
display: flex;
gap: 20px;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
On desktop → row
On mobile → column
Very common pattern.
5️⃣ Making Grid Responsive
Example:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
}
On desktop → 3 columns
On mobile → 1 column
6️⃣ Mobile-First Approach (Professional Method)
Instead of writing desktop first, professionals write:
👉 Mobile styles first
👉 Then use min-width
Example:
.container {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.container {
flex-direction: row;
}
}
This is called:
✅ Mobile-first design
Google prefers this.
7️⃣ Important: Viewport Meta Tag
In your HTML <head> section, this must be added:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Without this:
Mobile responsiveness will not work properly.
Very important for beginners.
8️⃣ Responsive Units (Very Important)
Using the right units is important for responsive design.
👉 Avoid fixed units like:
px(not flexible)
👉 Use flexible units:
%→ Relative to parentrem→ Relative to root font sizeem→ Relative to parent font sizevw→ Viewport widthvh→ Viewport height
Example:
.container {
width: 80%;
}h1 {
font-size: 2rem;
}
👉 This helps your layout scale properly on different screen sizes.
9️⃣ Making Images Fully Responsive
Earlier you saw basic responsiveness, but let’s understand properly.
img {
max-width: 100%;
height: auto;
}
👉 What this does:
- Prevents image overflow
- Maintains aspect ratio
- Adjusts automatically with screen size
Pro Tip:
Use smaller images for mobile to improve performance.
🔟 Testing Responsive Design
Creating responsive design is not enough—you must test it.
Methods:
👉 Resize browser window
👉 Use Chrome DevTools (Inspect → Toggle device toolbar)
👉 Test on real mobile devices
Why this matters:
Sometimes layout looks fine in code but breaks on real screens.
📱 Real-World Example
Let’s understand how actual websites use responsive design.
On Mobile:
- Single column layout
- Menu becomes hamburger icon
- Larger buttons for touch
On Tablet:
- Two-column layout
- Medium spacing
On Desktop:
- Multi-column layout
- Sidebar + content
- Full navigation menu
👉 This is exactly how platforms like blogs, eCommerce, and dashboards work.
Common Mistakes
- Using too many breakpoints ( Keep it simple and clean )
- Not using mobile-first approach ( Always start from small screens )
- Using fixed widths (px) ( Use flexible units instead )
- Forgetting viewport meta tag ( Responsiveness won’t work properly )
- Not testing on real devices ( Always check mobile behavior )
Practice Tasks
Task 1: Basic Media Query
Change background color when screen width is less than 768px.
👉 Bonus: Add another breakpoint at 480px.
Task 2: Responsive Layout
Create a layout with:
- 1 column (mobile)
- 2 columns (tablet)
- 3 columns (desktop)
👉 Use Grid or Flexbox.
Task 3: Responsive Navbar
Create a navigation bar:
- Vertical layout on mobile
- Horizontal layout on desktop
👉 Try adding spacing and alignment.
Task 4: Image Responsiveness
Add 3 images and make sure:
- They resize properly
- They don’t overflow
- They look good on mobile
Task 5: Mini Responsive Project
Create a full layout:
- Header
- Sidebar
- Main content
- Footer
👉 Use:
- Grid for layout
- Media queries for responsiveness
Important Points to Remember
- Responsive design is essential for modern websites
- Use media queries to adjust layouts
- Prefer mobile-first approach
- Use flexible units like %, fr, rem
- Combine with Flexbox and Grid
Conclusion
Responsive design ensures your website works on all devices. With media queries, you can easily create layouts that adapt to different screen sizes.
👉 Practice different layouts
👉 Test on multiple devices
👉 Combine Grid + Flexbox + Media Queries