Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I’ve got following media-queries rules:
@media only screen and (max-width: 854px), only screen and (for devices <= 854px)
(max-device-width: 854px)
@media only screen and (min-width: 855px), only screen and (for devices > 854px)
(min-device-width: 855px)
It’s strange but Chrome (and may be other browsers) use this rules at the same time (when width is 800px for example) (check screen). What’s wrong?
They are falling back to the same rule because you are using
device-width, the condition fordevice-widthtargets your device’s physical width so if that condition is satisfied then that’s the only rule that will be applied (regardless if you resize your browser to any width). Remove both thedevice-widthconditions from your media queries, this should solve your issue.To learn more about the difference between
device-widthandwidth, refer to this link: http://www.w3.org/TR/css3-mediaqueries/#media1