Safari ignores css max-width media requests below a certain point

Question

I'm working on optimizing a responsive site, and Safari (both desktop and mobile) seems to completely ignore media requests below a certain point. I have code like:

@media screen and (max-width: 767px){ /* Safari responds to css here */ } @media screen and (max-width: 640px){ /* css here is ignored by Safari */ } 

Firefox and Chrome both respond accordingly. Does anyone have any idea what is going on?

You can see the site here: http://kgillingham.webfactional.com . What should happen (and works in FF and Chrome) is that when the site gets smaller than 640px, the header font in the slider should become smaller.

to change . Now the site has been updated to use javascript to add a class when the size is less than 640 pixels. This class always uses a smaller font size. This means that it works as expected, but I would rather use CSS queries for the media than javascript, so I would still like to see a solution.

Answer 1

Turns out I lacked a curly brace, so I had code similar to the following:

 @media screen and (max-width: 767px){ /* lots of css */ .some_selector { padding: 20px; /*<---- missing squiggly brace*/ /* more css */ } @media screen and (max-width: 640px){ /* lots more css */ } 

Inserting a missing parenthesis made Safari get started. Other browsers did not strangle the error, in part because it was difficult to track.

Thanks for helping everyone, now I feel pretty stupid.

Answer 2

@Media rules is the same concept as regular css rules, the last rule overwrites the first. but if the rule is different, it does not cancel it.

you can make a workaround by typing, this code will just be interpreted by webkits

 @media screen and (-webkit-min-device-pixel-ratio:0) { /* put webkit CSS here*/ }