Cursor
mobile
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
Media query has no effect
Styles not updating on resize
CSS not responding to screen width
Layout identical on mobile and desktop
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.
Kingsley Omage
Fullstack software engineer passionate about AI Agents, blockchain, LLMs.
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.
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.
Alvin Voo
I’ve watched the tech landscape evolve over the last decade—from the structured days of Java Server Pages to the current "wild west" of Agentic-driven development. While AI can "vibe" a frontend into existence, I specialize in the architecture that keeps it from collapsing.
My expertise lies in the critical backend infrastructure: the parts that must be fast, secure, and scalable. I thrive on high-pressure environments, such as when I had only three weeks to architect and launch an Ethereum redemption system with minimal prior crypto knowledge, turning it into a major revenue stream.
What I bring to your project:
Forensic Debugging: I don't just "patch" bugs; I use tools like Datadog and Explain Analyzers to map out bottlenecks and resolve root causes—like significantly reducing memory usage by optimizing complex DB joins.
Full-Stack Context: Deep experience in Node.js and React, ensuring backends play perfectly with mobile and web teams.
Sanity in the Age of AI: I bridge the gap between "best practices" and modern speed, ensuring your project isn't just built fast, but built to last.
Matthew Butler
Systems Development Engineer @ Amazon Web Services
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
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.
Vlad Temian
15+ years shipping production infrastructure for startups. Former CTO at qed.builders (acquired by The Sandbox).
Cursor ambassador and agentic tooling builder.
I've scaled systems, automated deployments, and built observability tools for AI coding workflows. I specialize in taking vibe-coded apps from broken prototype to production-ready: fixing Supabase auth/RLS, Stripe integrations, deployment pipelines, and cleaning up AI-generated spaghetti.
I build tools in this space (agentprobe, claudebin, micode) and understand both sides: how AI generates code and why it breaks.
https://blog.vtemian.com/
Antriksh Narang
5 years+ Experienced Dev (Specially in Web Development), can help in python, javascript, react, next.js and full stack web dev technologies.
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.
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.