Media queries in CSS — How to adapt a design to every screen

Imagine a product page: on mobile you want one card per row, on tablet you want two cards, and on desktop three cards. That is where @media in CSS comes in.

If you are searching for media queries in CSS or the difference between max-width and min-width or best breakpoints for responsive design, this lesson explains it clearly.

What Are Media Queries in CSS?

Media Queries let you write CSS rules that apply only when a condition is true, such as screen width or device orientation.

Simple definition: @media is a “condition” that tells CSS when to change the UI.

Media Query Syntax in CSS

Basic conditional rule

@media (max-width: 768px) {
    /* CSS for small screens */
}

What does this code do? Applies rules only to smaller screens.

Expected result: a mobile-friendly layout without affecting large screens.

Common mistake: writing many conditions without a clear system.

The Difference Between max-width and min-width in CSS

• max-width: targets screens smaller than or equal to the value.
• min-width: targets screens larger than or equal to the value.

/* Mobile fix */
@media (max-width: 576px) {
    .title {
        font-size: 1.1rem;
    }
}

/* Desktop enhancement */
@media (min-width: 992px) {
    .layout {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

What does this code do? The first improves mobile, the second expands layout for desktop.

Expected result: every device gets the most suitable version of the same page.

Common mistake: mixing max/min randomly inside the same project.

Common Breakpoints in Media Queries

Story Example: One Product Card Across 3 Screens

Let’s complete a small shop scenario: on mobile we show one product per row, on tablet two, and on desktop three.

.product-card {
    width: 100%;
}

@media (min-width: 768px) {
    .product-card {
        width: 50%;
    }
}

@media (min-width: 992px) {
    .product-card {
        width: 33.33%;
    }
}

What does this code do? The same card adapts gradually as the screen widens.

Expected result: comfortable on mobile, better space usage on larger screens.

Common mistake: jumping straight to 3 columns even on small screens.

Best Approach: Mobile First in Media Queries

In Mobile First, you write the mobile version first as the base, then add progressive enhancements using min-width.

Common Mistakes in CSS Media Queries

1) Too many breakpoints: complex code that is hard to maintain.

2) Ignoring Mobile First: makes rule ordering harder.

3) Not testing real devices: issues appear that you won’t notice in the editor only.

FAQ - Common Search Questions

What are Media Queries in CSS?

Conditional rules that change layout based on screen size or device features.

What is the difference between max-width and min-width?

max-width is for smaller screens, and min-width is for larger screens. Mobile-first usually relies on min-width.

What are the best breakpoints in CSS?

Common values are 576px, 768px, 992px, and 1200px, but the best choice depends on where your design actually breaks.

Should I use a media query for every element?

No, it is better to organize them at the component or layout-section level.

What is the first practical exercise for Media Queries?

Transform a card grid from one column to two and then three using min-width.