Skip to main content
Responsive Web Design
CHAPTER 06 Beginner

CSS Media Queries

Updated: May 12, 2026
20 min read

# Chapter 6: CSS Media Queries

1. Introduction

Welcome to Chapter 6! We've discussed the Mobile-First philosophy and flexible units, but what happens when a screen gets so big that a mobile layout looks ridiculous? We need a way to tell the browser: *"If the screen is bigger than X, change the design."* Enter Media Queries—the logic engines of responsive web design.

2. Learning Objectives

By the end of this chapter, you will be able to:
  • Write standard @media rules.
  • Understand and define common "Breakpoints".
  • Differentiate between min-width and max-width queries.
  • Target device orientation (Portrait vs. Landscape).

3. Beginner-Friendly Explanations

Think of a Media Query as an "If Statement" for your CSS.
  • "IF the screen is wider than 800 pixels, make the background blue."
  • "IF the screen is held vertically (portrait), hide the sidebar."

A Breakpoint is the exact pixel width where your design "breaks" or starts to look bad, requiring you to use a media query to fix the layout.

4. Syntax Explanation

css
12345678 
/* Base Mobile Styles */
body { background-color: red; }

/* The Media Query */
@media (min-width: 768px) {
  /* CSS inside here ONLY applies if the screen is 768px or wider */
  body { background-color: blue; }
}
  • @media: Declares the media query.
  • (min-width: 768px): The condition. It means "minimum width of 768px".
  • { ... }: The CSS rules to apply when the condition is met.

5. Real-World Examples

Look at a standard blog:
  • Mobile (0px to 767px): Articles stack vertically. 1 column.
  • Tablet (Breakpoint at 768px): The layout shifts to 2 columns using a media query.
  • Desktop (Breakpoint at 1024px): Another media query shifts the layout to 3 columns and adds a sidebar.

6. Multiple Code Examples

Example 1: min-width (Mobile-First approach)

As the screen gets larger, new styles are added on top.
css
123456789101112 
/* Mobile */
h1 { font-size: 1.5rem; }

/* Tablet */
@media (min-width: 768px) {
  h1 { font-size: 2.5rem; }
}

/* Desktop */
@media (min-width: 1024px) {
  h1 { font-size: 3.5rem; }
}

Example 2: max-width (Desktop-First approach - Less Common)

Styles apply to desktop by default, and are removed/altered for smaller screens.
css
1234567 
/* Desktop */
.sidebar { display: block; }

/* Mobile */
@media (max-width: 767px) {
  .sidebar { display: none; } /* Hide on small screens */
}

Example 3: Orientation Queries

You can target how the user is holding their device.
css
123456789 
/* Applies only when the phone is held horizontally */
@media (orientation: landscape) {
  .navigation {
    position: fixed;
    left: 0;
    width: 80px;
    height: 100vh;
  }
}

7. Output Explanations

In Example 1, because CSS cascades (reads top to bottom), a 1200px desktop browser will read the mobile 1.5rem, then overwrite it with the tablet 2.5rem, and finally overwrite it with the desktop 3.5rem. A mobile browser stops after the first rule.

8. Common Mistakes

  1. 1. Writing Media Queries at the top of the CSS file: Due to the cascade, media queries should usually go at the *bottom* of your stylesheet so they can correctly overwrite the base styles above them.
  1. 2. Too many breakpoints: Don't create a breakpoint for every single specific phone model (e.g., one for iPhone 13, one for Galaxy S22). Base your breakpoints on when your *content* looks bad, not on specific device sizes.
  1. 3. Mixing min and max width: Pick one workflow (usually min-width for mobile-first) and stick to it. Mixing them causes extreme confusion.

9. Best Practices

  • Standard Breakpoints: While you should design for your content, common starting points are:
  • Small Tablets/Large Phones: 640px or 768px
  • Laptops/Desktops: 1024px
  • Large Monitors: 1280px or 1536px
  • Organize by Component: Keep your media queries close to the component they style.
css
123456 
/* Good Organization */
.card { width: 100%; }
@media (min-width: 768px) { .card { width: 50%; } }

.btn { padding: 10px; }
@media (min-width: 768px) { .btn { padding: 20px; } }

