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!

[diafol]

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?