Site logo appears too small on home page, but appears normal in full site editor

georgenink · Member · Jun 16, 2022 at 1:51 pm
Copy link

Add topic to favorites
Hello,
I uploaded an open source sunflower image as my site logo. It was showing up normally on the site last week – about the same size as the site title – when looking at my site in a desktop browser, mobile browser, and using the full site editor.
Now, it still appears normal size in the full site editor, but shows up tiny on my home page in both mobile and desktop.
How can I make it go back to its normal size? I also find it strange that it’s showing up this way now, when I didn’t make any changes recently to the site at all.
Thank you,
Georgie

The blog I need help with is: (visible only to logged in users)
mohammadriyad · Member · Jun 16, 2022 at 3:24 pm
Copy link
Hi there,
I found below css added on your website which is making the logo smaller.
```
.wp-block-site-logo img {
    height: auto; 
    max-width: 100%;
}
```
To solve this,
>Go to your_site ->Appearance->Additional_CSS
>From the next screen on additional css remove the below css
```
.wp-block-site-logo img {
    height: auto; 
    max-width: 100%;
}
```
>Save the changes.

Hope it will solve the issue. :) Or you can let us know here.
Thanks
georgenink · Member · Jun 16, 2022 at 4:30 pm
Copy link
Thank you for the quick response!
Unfortunately I cannot add custom CSS since I am using the free version of wordpress. When I do try to “customize additional CSS”, I get the paywall. Do you know of a different workaround?
It is strange, as I said it was functioning normally and the logo was the right size, then changed (seemingly on its own) last week without me making any changes to the site.

I appreciate your help!
staff-totoro · Staff · Jun 16, 2022 at 10:41 pm
Copy link
Hi @georgenink

Out of curiosity have you made any changes to the templates on your site? I noticed when I examine the Header template part, I see that the logo is nested within several Group Blocks as shown here:

I suspect that this is causing a scaling issue, especially given the fact that one of the groups has image size settings added to it. were you trying to scale the size of your logo to make it smaller than it was when you first added it?

With your permission can we remove the logo from this nested group of blocks to see if that helps? Thanks for confirming.
georgenink · Member · Jun 17, 2022 at 4:02 pm
Copy link
Hi,
I am not sure why the logo is nested within so many groups! I do not think I added them or made any changes to the templates on my site. Yes for sure, you have my permission to remove it from being within those groups, and we can see if that helps the size issue?

Many thanks for your help!
helper-heroponriki · Member · Jun 17, 2022 at 7:05 pm
Copy link
Can you take a look now to see if that fixed things?

To note, here’s what changes I made:

Let us know if you still need help!
georgenink · Member · Jun 18, 2022 at 7:51 pm
Copy link
That did fix the size issue, thanks so much! Appreciate it.
One final question. In the past I had been able to “align right” on the logo itself so it appeared a little closer to the site title (less of a gap between them). Now I am not seeing that option when I click on the logo in the full site editor. Any idea why this is?
Thanks for your help.
helper-heroponriki · Member · Jun 19, 2022 at 2:22 pm
Copy link
Now I am not seeing that option when I click on the logo in the full site editor. Any idea why this is?

The Russell theme is a child of the Blockbase theme, which is the default parent theme for the new full site editor, and as such, blocks that would normally have customization options (like the Site Logo block) are more limited since the parent theme controls these things.

It could be possible to affect that alignment using CSS, but the Personal plan you’re site is currently subscribed to doesn’t provide access to the CSS editor. You would need to upgrade to the Pro plan to access that feature.

Let us know if you decide to upgrade and we can help sort out what code you would need to use. I hope that clarifies things!
georgenink · Member · Jun 19, 2022 at 11:00 pm
Copy link
I understand, thanks for the info.
The slight extra space between logo and site title is not a big deal, even though it was not there before. I’m happy to leave it as is.
My issue now is, since you made that change, the header shows up wrong on mobile version (I’m testing on Firefox and chrome on an android.) There is a wide margin both to the left and right of the logo, which squishes the site title. Before this change (removing the logo from being nested within the groups) the header was showing up correctly on mobile version.
Can you advise? I would really appreciate a quick response since I am trying to get this issue sorted today if possible.
georgenink · Member · Jun 20, 2022 at 12:54 am
Copy link
I figured out a fix that somewhat worked in terms of the logo alignment on mobile. It is still not perfect (too much space around the logo) so any advice appreciated. Thanks!
staff-totoro · Staff · Jun 20, 2022 at 2:42 am
Copy link
It’s hard to say because the default behaviour of this theme if you have a logo set is to center the logo on mobile, with the site title shown below that.

You can see here in this screenshot from my test site (desktop view on the left, mobile on the right)

Unfortunately there is not (yet) the ability to set mobile-only behaviour on blocks in the site editor, and the changes you have made to the desktop view seem to not apply on mobile as expected. The site editor is in beta at the moment so I expect that this will change over time as more controls are added to the editor. For now the only way to specify how this would look on mobile is to add CSS to your site, which would require upgrading to the next plan… it’s not really an option you can use on the Personal Plan.

Would you like to consider upgrading to the Premium Plan? If so we’re happy to help with CSS to change how this looks on mobile.

Let us know if you need further assistance or if you have any questions.

No items found.