Everything else on my site is responsive, except for logo and short logo.
I'm using the More theme.
Have tried all the fixes suggested: no luck.
I'm a teacher with only a rudimentary understanding of CSS. Don't be afraid to spell it out for me!
I just need the banner-type logo I've inserted to change size according to change in display size.
Thanks!
It seems as if the logos are supposed to be defined as an "img.responsive" class, but, right now, they're not.
You can manually change logos to responsive through CSS, but it will take a bit of work. First, you need to know what the element is called. To do this, you can open the developer tools on your browser of choice and select the inspector tool. Click on the logo to display what the logo/banner properties. You are looking for the element ID. Once you have the ID, you will need to add the CSS into the theme settings. Usually, themes have a text box just for this purpose. You will then need to enter CSS to set two properties for the image. Set the Width property to 100% and the Max-Width property to the maximum size the image should be displayed. If you need help with the syntax for this, there are plenty of internet resources, or you can respond to this post.
Thank you!
I actually took and modified some older advice from a post and almost fixed it satisfactorily.
I added
div.logo {background-size: 100% auto;}
div.logo {height: 175px;} /*to accommodate my larger logo. Problem is on mobile / tablet, div section still shows as 175, so there's a big white space. */
div.smalllogo {background-size: 100% auto;} /*This didn't work out completely, either, but there was some resizing.*/
The older advice said to add "a.logo {background-size: 100% auto;}" but it seems as if that applied to an older version, so I tried "div" instead of "a".
I'm thinking your solution will be more comprehensive. I'll give it a try.
Thanks again.
Greetings:
I have the exact problem Did you ever figure out a work around,
Thanks in advance.
