Member Avatar for GlenRogers

Hi
I'm using whatsmy.browsersize.com to get my browser size for adding mediaquries to my css files.
For some reason when i write a media query for max-width: 1229px the query gets applied at 1350px!

I'm writing my queries like this

@media screen and (max-width: 1229px){
.galleries > ul > li a {padding: 0 .3rem 0 .3rem;}
}

And i have

<meta name="viewport" content="width=device-width" />

on my web page.

Can anyone see what im doing wrong?

  • 3 Contributors
  • 5 Replies
  • 259 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by Violet_82

Dani AI

Generated

Diagnostic checklist and quick fixes for media queries that trigger at the wrong widths or unexpectedly overwrite base styles — addressing ' issue and tying in points from and .

Run these quick checks in the browser console to see what the layout viewport actually reports and whether a media query matches:

console.log('innerWidth:', window.innerWidth, 'outerWidth:', window.outerWidth, 'devicePixelRatio:', window.devicePixelRatio);
const mq = window.matchMedia('(max-width:1200px)');
console.log('matches 1200px?', mq.matches);
if (mq.addEventListener) mq.addEventListener('change', e => console.log('mq change:', e.matches));
else mq.addListener(e => console.log('mq change:', e.matches));

Common causes and what to inspect next:

  • Browser zoom / OS scaling: Zoom != 100% or a scaled display can shift CSS pixels so breakpoints appear to “move.” Reset zoom (Ctrl/⌘+0) and check system display scaling.
  • Measurement mismatch: Some tools report outerWidth or screen size. CSS media queries use the layout viewport (window.innerWidth). Use the console code above rather than a third‑party size site.
  • CSS parsing errors: A missing brace or stray comment can make later rules behave as if inside a different @media block. Validate or isolate the CSS into a minimal test file.
  • Cascade & load order: Later rules with identical specificity win. If media-query rules are placed before base styles, the base can override them. When using Bootstrap, load custom CSS after Bootstrap or increase selector specificity. As noted, mobile-first (min-width) breakpoints can simplify ordering.
  • Meta viewport for mobile: include an explicit initial scale so mobile browsers don’t pre-scale the layout:
    <meta name="viewport" content="width=device-width, initial-scale=1">

Quick recipe: confirm innerWidth and matchMedia, ensure zoom/display scaling is normal, validate CSS for syntax issues, inspect the computed styles panel to find which rule wins, and verify CSS file order (Bootstrap vs custom). A tiny standalone test page with only one base rule and one media query is the fastest way to isolate the bug.

Recommended Answers

All 5 Replies

Member Avatar for GlenRogers

Now my media queries are overwriting my default styles!What am i doing wrong?

Member Avatar for Violet_82

Have you tried adding a min-width and not using the 'screen'?
I usually borrow my breaking points from the old bootstrap:

/*Tablets*/ @media (min-width:768px) and (max-width:1023px){}
/*Mobiles*/@media (max-width:767px){}

and they've always worked a treat

Member Avatar for GlenRogers

Thanks for the reply

I now have this

@media (min-width: 1100px) and (max-width: 1260px){
.rightside{display:none;}
.rightsidebelow1260{display:block;}
.maininfo{width:95%; margin: 0 auto;}
.vseperator1{display:none;}
.hseperator1{display:block;}
}

I want these styles applied if screen width is over 1100px and below 1260px. But, for some reason they are applie if screen width is over 1260px!

Member Avatar for Member #120589

Do you have any media queries for greater than 1260? If not, then it's probably not changing as there's nothing to change to.

//Edit

Did you mean that it's not displaying between 1100-1260? Your description is a bit ambiguous.

Edited by Member #120589
Member Avatar for Violet_82

Yes, I must admit I have problems understanding your description. However, how are you measuring the width? are you considering scroll bars if any?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.