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/