Media queries not work in firefox

问题:

I have added following media query for my php project to hide an image when screen width is 1254px.

@media screen and (max-width: 1255px ) {
    .visible-desktop {
        display: none;
    }
}

It works on Chrome correctly but it's not working on Firefox. Can anyone help me to solve this problem?

回答1:

Your media query is right and working perfectly in chrome and in firefox.

As you can see on this JSFiddle...

I guess (since we dont have any more code) .visible-desktop's display is being setted on some other position where you cant override it with your none. You could try using !important, which is not a beauty way, but can fix it in most times, but also not everytime.

display: none !important;

回答2:

Your Code completely Worked.

See Live Demo Here

And Check This Url in Firefox. then Also work. i also try . See Image

Snippet Example

 @media screen and (max-width: 1255px) {
            .visible-desktop{
                display: none;
            }
        }

<div class="visible-desktop">
Hello visible-desktop Class 
</div>