Different logos for different devices

[di]

I'd like to use a condensed version of my logo (just Adunate) for smaller devices while continuing to use the horizontal version for larger screens. How do I do this?

I'm currently using Infinity Pro but will likely change to a new theme.

https://adunate.com

[Anita]

You could reduce it down on desktop via CSS to 315px and you could keep the same one on desktop and mobile.

.header-image .site-title > a {
    background-size: contain !important;
    float: left;
    min-height: 65px;
    width: 315px;
}

Just look for this in the stylesheet .header-image .site-title > a and change the width to 315px.

If you still want to use the edited logo, then try something like this.

Try adding this to the stylesheet and then make your adjustments to the device size and the width.

@media only screen and (max-width: 600px) {
   .header-image .site-title > a {
       background: url(YOUR LOGO URL HERE) no-repeat !important;
       background-size: contain !important;
       float: none;
       min-height: 65px;
       width: 400px;
  }
}

---

Love coffee, chocolate and my Bella!

[Author]

Posts