0

I'm using the twenty fifteen theme.

I have a logo set using the WP Customizer.

I want to have the image change on mobile or tablet view.

The breakpoint is anything smaller than 59.6875em.

I'm using this code:

@media only screen and (max-width: 59.6875em) {
  .custom-logo {
    content: url("https://www.example.com/example/wp-content/uploads/Logo_Wide_2x.png");
        width: 300px;
  }
}

It works in Chrome but not Firefox.

I've tried adding :before and :after and adding an a tag, as suggested on other answers, but none of that works.

Can anyone suggest what's wrong, and how I can get this to work on Firefox?

Here is the html:

<div class="site-branding">
    <a href="https://www.example.com/example/aa00/" class="custom-logo-link" rel="home" itemprop="url"><img src="https://www.example.com/example/aa00/wp-content/uploads/sites/2/2019/04/cropped-Logo_248_2x.png" class="custom-logo" alt="Seed" itemprop="logo" srcset="https://www.example.com/example/aa00/wp-content/uploads/sites/2/2019/04/cropped-Logo_248_2x.png 248w, https://www.example.com/example/aa00/wp-content/uploads/sites/2/2019/04/cropped-Logo_248_2x-150x150.png 150w" sizes="(max-width: 248px) 100vw, 248px" width="248" height="248"></a>
</div>
1
  • did you try to clear the browser cashe ?
    – Atef
    Commented Apr 22, 2019 at 14:26

2 Answers 2

1

Instead of trying to change the URL of the img tag, use your media query to hide the image and change the :before of your <a>. Like this...

@media screen and (max-width: 59.6875em) {
    .site-branding img {
        display:none;
    }
    .site-branding a::before {
        content: url("https://www.example.com/example/wp-content/uploads/Logo_Wide_2x.png");
    }
}
4
  • Thank you for your answer. However, I can't use this code in the Customizer, <a class="custom-logo" href="#"> <img class="custom-logo" src="placeimg.com/640/480/animals"> </a> because it gives an error, saying: Markup is not allowed in CSS.
    – Jim Duggan
    Commented Apr 22, 2019 at 17:04
  • That was just an example. Use whatever wrapper is around the img. Add your markup to the question. Commented Apr 22, 2019 at 17:06
  • I updated my answer since you provided the markup. tested and works. Commented Apr 22, 2019 at 19:42
  • Thank you kindly. It works, but now there seems to be no way to set the width of the replacement image. I've tried adding a width to .custom-logo and to .custom-logo-link and also to .site-branding but the image always shows at full width. In the example shown in the original question, the width value does actually work.
    – Jim Duggan
    Commented Apr 22, 2019 at 20:04
-1

This can be done with classes for each screen size and media queries. I saw this answered on this page originally: https://stackoverflow.com/questions/34984737/display-a-different-logo-on-mobile-and-desktop

<style>
/* hide mobile version by default */
.logo .mobile {
display: none;
  }

/* when screen is less than 59.6875em wide
 show mobile version and hide desktop */
@media (max-width: 59.6875em) {
.logo .mobile {
  display: block;
}
.logo .desktop {
  display: none;
}
}
</style>

<div class="logo">
  <img src="/images/logo_desktop.png" class="desktop" />
  <img src="/images/logo_mobile.png" class="mobile />
</div>
3
  • Uh no, that works a little bit different. Buzzword srcset. See css-tricks.com/responsive-images-css
    – leymannx
    Commented Apr 22, 2019 at 15:10
  • leymannx, ok can you please set up the code for the srcset method as a solution to the question above?
    – Iisrael
    Commented Apr 22, 2019 at 15:31
  • No, as this is nothing WordPress-specific. Apart from that the link already explains it all, no?
    – leymannx
    Commented Apr 22, 2019 at 16:40

Not the answer you're looking for? Browse other questions tagged or ask your own question.