10. Exercises

  1. 1. Create an HTML file with three div elements. Stack them vertically on mobile. Use a media query to display them side-by-side (using display: flex or float) when the screen hits 800px.
  1. 2. Change the background color of the body to yellow only when the device is in landscape mode.

11. Mini Project: Device-Based Responsive Layout

Build a layout with a Header, Main Content, and a Sidebar. On mobile, they stack vertically. On tablet, the sidebar goes to the right. On desktop, the layout centers with max-width.
html
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 
<!-- Responsive Design Example -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Query Layout</title>
    <style>
        body { font-family: sans-serif; margin: 0; padding: 0; background: #f0f0f0; }
        
        /* Mobile First Defaults */
        .header { background: #333; color: white; padding: 20px; text-align: center; }
        .wrapper { padding: 20px; }
        .main { background: white; padding: 20px; margin-bottom: 20px; border-radius: 5px; }
        .sidebar { background: #ddd; padding: 20px; border-radius: 5px; }

        /* TABLET BREAKPOINT (768px and up) */
        @media (min-width: 768px) {
            .wrapper {
                display: flex; /* Puts items side-by-side */
                gap: 20px;
            }
            .main {
                flex: 3; /* Takes up 3/4 of space */
                margin-bottom: 0;
            }
            .sidebar {
                flex: 1; /* Takes up 1/4 of space */
            }
        }

        /* DESKTOP BREAKPOINT (1024px and up) */
        @media (min-width: 1024px) {
            .wrapper {
                max-width: 1000px; /* Constrains width on huge monitors */
                margin: 0 auto; /* Centers the layout */
            }
            .header {
                font-size: 1.5rem; /* Larger header text */
                padding: 40px;
            }
        }
    </style>
</head>
<body>
    <div class="header">My Responsive Website</div>
    <div class="wrapper">
        <div class="main">
            <h2>Main Article</h2>
            <p>This is the primary content. On mobile, the sidebar is below me. On tablets and desktops, the sidebar is to my right.</p>
        </div>
        <div class="sidebar">
            <h3>Sidebar</h3>
            <p>Links, ads, or secondary info goes here.</p>
        </div>
    </div>
</body>
</html>

12. Coding Challenges

Challenge 1: Add a new breakpoint to the Mini Project for massive screens (@media (min-width: 1400px)). Increase the max-width of the wrapper to 1300px and increase the base font-size of the body.

13. MCQs with Answers

Q1: What does @media (min-width: 1024px) mean? A) The rules apply only to screens smaller than 1024px. B) The rules apply only to screens exactly 1024px wide. C) The rules apply to screens 1024px wide and larger. D) The rules apply only to desktop computers, regardless of width. *Answer: C*

Q2: Why should media queries generally be placed at the bottom of the CSS file? A) For SEO purposes. B) So they can correctly override the default CSS above them due to the cascade. C) Because JavaScript requires it. D) Browsers read CSS from bottom to top. *Answer: B*

14. Interview Questions

  1. 1. How do you determine where to put your breakpoints?
*Answer:* Breakpoints should be dictated by the content, not specific device models. When I resize the browser window and the design starts to break (text gets too squished, images overflow), that exact pixel width is where I add a breakpoint.
  1. 2. What is the difference between @media screen and @media print?
*Answer:* screen applies to digital displays (monitors, phones). print applies to the layout only when the user tries to print the webpage to paper (useful for hiding navbars and ads on printed copies).

15. FAQs

Q: Can I use rem or em in media queries instead of px? A: Yes! @media (min-width: 48em) is actually a fantastic practice for accessibility, as it scales breakpoints based on user font-size settings.

16. Summary

Media Queries are the core logic of responsive design. By starting with a Mobile-First foundation and using min-width media queries at strategic breakpoints, you can dramatically shift your layout from a simple vertical stack to complex, multi-column desktop interfaces.

17. Next Chapter Recommendation

We used display: flex; briefly in our mini-project to put columns side-by-side. It's time to master this incredibly powerful layout tool. Let's move to Chapter 7: Responsive Layouts with Flexbox.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter CSS Units for Responsive Design
Next Chapter Responsive Layouts with Flexbox

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6