Allow alternate logo on mobile view


(ampburner) #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:

(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.

(Michael Downey) #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.


(ampburner) #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?


(Michael Downey) #4

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


(Kane York) #5

I just finished this feature:


(ampburner) #6

Awesome! Much appreciated!