CSS Media queries not acting as they should.

[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?

[GlenRogers]

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

[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

[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!

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.

[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?