CSS Media查询可在Chrome中使用，但不适用于Firefox或Safari浏览器

Question

I'm new on stackoverflow and would appreciate and help/input on this matter.

I have been working on a site and it works fine on chrome and is responsive to different device sizes. I tested it on numerous devices. However, on firefox it looks good on my 27"mac which i designed it too, but smaller screen devices it's not working. It's like it's not detecting the media queries at all.

Here is a link to the site: www.ujimatrading.com

and here is a paste of the media query css: http://pastebin.com/uQgzxeTQ

Sorry but i'm a backend developer and not really into front-end stuff so any tips would be highly appreciated.

Many Thanks

Answer 1

You've got some bad nesting going on.

Try cleaning it up like this:

@media screen and (max-width://pixels) { 

}
@media screen and (max-width://pixels) {

}

Answer 2

Sounds like the Viewport hasn't been set. Try adding this to your html code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Explaination here