2

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?

Joe
  • 4,367
  • 7
  • 33
  • 52
Andrea
  • 21
  • 3
  • Firefox has very good developer tools. Have you tried inspecting your page with them? Does everything look correct there? https://developer.mozilla.org/en-US/docs/Tools – KLP Aug 12 '20 at 05:37

3 Answers3

1

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*/
;}
Dharman
  • 30,962
  • 25
  • 85
  • 135
Sylarman5
  • 110
  • 1
  • 6
0

The content property works with ::before and ::after.

Check this stackoverflow question for detialed information: Content url does not display image on firefox browser

AhmerMH
  • 638
  • 7
  • 18
0

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.

Andrea
  • 21
  • 3