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.
Simon A.
I'm a backend developer building APIs, emulators, and interactive game systems. Professionally, I've developed Java/Spring reporting solutions, managed relational and NoSQL databases, and implemented CI/CD workflows.
Luca Liberati
I work on monoliths and microservices, backends and frontends, manage K8s clusters and love to design apps architecture
Yovel Cohen
I got a lot of experience in building Long-horizon AI Agents in production, Backend apps that scale to millions of users and frontend knowledge as well.
David Olverson
Solo dev shipping production apps with AI-assisted development. I specialize in rescuing broken Lovable/Bolt/Cursor builds and taking them to production. 10+ apps shipped including SaaS CRMs, gaming platforms, real estate tools, and Discord bots. Stack: Next.js 16, TypeScript, Tailwind CSS, FastAPI, PostgreSQL, Prisma. I use Claude Code with 50+ custom skills for rapid delivery. Average turnaround: 2-4 weeks from broken prototype to production.
Pratik
SWE with 15+ years of experience building and maintaining web apps and extensive BE infrastructure
Richard McSorley
Full-Stack Software Engineer with 8+ years building high-performance applications for enterprise clients. Shipped production systems at Walmart (4,000+ stores), Cigna (20M+ users), and Arkansas Blue Cross. 5 patents in retail/supply chain tech. Currently focused on AI integrations, automation tools, and TypeScript-first architectures.
Milan Surelia
Milan Surelia is a Mobile App Developer with 5+ years of experience crafting scalable, cross-platform apps at 7Span and Meticha. At 7Span, he engineers feature-rich Flutter apps with smooth performance and modern UI. As the Co-Founder of Meticha, he builds open-source tools and developer-focused products that solve real-world problems.
Expertise:
💡 Developing cross-platform apps using Flutter, Dart, and Jetpack Compose for Android, iOS, and Web.
🖋️ Sharing insights through technical writing, blogging, and open-source contributions.
🤝 Collaborating closely with designers, PMs, and developers to build seamless mobile experiences.
Notable Achievements:
🎯 Revamped the Vepaar app into Vepaar Store & CRM with a 2x performance boost and smoother UX.
🚀 Launched Compose101 — a Jetpack Compose starter kit to speed up Android development.
🌟 Open source contributions on Github & StackOverflow for Flutter & Dart
🎖️ Worked on improving app performance and user experience with smart solutions.
Milan is always happy to connect, work on new ideas, and explore the latest in technology.
BurnHavoc
Been around fixing other peoples code for 20 years.
Antriksh Narang
5 years+ Experienced Dev (Specially in Web Development), can help in python, javascript, react, next.js and full stack web dev technologies.
Meïr Ankri
Full-stack developer specializing in React / Next.js / Node.js with 6+ years of experience. I've worked across various sectors including automotive (Reezocar/Société Générale), healthcare (Medical Link SaaS), and e-commerce (Glasman). I build web apps end-to-end, from architecture to production, with a focus on scalability, performance, and code quality. I also mentor junior developers and contribute to technical decisions and code reviews.
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.