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.
Krishna Sai Kuncha
Experienced Professional Full stack Developer with 8+ years of experience across react, python, js, ts, golang and react-native. Developed inhouse websearch tooling for AI before websearch was solved : )
Dor Yaloz
SW engineer with 6+ years of experience,
I worked with React/Node/Python
did projects with React+Capacitor.js for ios
Supabase expert
Matt Butler
Software Engineer @ AWS
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.
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.
Stanislav Prigodich
15+ years building iOS and web apps at startups and enterprise companies. I want to use that experience to help builders ship real products - when something breaks, I'm here to fix it.
MFox
Full-stack professional senior engineer (15+years). Extensive experience in software development, qa, and IP networking.
Kingsley Omage
Fullstack software engineer passionate about AI Agents, blockchain, LLMs.
Jacek Rozanski
Senior PHP/Symfony developer and DevOps engineer with 20+ years of professional experience, running opcode.pl (web development agency, est. 2004).
Day job: I'm the sole backend developer at merketing company where I own and maintain 11 PHP/Symfony microservices on AWS (ECS Fargate, RDS, S3, CloudFront), handle the full CI/CD pipeline (Bitbucket Pipelines, Docker), and manage monitoring with Sentry and CloudWatch. These services handle high request volumes in production every month.
What I bring to AI-built apps:
- I audit and fix security issues (OWASP methodology), performance bottlenecks, and architectural problems in codebases generated by Cursor, Claude Code, Lovable, Bolt, and v0
- I refactor AI-generated prototypes into production-grade applications with proper error handling, testing, and clean architecture (SOLID, DDD, hexagonal architecture)
- I set up the infrastructure AI tools don't touch: AWS hosting, CI/CD pipelines, automated deployments, database optimization, monitoring, and alerting
- I integrate external services: payment providers, email systems, partner APIs, SSO/auth
Tech stack: PHP 8.x, Symfony, React, Next.js, PostgreSQL, MySQL, Docker, AWS (ECS, RDS, S3, SQS/SNS, CloudFront), Terraform, Supabase. I also use AI tools daily (Claude Code, Cursor) in my own workflow, so I understand both the strengths and the gaps in AI-generated code.
Based in Poland (CET timezone). Available for async work and calls during EU/US business hours.
Jaime Orts-Caroff
I'm a Senior Android developer, open to work in various fields
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.