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 Years
Discussion Span
Last Post by Violet_82

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


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


Thanks for the reply

I now have this

@media (min-width: 1100px) and (max-width: 1260px){
.maininfo{width:95%; margin: 0 auto;}

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.


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

Edited by diafol


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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.