A website has no idea, in advance, what it will be viewed on. It might be a large monitor, a phone held upright, a tablet on a kitchen table or a sheet of paper coming out of a printer. Media queries let CSS ask about the situation it finds itself in, then adjust accordingly.
This is the fourth and final entry in the CSS companion series. The responsive design article touched on media queries briefly. Here is the full tour, including the less obvious conditions that go well beyond screen width.
The Basic Syntax
@media (min-width: 768px) { .sidebar { display: block; }}
A media query starts with @media, followed by a condition in brackets and a block of CSS. The rules inside apply only when the condition is true. Here, the sidebar appears only when the screen is at least 768 pixels wide. When the condition is no longer true, the rules stop applying, with no scripting involved.
Mobile First or Desktop First
Mobile First with min-width
.columns { display: block;}@media (min-width: 768px) { .columns { display: flex; }}
The base styles suit small screens, and min-width queries add enhancements as space allows. This tends to keep the CSS lean, because phones get the simple version and larger screens get the extras. It is the approach most modern guidance recommends.
Desktop First with max-width
@media (max-width: 767px) { .columns { display: block; }}
Here the base styles suit large screens, and max-width queries strip things back for smaller ones. It works, but tends to need more overriding rules, and mixing the two approaches in one stylesheet is a common cause of confusion.
Choosing Breakpoints
A breakpoint is a screen width at which the layout changes. Many guides list standard values for phones, tablets and desktops, and those can be a reasonable starting point. A better approach is to widen and narrow your browser window and add a breakpoint at the point where the design itself starts to look awkward.
Devices vary too much for a fixed list to hold, so content-led breakpoints age better than ones tied to particular products. Keeping the number of breakpoints small also keeps your CSS easier to maintain.
Beyond Screen Width
Width is the most common condition, but media queries can respond to much more.
Dark Mode
@media (prefers-color-scheme: dark) { body { background: #111; color: #eee; }}
Many people set their device to a dark theme. This query lets your site follow that preference automatically, without a toggle.
Reduced Motion
@media (prefers-reduced-motion: reduce) { * { animation: none; transition: none; }}
Some people experience discomfort or nausea from animation and set their device to reduce it. Respecting this preference is a genuine accessibility improvement, and worth including on any site that uses movement.
@media print { nav, footer { display: none; }}
Print styles control how a page looks on paper, for example hiding menus and adverts. It is a small, often-forgotten courtesy for pages people might print, such as recipes, directions, or invoices.
Orientation and Hover
@media (orientation: landscape) { .hero { height: 60vh; }}@media (hover: hover) { .button:hover { background: #ddd; }}
Orientation detects landscape or portrait. The hover query checks whether the main input device can hover at all, which helps avoid hover effects that behave awkwardly on touch screens.
Combining Conditions
@media (min-width: 768px) and (max-width: 1023px) { .sidebar { width: 30%; }}
Conditions can be joined with and, and several queries can be separated by commas to mean or. Keep them readable. A tangle of overlapping queries is the easiest way to end up with styles that behave unpredictably.
A Note on Container Queries
.card-wrapper { container-type: inline-size;}@container (min-width: 400px) { .card { display: flex; }}
Media queries respond to the browser window. Container queries, now supported in current major browsers, respond to the size of a parent element instead. That is useful for components that can appear in a wide main column in one place and a narrow sidebar in another. They complement media queries rather than replacing them, and are worth learning once the basics feel comfortable.
Why Media Queries Genuinely Matter
- They are the core mechanism behind responsive design, which supports the mobile experience Google evaluates
- Preference queries such as dark mode and reduced motion make a site more comfortable and accessible for the people using it
- Print styles and other special cases polish the experience in places many sites ignore
- CSS-only adaptation avoids the extra weight and fragility of JavaScript for layout changes
Media Queries and WordPress
Most modern themes ship with media queries built in, and the block editor handles much of the responsive behaviour itself. When you add your own CSS through the Customizer, the Site Editor or a child theme, media queries are how you make those changes behave on different screens. Test on real devices, since caching and optimisation plugins can sometimes delay changes from appearing.
A Quick Media Queries Checklist
☐ Start with mobile-first styles and add min-width queries for larger screens
☐ Set breakpoints where the design needs them, not only at standard device widths
☐ Keep the number of breakpoints small and the queries easy to read
☐ Respect prefers-reduced-motion if your site uses animation
☐ Consider prefers-color-scheme if dark mode would help your visitors
☐ Add basic print styles for pages people are likely to print
☐ Test on real phones and tablets, not only a resized desktop window
Frequently Asked Questions
What is the difference between min-width and max-width?
A min-width query applies once the screen is at least that wide, so it adds styles as space increases. A max-width query applies up to that width, so it adjusts styles as space decreases. Min-width suits a mobile-first approach.
Do I need the viewport meta tag as well?
Yes. Without it, many mobile browsers pretend to be a wider desktop screen, and your media queries may not behave as intended. The viewport tag in the page head is what makes them work properly on phones.
How many breakpoints should I use?
As few as the design needs. Many sites work well with two or three. Each extra breakpoint adds complexity, so add one only when the layout genuinely breaks down at a particular width.
Can I use media queries in WordPress without a plugin?
Yes. Add them to your theme’s stylesheet, a child theme, the Site Editor’s additional CSS or the Customizer’s Additional CSS panel. No plugin is needed.
Do media queries affect SEO?
Not directly. They support responsive design, which affects mobile usability and the page experience signals search engines consider, especially given Google’s mobile-first indexing.
Want Your Site Checked on Different Devices?
If you would like a second opinion on how your site behaves on phones, tablets and larger screens, get in touch for a plain conversation with no obligation and no sales pitch.