CSS Media Queries: How to Make Your Website Responsive

In today’s world of diverse screen sizes — from large desktop monitors to tiny smartphone displays — responsive design is non-negotiable. One of the key tools in creating a responsive web layout is the CSS media query.

In this blog, we’ll cover:

• ✅ What are media queries?
• 🔍 Basic syntax
• 📐 Common breakpoints
• 🧪 Practical code examples
• 💡 Tips and best practices

---

✅ What Are Media Queries?

Media queries are a CSS feature that allows you to apply styles conditionally based on the characteristics of the device or browser.

Most commonly, media queries are used to style pages differently depending on:

• Screen width
• Device type (screen, print, etc.)
• Screen resolution
• Orientation (portrait or landscape)

---

🔍 Basic Syntax

@media media-type and (condition) {
  /* CSS rules here */
}

Example:

@media screen and (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

This rule says:

“If the screen is 768px or less, change the body’s background color to light blue.”

---

📐 Common Breakpoints

Device	Width Range (px)
Mobile	0 – 767px
Tablet	768px – 1024px
Laptop	1025px – 1440px
Desktop	1441px and above

---

🧪 Practical Media Query Examples

1️⃣ Change Font Size on Small Screens

@media (max-width: 600px) {
  h1 {
    font-size: 24px;
  }
}

2️⃣ Hide Sidebar on Tablets and Smaller

@media (max-width: 1024px) {
  .sidebar {
    display: none;
  }
}

3️⃣ Different Layouts for Portrait and Landscape

@media (orientation: portrait) {
  .container {
    flex-direction: column;
  }
}

@media (orientation: landscape) {
  .container {
    flex-direction: row;
  }
}

---

🧠 Best Practices for Media Queries

• ✅ Use mobile-first design (min-width) to scale up from small screens
• ✅ Group media queries logically and keep your CSS clean
• ❌ Don’t hardcode widths — use percentages and flexbox/grid when possible
• 🧪 Test on multiple devices and screen sizes

---

📦 Pro Tip: Combine with CSS Grid or Flexbox

Media queries work great with layout tools like Flexbox or CSS Grid, giving you powerful control over responsive design.

.container {
  display: flex;
  flex-direction: row;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

---

✅ Conclusion

Media queries are essential for creating responsive websites that look great on any device. By mastering this tool, you can ensure your content is accessible, readable, and user-friendly — no matter where it’s viewed.

---

📌 Quick Recap

@media (max-width: 768px) {
  /* Styles for screens smaller than 768px */
}