Swap logo file for mobile?

This topic has 11 replies, 3 voices, and was last updated 7 years, 9 months ago by Pratik.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
January 31, 2017 at 6:39 am #108405
catwingz
Participant
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
January 31, 2017 at 10:41 am #108424
Mahesh
Participant
@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
February 2, 2017 at 2:56 am #108593
catwingz
Participant
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
February 2, 2017 at 12:16 pm #108619
Mahesh
Participant
@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
February 4, 2017 at 6:55 am #108776

catwingz
Participant

@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

February 4, 2017 at 9:21 am #108787
Pratik
Participant
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
February 4, 2017 at 9:45 am #108788

catwingz
Participant

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

February 5, 2017 at 9:09 am #108846

Pratik
Participant

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?

February 5, 2017 at 10:55 am #108854

catwingz
Participant

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.

February 6, 2017 at 9:42 am #108903

Pratik
Participant

Hi @catwingz,

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

Regards,
Pratik

February 6, 2017 at 10:15 am #108911

catwingz
Participant

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.

February 6, 2017 at 10:28 am #108914

Pratik
Participant

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

Regards,
Pratik
Author

Posts