CSS - @media screen and (max-width: ---px) not working on firefox mobile

user_7937306 0
Viewed 227

I want to replace the logo in the header of a website when it is is viewed on a mobile screen (screen width less than 500px). So I wrote the following CSS

@media only screen and (max-width: 500px) {.logo img{ content:url("....."); }}

It's working fine on chrome but not on firefox.

Can someone help me, please?

media-queries firefox screen css width
3 Answers

Firstly make sure you have this meta in the of your website:

<meta name="viewport" content="initial-scale=1.0" />

Secondly, try to use this

@media(max-width:500px){
/*Here your code*/
;}
user_85713020
user_48064700

Ok I have managed to resolve the problem in a different way. Instead of replacing the logo with a different one using the content command (which apparently gives problems in firefox), I kept the same logo and set the maximum width with max-width command using vw as a unit.

So this is how it looks like in the end.

@media only screen and (max-width: 500px) {
.logo img{
max-width: 70vw;}
}

It seems to work fine both on chrome and firefox.

user_79373060
Related