@media queries issues

Question

I'm modifying someone else's css and I try to make the page responsive with implementing @media query. I implemented:

@media screen and (max-width: 1300px),
screen and (max-width: 1024px) {}

@media only screen and (max-width: 860px) {}

which works fine, but when I implement @media screen and (max-width: 600px){} it seems it's not working.

OR - on chrome and opera seems to work quite ok, but not on FF: on FF the page is cutted at the right end, no scroller and I really don't know why. It doesn't change even if I use positon:relative, I checke - I don't have any of 'overflow:hidden'.

And the other thing - for media query it is suggested to use min-width - but if I use min-width, then only the lowest (for example min-width:600) is applied.

I think I missed something here ... any suggestions? I would really appreciated them .. as I'm very keen on responsive web design.

Answer 1

This is a clean way to test if your @media queries are working or not:

body {
    background-color:black;
}

@media screen and (min-width: 1024px) and (max-width: 1300px) {
    body {
        background-color:red;
    }
}

@media screen and (max-width:860px) {
    body {
        background-color:yellow;
    }
}

@media screen and (max-width: 600px) {
    body {
        background-color:orange;
    }
}

Your background should be black by default, red if if the min-width of your screen is 1024 pixels, yellow if it falls below 860px, and orange if it falls down to 600px.

So make sure that there are no conflicting media queries in your stylesheet.

http://jsfiddle.net/crUVv/show/

Answer 2

This may not be your actual problem, but I think worth pointing out that when testing responsiveness to media queries for small viewport sizes, make sure all the browser window adornments are not getting in the way.

I had a "problem" like this recently. At first I thought Firefox media queries were at fault, until I checked and realised that it was the browser nav bar size stopping me from actually resizing below my min-width value.

i.e. it wasn't the page at fault - there was just too much stuff in the nav bar that prevented the browser from resizing below a certain point. This also explained why the behaviour seemed different in different browsers

Turn off the browser nav bar and it worked fine. Doh!