📱 Day 15 of 200 Days of Code: Understanding CSS Media Queries
Today was a lighter day in my full-stack learning journey — Day 15 out of 200. I didn’t go all out because, honestly, I’m running low on sleep 💤. But progress is progress, and I still learned something valuable:
✅ CSS Media Queries — the backbone of responsive web design.
Even if it was a small step, learning about media queries opened the door to building websites that look great on any screen size — from tiny smartphones to massive desktop monitors. Let’s break it down in a way that’s easy to understand (especially if you’re just starting out too).
🌐 What Are CSS Media Queries?
Media queries are like rules that tell your CSS:
"Hey, only apply these styles if the screen size (or device type) meets these conditions!"
They are essential for responsive design, meaning your website adapts to different screen sizes and devices — smartphones, tablets, laptops, etc.
🔧 Basic Syntax of a Media Query
Here’s the simplest structure of a media query:
@media (condition) {
/* CSS rules go here */
}
A real-world example:
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}
📱 This means:
“If the screen width is 768 pixels or less (tablet or mobile), change the background color to light blue.”
🧪 Why Use Media Queries?
Without media queries, your layout might look perfect on a desktop — but completely broken on a mobile phone.
Media queries help you:
- Adjust font sizes for smaller screens
- Rearrange layouts for vertical vs horizontal devices
- Hide or show elements based on screen width
- Provide better user experience across all devices
📊 Common Use Cases for Media Queries
Here are a few things you can do using media queries:
1. Responsive Text Size
body {
font-size: 18px;
}
@media (max-width: 600px) {
body {
font-size: 16px;
}
}
💡 Reduces font size slightly on small screens for better readability.
2. Hide Navigation Menu on Mobile
.navbar {
display: block;
}
@media (max-width: 480px) {
.navbar {
display: none;
}
}
🧭 You might hide a full-size navbar on small screens and replace it with a hamburger menu using JavaScript or CSS tricks.
3. Stack Columns on Small Screens
.row {
display: flex;
}
.column {
width: 50%;
}
@media (max-width: 768px) {
.column {
width: 100%;
}
}
📱 Two columns on desktop become a stacked layout on mobile — simple and effective.
🔁 Multiple Media Queries
You can also use multiple breakpoints to adjust your layout across various devices:
/* Desktop */
@media (min-width: 1024px) {
/* styles */
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
/* styles */
}
/* Mobile */
@media (max-width: 767px) {
/* styles */
}
This is often how responsive designs are handled in real-world websites or when using CSS frameworks like Bootstrap or Tailwind CSS.
🧠 Key Terms to Remember
-
max-width
: Applies styles if the screen is less than or equal to a certain width. -
min-width
: Applies styles if the screen is greater than or equal to a certain width. -
orientation
: Can belandscape
orportrait
. -
hover
,pointer
,resolution
, and more are advanced features of media queries.
😅 A Real Talk Moment
Today wasn’t a power-packed day. I was tired and didn’t push too hard — but I still showed up and learned something. That’s the real win.
Learning to code isn’t just about going 100% every single day. It’s about consistency. Even a small concept like media queries can unlock powerful results in your projects.
🔗 Want to Learn More?
- MDN Web Docs – Media Queries
- CSS Tricks – Guide to Media Queries
- Responsive Web Design Basics – Google Web Fundamentals
#CodingJourney #100DaysOfCode #CSS #ResponsiveDesign #WebDevelopment #MediaQueries
Top comments (0)