@media questions

Question

I am modifying someone else's css, and I am trying to make the page responsive with the @media request. 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 looks like it doesn't work.

OR - on chrome and opera, it seems to work fine, but not on FF: on FF, the page is cut out at the right end, without a scroller, and I really don't know why. It does not change, even if I use positon: relative, I check - I do not have any "overflow: hidden".

And another thing - it is proposed to use min-width for the media process, but if I use min-width, then only the lowest one is used (for example, min-width: 600).

I think I missed something ... any suggestions? I would really appreciate them ... since I am very interested in responsive web design.

Answer 1

This is a clean way to check if your @media queries are working:

 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 the minimum screen width is 1024 pixels, yellow if it falls below 860 pixels, and orange if it falls to 600 pixels.

Therefore, make sure your stylesheet does not have conflicting media queries.

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

Answer 2

Perhaps this is not your actual problem, but I believe that it is worth paying attention to the fact that when testing the reaction to media queries for small viewports, make sure that all browser windows do not interfere.

I have had a "problem" lately. At first I thought that the requests for media files in Firefox were wrong until I checked and realized that the size of the browser in the navigation bar stops me from actually resizing below my min-width value.

i.e. it was not a page error - there were too many things in the navigation bar that prevented the browser from resizing below a certain point. This also explains why the behavior looked different in different browsers.

Turn off the browser navigation bar and it works fine. Doh!