[catwingz]

Hi, I would like to have the logo switch to a different, narrower file on phones. The logo for desktop is too wide and shrinks too much for mobile. I tried

@media screen and (max-width: 767px) {
    #masthead {
        background-image: url("YOUR_IMAGE_URL");
    }
}

from another thread, but it was a different theme and clearly not what I needed. Is this possible?
Thank you

[Mahesh]

@catwingz: Go to Dashbaord=> Appearance=> Customize=> Theme Option=> Custom CSS box and add the following CSS:

@media screen and (max-width: 767px) {
    #site-logo .custom-logo-link {
        display: none;
    }

    #site-logo {
        background-image: url('http://integrationmassage.com/wp-content/uploads/2016/02/stacked-logo-banner-2.jpg');
    	height: 130px;
    	background-size: cover;
        background-repeat: no-repeat;
    }
}

Note: Please change the image url as desired.

Regards,
Mahesh

[catwingz]

Hi,
When it turned out badly I tried changing the height. This produced the same failed results. This is the latest version:

@media screen and (max-width: 767px) {
    #site-logo .custom-logo-link {
        display: none;
    }

    #site-logo {
        background-image: url('http://integrationmassage.com/shadowsite/wp-content/uploads/2017/02/circle-logo-129w.png');
        height: 152px;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

I am working this out on a development site that you can’t see unless you are logged in, so I have created a set of screenshots. At this point I don’t know what (or if) the best size might be for the logo. We’ve been using a separate mobile site and I am hoping to instead switch to taking advantage of the full responsive range of your theme. This problem with the logo is the only roadblock.

This is what the mobile logo should look like
the way it looks with the new code
stretching as screen enlarges – possibly tablet
stretched desktop logo
the full logo on the desktop site

Thank you

[Mahesh]

@catwingz: Please add the following CSS:

@media screen and (max-width: 940px) {
    #site-logo {
      background-image: url('http://integrationmassage.com/shadowsite/wp-content/uploads/2017/02/circle-logo-129w.png');
      height: 180px;
      background-repeat: no-repeat;
      background-size: contain;
    }
    #site-logo .custom-logo-link {
  	  display: none;
    }
}

Regards,
Mahesh

[catwingz]

@Mahesh, this isn’t quite the solution I am shooting for. Using this code makes the logo intended for mobile the right size on phones, but also visible on much larger screens than intended. The regular desktop logo is fine on tablets, so the logo only needs to change on phones. However, if I change the max-width back to even 767, the desktop logo distorts vertically. I am also finding that when the new mobile logo is viewed on a phone it is pushed off to the left. This has led me to experiment with a miniaturized version of the desktop one to make use of the extra space on the right.

Up until now we have been using a separate mobile site which uses the smaller vertical logo, displaying it centered on the screen with the text (in the image) beneath the circle. That would be the ideal outcome, but at least getting it so that it only shows on phones would be something I can work with.

Thank you

[Pratik]

Hi @catwingz,

You can try follwing:

@media screen and (max-width: 600px) {
    #site-logo {
      background-image: url('http://integrationmassage.com/shadowsite/wp-content/uploads/2017/02/circle-logo-129w.png');
      height: 180px;
      background-repeat: no-repeat;
      background-size: contain;
    }
    #site-logo .custom-logo-link {
  	  display: none;
    }
}

Same code but with reduced max-width at top so that only screens with width 600px or less will take this code.

Let me know how it goes.

Regards,
Pratik

[catwingz]

@Pratik, it appears there is a need for an in between step of some kind. I am surprised others don’t have this problem. Phone-sized works with the last bit of code. it looks like this

The problem is with tablet-sized or if no extra code is added. where the desktop logo is completely squashed With no extra code it is this way for both tablet and phone sizes. 🙁

Suggestions?

Thank you—I really appreciate the awesome support you guys offer.

[Pratik]

Hi catwingz,

I am assuming because the logo is a bit longer than usual. Can you post in your site url so I can check it?

[catwingz]

The url for the public site is here. It has the full sized logo. It has a plugin enabled which redirects it to the separate mobile site we want to retire. Unfortunately the only way to see the development site with the code being discussed here is to be logged into the site.

[Pratik]

Hi @catwingz,

It is difficult because we are not able to see the outcome. Let me know how we can proceed.

Regards,
Pratik

[catwingz]

If there is a secure way to do so, I would be happy to give you a login to the development site. That’s the only way I can think of for you to see the code in action.

[Pratik]

Ok, I will email you. Please wait for my email.

Regards,
Pratik

[Author]

Posts