Media query not working properly

Question

Project link:

http://camilo.jacobercreative.com/

Following are the media queries that were premade, I cannot and am not allowed to change them sadly. The issue at hand however is, that the devices pick the smaller respecitve resolution. What I mean by that is, that if the device is supposed to pick the css from suppose (min-width: 992px) and (max-width: 1200px), it picks it from (min-width: 768px) and (max-width: 991px). Hope this makes sense, I cannot seem to find the reason for this.

/*iPhone*/
@media screen and (max-width: 399px) {}

/*Big Phones Portrait and iPhone Portrait*/
@media (min-width: 400px) and (max-width: 639px) {}
/*Big Phones Landscape*/
@media (min-width: 640px) and (max-width: 767px) {}
/*Tablet Portrait*/
@media (min-width: 768px) and (max-width: 991px) {}
/*Tablet Landscape*/
@media (min-width: 992px) and (max-width: 1199px) {}
/*Medium Pcs*/
@media (min-width: 1200px) and (max-width: 1279px) {}
/*Less than equal to 1360*/
@media (min-width: 1280px) and (max-width: 1299px) {}
/*Full width pc*/
@media (min-width: 1300px) and (max-width: 1301px) {}

@media (min-width: 1302px) and (max-width: 1599px) {}

@media (min-width: 1600px) and (max-width: 1601px) {}

@media (min-width: 1602px) {}

Are you basing this on the width of your browser window? That if your browser window is 1200px wide, you believe it should pick the (min-width: 1200px) and (max-width: 1279px) one and not the (min-width: 992px) and (max-width: 1200px) one? — Ming
It picks both, browser and device widths. So if you resize the browser then the css changes and same happens on different devices, it should work as desired but I am not sure what I am doing wrong here. — AspiringCanadian
Well when you think about it, the width is both at a maximum of 1200px and at a minimum of 1200px, so at that exact point, both rules become true. It's less-than-or-equal-to and greater-than-or-equal-to, which means you would have to change them so max-width: 1200px and the other rule starts at min-width: 1201px so there is no overlap. Since you can't change the queries, you would have to pick the one you want to override the other, and give every rule within it more specificity. — Ming
Following are the meta tags, if that helps: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width"> — AspiringCanadian
Nice catch, I have made the changes in the media query now, check the OP for that, still, when I am testing this site in iPad or by pressing Ctrl+Shift+M in firefox, it still gets css from the next smaller media query. — AspiringCanadian

AspiringCanadian AspiringCanadian · Accepted Answer · 2014-04-15T05:41:31

I had accidentally clicked Ctrl+Plus somehow, my view in firefox was zoomed in, and I was testing on iPad, so two coincidences led me to believe something was wrong with the media query.

Media query not working properly

1 Answers