A Media Query is a conditional CSS rule that applies styles when the device meets certain characteristics, such as having a specific screen width.
They are one of the most important foundations of responsive design. Thanks to them, we can have a single HTML file and tell the browser to render things differently depending on whether we are viewing it on a large monitor or a narrow mobile phone.
The Syntax of @media
To apply these conditions, we use the @media directive followed by a “question” in parentheses. If the browser checks that the answer to that question is true, it will apply all the CSS rules we have placed inside its braces.
/* 1. Base styles for everyone */
.news-box {
background-color: lightblue;
width: 100%;
}
/* 2. The special condition */
@media (min-width: 800px) {
/* This will ONLY apply if the screen is 800px or wider */
.news-box {
background-color: darkblue;
color: white;
}
}
Media Queries do not “erase” previous CSS; rather, they override it. In the example above, .news-box will always have width: 100%, because the Media Query only overrode the background and text colors.
max-width vs. min-width Approach
When planning our adaptive design, we have two diametrically opposed approaches for writing our conditions. Choosing one over the other will change how you structure your CSS file (and your mind).
Historically, developers started by designing the page for desktop computers (which was the norm).
Then, you add rules with max-width to “break” and shrink the design as the screen gets smaller.
/* Base design for DESKTOP */
.menu { display: flex; flex-direction: row; }
/* If the screen is a MOBILE (600px or less), we change it */
@media (max-width: 600px) {
.menu { flex-direction: column; }
}
Today, the paradigm has completely shifted. Since most web traffic comes from mobile phones, it is standard to design for the small screen first (which is also the hardest due to lack of space).
Then, you expand towards large monitors using min-width.
/* Base design for MOBILE (The recommended one) */
.menu { display: flex; flex-direction: column; }
/* If the screen is a DESKTOP (768px or wider), we expand it */
@media (min-width: 768px) {
.menu { flex-direction: row; }
}
In general, you will be advised to adopt the Mobile First mentality.
I don’t necessarily agree; it depends on the project. But you should definitely know both ways of working and choose one based on what you need.
Breakpoints Are Not Phone Models
A very common mistake is to choose breakpoints based on specific devices: “mobile is this size,” “tablet is this size,” “laptop is that size.” The problem is that there are thousands of sizes, densities, zooms, and orientations.
It is best to add a breakpoint when the design demands it, not when the device demands it.
.cards {
display: grid;
gap: 1rem;
}
@media (min-width: 700px) {
.cards {
grid-template-columns: repeat(2, 1fr);
}
}
If at 700px the cards have enough space to go into two columns, perfect. If your content needs 760px, then it will be 760px.
Think of breakpoints as “moments when the design breaks or improves,” not as “device families.”
Hiding Cluttering Elements
One of the most powerful uses of Media Queries is not rearranging, but directly making elements that provide no value on small screens disappear.
If you have a giant sidebar with ads and secondary links, on a mobile phone it will push the main content down, forcing the user to scroll infinitely. The solution is to be drastic.
/* On mobile, the sidebar simply doesn't exist */
.sidebar {
display: none;
}
/* Only show it when there is plenty of space */
@media (min-width: 1024px) {
.sidebar {
display: block;
}
}
Don’t be afraid to use display: none on mobile devices. Simplifying the interface usually improves the user experience a lot. If it doesn’t fit and it’s not the main content, out it goes.
Media Queries for Orientation
Besides width, we can query other characteristics. For example, whether the screen is portrait or landscape.
@media (orientation: landscape) {
.gallery {
grid-template-columns: repeat(3, 1fr);
}
}
It is not used as much as min-width, but it can be useful for very visual interfaces, games, dashboards, or elements that change a lot when the phone is rotated.
Don’t overuse very specific conditions. The more special rules you add, the more combinations you’ll have to maintain. Start with screen width and add other conditions only when they truly add value.
