Want your website to look great on any device? Responsive design makes sure your layout adapts to screens big and small. In this MiniCoursey quick guide, you’ll learn the basics of responsive design and how to use CSS media queries to make your site mobile-friendly in no time.
What is Responsive Design?
Responsive design is an approach that makes your web pages look good on all devices — desktops, tablets, and phones. It uses flexible layouts, images, and CSS media queries to adapt content automatically.
Set the Viewport
Always start by setting the viewport meta tag in your HTML:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Using Flexible Units
Use relative units like percentages, em, or rem instead of fixed pixels for widths and fonts.
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
CSS Media Queries
Media queries let you apply CSS rules depending on screen size.
@media (max-width: 768px) {
body {
font-size: 14px;
}
.container {
padding: 20px;
}
}
Example: Making Columns Stack
Turn a two-column layout into a single column on small screens.
.columns {
display: flex;
}
.column {
flex: 1;
}
@media (max-width: 768px) {
.columns {
flex-direction: column;
}
}
💡 Pro Tip: Test your site in the browser’s responsive mode or resize the window to catch issues early.
⚠️ Common Mistake: Don’t set fixed widths for containers — it breaks on small screens.
FAQ
Q: Should I design mobile-first?
A: Yes! Designing mobile-first ensures your content works on all screens.
Q: Can I use frameworks?
A: Sure! Frameworks like Bootstrap have built-in responsive grids, but understanding the basics gives you full control.
Related Link
👉 Check out previous: Intro to Flexbox — Make Layouts Easier
Where to Learn More
Explore more responsive techniques with MDN or try coding challenges on freeCodeCamp.
Conclusion
Congrats — your site is now mobile-friendly! Keep testing and improving your responsive design skills.
✨ Bookmark MiniCoursey for more quick & free mini courses!