✅ CSS Layouts Part-2: Responsive Design with Media Queries
🔍 What Responsive Design Means
• Your site adapts to screen size
• Content stays readable
• Layout stays usable
• No horizontal scrolling
Real screens you design for:
• Mobile: 360 to 480px
• Tablet: 768px
• Laptop: 1024px and above
❓ Why Responsive Design Matters
• 60%+ traffic comes from mobile devices
• Google ranks mobile-friendly sites higher
• Users leave broken layouts fast
🧠 Core Idea Behind Responsiveness
• Same HTML
• Different CSS rules
• Applied based on screen width
This is where media queries work.
📐 What a Media Query Is
• A conditional CSS rule
• Runs only when condition matches
• Based on screen size or device features
Think of it as:
• If screen width is small
• Apply these styles
🧩 Basic Media Query Syntax
@media (max-width: 768px) {
/* CSS rules here */
}Meaning:
• Screen width is 768px or less
• Styles inside activate
📱 Common Breakpoints You Should Know
• 480px: Small phones
• 768px: Tablets
• 1024px: Laptops
These are practical, not fixed laws.
🧱 What You Usually Change in Media Queries
• Grid columns
• Flex direction
• Font size
• Padding and margins
Example thinking:
• Desktop: 3 cards in a row
• Mobile: 1 card per row
✅ Best Practices You Should Follow
• Mobile-first approach
• Use relative units
• Test on real devices
• Keep breakpoints minimal
🧪 Mini Practice Task
• Create a 3-column grid
• Collapse to 1 column below 768px
• Convert navbar row to column on mobile
Mini Practice Solution: https://whatsapp.com/channel/0029VaiSdWu4NVis9yNEE72z/1379