Varia & Child Themes: Site Logo is not being resized

[itowhid06]

Steps to replicate

Go to the customizer and add a site logo. Then go to the homepage and see the Logo is being shown in full size. This is happening because there is no styling being applied for site-logo here https://github.com/Automattic/themes/blob/master/varia/sass/components/header/_site-branding.scss#L3

Result

Expected

The logo should be properly resized. Adding minimal CSS like following could solve the issue

.site-logo {
	.custom-logo-link {
		display: inline-block;
		width: 64px;
		height: 64px;
	}
}

After applying the above CSS

[itowhid06]

Though I am not sure about using fixed width & height, should we use max-width & max-height instead?

[mrfoxtalbot]

This is still an issue affecting Varia child themes

Hever

Maywood

Rivington

There are multiple workarounds for this (CSS or just uploading a scaled-down version of the logo) but the way it currently works it can be very confusing and frustrating (32398344-hc).

[jordesign]

Confirming this should be prioritised if possible. Even with FSE arriving soon - we'll have lots of users still using Varia themes and running into this issue.

[kdevnel]

Adding this case being affected by this - 4567802-zd-woothemes

No CSS option available to help this specific user either. Solution is upgrade, fix the issue or rebuild the site header in another blockbase theme instead.

[mrfoxtalbot]

No CSS option available to help this specific user either. Solution is upgrade, fix the issue or rebuild the site header in another blockbase theme instead.

@kdevnel, they could also scale the logo down and reupload it.

[kdevnel]

@mrfoxtalbot sadly this is the core issue for that user. For 3 weeks we've tried to make that solution work but the logo ends up blurry when resized to about 100px high. Details are in the referenced link above.

[pkevan]

Seems this isn't limited to just Varia themes - it is reproducible using a Blockbase child theme also - so it's unlikely solvable via the theme.

Digging further, it seems like it's a flexibility in theme support for Custom logos, and a setting. (https://developer.wordpress.org/reference/functions/add_theme_support/, see flex-width flex-height).

I'd suggest this is closed as a bug with the Varia theme and any related child theme as it's designed for flexibility of logo, or otherwise switch to a more rigid design.

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 4567802-zen