CSS Media Queries Not Applying in Cursor-Generated Styles
You've used Cursor to generate responsive CSS with media queries, but the styles don't change when you resize the browser or view the site on a mobile device. The desktop layout persists regardless of screen width, or only some media queries apply while others are completely ignored.
Media queries are the foundation of responsive design, and when they don't work, your app looks broken on mobile devices. Cursor may generate media queries with correct syntax but place them in locations where they get overridden, use wrong breakpoint values, or conflict with existing CSS framework styles.
The issue is especially confusing because the CSS looks correct when you inspect it, and the browser's responsive design mode might not trigger the expected changes.
Error Messages You Might See
Common Causes
- Missing viewport meta tag — Without
<meta name="viewport" content="width=device-width, initial-scale=1">, mobile browsers render at desktop width (~980px) and scale down, so media queries never trigger at small widths - Media queries placed before base styles — CSS cascade means later rules override earlier ones. If media queries come before the base styles they're trying to override, the base styles win
- Specificity conflicts — The base CSS uses more specific selectors (IDs, chained classes) than the media query rules, so the base styles always win regardless of screen size
- Wrong breakpoint values — Cursor generated min-width breakpoints when max-width was needed, or used pixel values that don't match the actual device widths
- CSS framework overrides — Tailwind's utility classes or Bootstrap's built-in responsive classes have higher specificity than custom media queries
- Cached CSS file — The browser or CDN is serving a cached version of the CSS without the media queries
How to Fix It
- Verify the viewport meta tag — Check that your HTML head includes
<meta name="viewport" content="width=device-width, initial-scale=1">. This is the #1 cause of media queries not working on real devices - Move media queries after base styles — Ensure all @media blocks come after the base CSS rules they override. For mobile-first design, start with mobile styles and add min-width queries for larger screens
- Match selector specificity — If your base style uses
.container .card .title, your media query must use at least the same specificity, not just.title - Test with DevTools responsive mode — Open Chrome DevTools, toggle device toolbar (Ctrl+Shift+M), and check the computed styles to see which rules are being applied vs overridden
- Use mobile-first approach consistently — Write base styles for mobile, then use
@media (min-width: 768px)for tablet and@media (min-width: 1024px)for desktop
Real developers can help you.
Daniel Vázquez
Software Engineer with over 10 years of experience on Startups, Government, big tech industry & consulting.
Jen Jacobsen
I’m a Full-Stack Developer with over 10 years of experience building modern web and mobile applications. I enjoy working across the full product lifecycle — turning ideas into real, well-built products that are intuitive for users and scalable for businesses.
I particularly enjoy building mobile apps, modern web platforms, and solving complex technical problems in a way that keeps systems clean, reliable, and easy to maintain.
Nam Tran
10 years as fullstack developer
Anthony Akpan
Developer with 8 years of experience building softwares fro startups
Omar Faruk
As a Product Engineer at Klasio, I contributed to end-to-end product development, focusing on scalability, performance, and user experience.
My work spanned building and refining core features, developing dynamic website templates, integrating secure and reliable payment gateways, and optimizing the overall system architecture.
I played a key role in creating a scalable and maintainable platform to support educators and learners globally.
I'm enthusiastic about embracing new challenges and making meaningful contributions.
Kingsley Omage
Fullstack software engineer passionate about AI Agents, blockchain, LLMs.
Victor Denisov
Developer
Matthew Jordan
I've been working at a large software company named Kainos for 2 years, and mainly specialise in Platform Engineering. I regularly enjoy working on software products outside of work, and I'm a huge fan of game development using Unity. I personally enjoy Python & C# in my spare time, but I also specialise in multiple different platform-related technologies from my day job.
Antriksh Narang
5 years+ Experienced Dev (Specially in Web Development), can help in python, javascript, react, next.js and full stack web dev technologies.
Mehdi Ben Haddou
- Founder of Chessigma (1M+ users) & many small projects
- ex Founding Engineer @Uplane (YC F25)
- ex Software Engineer @Amazon and @Booking.com
You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.
Get HelpFrequently Asked Questions
Should I use min-width or max-width in media queries?
Use min-width for mobile-first design (start with mobile styles, add complexity for larger screens) or max-width for desktop-first (start with desktop, simplify for smaller screens). Mobile-first is the modern best practice as it results in simpler, faster-loading mobile styles.
Why do media queries work in Chrome DevTools but not on my phone?
Real devices may have different pixel densities (device pixel ratio). A phone with a 1080px wide screen might report a CSS width of 360px. Also check that your viewport meta tag is correct — DevTools simulates the viewport tag, but your actual HTML might be missing it.