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.
Pratik
SWE with 15+ years of experience building and maintaining web apps and extensive BE infrastructure
Jaime Orts-Caroff
I'm a Senior Android developer, open to work in various fields
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.
Jared Hasson
Full time lead founding dev at a cyber security saas startup, with 10 yoe and a bachelor's in CS. Building & debugging software products is what I've spent my time on for forever
Prakash Prajapati
I’m a Senior Python Developer specializing in building secure, scalable, and highly available systems. I work primarily with Python, Django, FastAPI, Docker, PostgreSQL, and modern AI tooling such as PydanticAI, focusing on clean architecture, strong design principles, and reliable DevOps practices. I enjoy solving complex engineering problems and designing systems that are maintainable, resilient, and built to scale.
Basel Issmail
’m a Senior Full-Stack Developer and Tech Lead with experience designing and building scalable web platforms. I work across the full development lifecycle, from translating business requirements into technical architecture to delivering reliable production systems.
My work focuses on modern web technologies, including TypeScript, Angular, Node.js, and cloud-based architectures. I enjoy solving complex technical problems and helping teams turn product ideas and prototypes into working platforms that can grow and scale.
In addition to development, I often collaborate closely with product managers, business analysts, designers, and QA teams to ensure that solutions align with both technical and business goals.
I enjoy working with startups and product teams where I can contribute both as a hands-on engineer and as a technical partner in designing and delivering impactful software.
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.
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
BurnHavoc
Been around fixing other peoples code for 20 years.
prajwalfullstack
Hi Im a full stack developer, a vibe coded MVP to Market ready product, I'm here to help
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.