Allow alternate logo on mobile view

Fonctionnalité
1

Under admin > customize, I have the ability to specify custom css and a html-header for both the desktop and mobile views (independently)

But the site logo is always the same (shared between both views)

I would like the ability to specify a separate image for the mobile view, because my logo is not suitable for small screen displays:

image.jpg640×1136 143 KB

(The font looks kind of crappy on mobile)

This has the additional advantage of saving bandwidth and faster loading times.

Possible implementations:

  • additional setting for the mobile logo (empty defaults to desktop logo)
  • allow to override the image via a stylesheet somehow? If that’s possible.
1 « J'aime »
2

Yes please. This is a problem for anyone with wider logos, I think.

It should be possible with CSS media queries.

This would also help with our hack to get a higher-resolution logo in there for HiDPI displays.

1 « J'aime »
3

How would you do it with media queries? I guess that you would only be able to manipulate it via css if the image is a style background-image, but not as long as it’s an img src?

4

See html5 - Media Query: Image src property change using css - Stack Overflow or Google around for several different techniques.

1 « J'aime »
5

I just finished this feature:

4 « J'aime »
6

Awesome! Much appreciated!