Day 15/200 (Full stack)

#webdev #javascript #programming #beginners

📱 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 be landscape or portrait.
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.