Media Query Responsive Test
What is it?
CSS media queries are the primary mechanism for responsive design, allowing typography, spacing, and component arrangement to adapt to phones, tablets, and desktops. Because Google indexes the web mobile-first, the mobile rendering is the version that gets crawled, evaluated, and ranked, so a layout that does not adapt to small screens is the one search engines see. This test checks whether your page's stylesheets use media queries to adjust the layout across screen sizes.
Why media queries still matter in 2026
Mobile traffic now dominates most sites, and Google indexes the web mobile-first, meaning the mobile rendering is the version that gets crawled, evaluated, and ranked. A site that does not adapt to mobile is one that Google sees primarily through a poor mobile experience, with all the ranking consequences that follow. Media queries are the standard mechanism for adapting that mobile rendering, and they remain essential even as newer responsive primitives (container queries, fluid typography) join them in the toolkit.
Modern best practice is mobile-first: the base styles target mobile, and min-width media queries layer enhancements for larger screens. This pattern keeps the mobile CSS smallest by default, which is both faster to download and easier to reason about, and avoids the trap of designing primarily for desktop and then trying to retrofit a mobile experience.
What this test looks for
- No media queries at all, which usually means a desktop-first layout that does not adapt.
- Fixed pixel widths everywhere, which prevent the layout from flexing.
- Desktop-first styles overriding mobile, where the inherited cascade fights the responsive design.
- Modern layout primitives missing: CSS Grid and Flexbox often eliminate the need for many media queries by responding naturally to available space.
This test verifies that your stylesheets use media queries. The fix guide below covers establishing breakpoints, mobile-first authoring patterns, modern layout primitives that complement media queries, and the role of container queries in newer browsers.
Pass rate:
-
Top 100 websites: 98%This value indicates the percent of top 100 most visited websites in the US that pass this test (in the past 12 months).
-
All websites: 97%This value indicates the percent of all websites analyzed in SEO Site Checkup (500,000+) in the past 12 months.
| 2021 | 99% |
|---|---|
| 2022 | 100% |
| 2023 | 98% |
| 2024 | 98% |
100
75
50
25
0
How do I fix it?
This test fails when the page's stylesheets do not use CSS media queries to adapt the layout to different screen sizes. Media queries are the primary mechanism for responsive design, allowing typography, spacing, and component arrangement to adjust gracefully across devices. Because Google now indexes the web mobile-first, the responsive mobile layout is effectively the version search engines crawl, evaluate, and rank.
Example
/* Mobile-first base styles */
.card { padding: 16px; font-size: 16px; }
/* Tablet and up */
@media (min-width: 768px) {
.card { padding: 24px; font-size: 18px; }
}
/* Desktop */
@media (min-width: 1024px) {
.card { padding: 32px; font-size: 20px; }
}Where to make the change
- Stylesheets: add
@mediablocks for the breakpoints your design needs. Start with mobile-first base styles and layer larger screens on top. - WordPress: most modern themes are responsive. If yours is not, switch to a current theme or add custom CSS for breakpoints.
- Shopify, Wix, Squarespace: all platforms ship responsive themes by default; failures usually point at custom CSS that hard-codes desktop widths.
- Headless or framework sites: CSS frameworks like Tailwind, Bootstrap, and CSS Modules all include responsive utilities; ensure you are using them.
Common causes and how to resolve them
- No media queries at all: add a few breakpoints based on your design. Common choices are 480, 768, 1024, and 1280 pixels.
- Fixed pixel widths everywhere: replace with relative units (
rem,%,vw) and let media queries handle major layout shifts. - Desktop-first styles overriding mobile: reorder so mobile styles are the base and larger breakpoints add desktop refinements.
- Modern layout primitives missing: CSS Grid and Flexbox often eliminate the need for many media queries by responding naturally to available space.
Best practices
- Mobile-first: base styles target mobile;
min-widthmedia queries layer enhancements for larger screens. - Use container queries where supported: they let components respond to their container's size rather than the viewport, which is often more useful.
- Test on real devices: emulator views miss real-world issues such as touch target size and font rendering. Test on actual phones too.
