Twenty Twenty-two theme header logo not mobile responsive

Heya, unless I’m missing something, it looks like once you set a logo width in the site editor, there isn’t an option to set a separate responsive width for narrower screens.

So you could try some additional CSS like this to overcome that, tweaking both px values as you like:

/* Logo - reduce size on smaller screens */
@media screen and ( max-width: 500px ) {
  .custom-logo {
    width: 300px !important;
    height: inherit !important;
  }
}

Thank you for replying Kathryn. I’m surprised that this theme is not mobile friendly. That is a real negative and I will probably use another theme that is responsive. I thought we were trying to get away from adding so much css to style themes? Do you know if there is a plan to make this more responsive?

Thank you again.

@apexbee this particular issue is not unique to the Twenty Twenty-Two theme. There seems to be an issue upstream in WordPress full site editing / Gutenberg.

I’ve opened an issue in Gutenberg – https://github.com/WordPress/gutenberg/issues/41115 – so hopefully this can be fixed.

Another way of making sure the logo image does not overflow and automatically resizes on narrower screens would be with this custom CSS:

.custom-logo {
  max-width: 100%;
  height: auto;
}

I have been able to reproduce this, but only it only seems to happen when the logo block has been scaled up (stretched). I added a comment to the issue you opened @uxl, thank you.

@apexbee, could you confirm if you scaled/stretched the logo size prior to noticing this?

@uxl Thank you for the cleaner css. That works well. I appreciate you opening a ticket in Gutenberg about this.

@mrfoxtalbot I did not stretch or scale up the logo size prior to noticing this issue. I just added a 500px wide x 85 px logo to the Template Part for the Header using the beta editor. The image had been uploaded via the media library at this size.

I thought we were trying to get away from adding so much css to style themes? Do you know if there is a plan to make this more responsive?

@apexbee You’re totally right, this should not be happening at all, and it shouldn’t require a custom CSS workaround. It should be fixed, either in Core/Gutenberg, or in the theme.

@uxl Thanks very much for posting the issue on GitHub!

Thank you all. The css worked until I updated WP to 6.0. Now the custom logo is overflowing on mobile view again. I am using this css (I tried removing it but it still overflows):

/* Logo – reduce size on smaller screens */
.custom-logo {
max-width: 100%;
height: auto;
}

Not sure where you put your code, but it should go in your theme’s ‘Additional CSS’ section or your child theme’s style.css file. Seems like WP removed the ‘Customize’ link in the ‘Appearance’ section in the block themes. Just type in your-website-here/wp-admin/customize.php and then add your code like before.

• This reply was modified 2 years, 4 months ago by Mike Matenkosky. Reason: typo

@hikinmike, that’s where I placed the css. It worked until I updated to 6.0. I reentered the css and saved it again. Now it works correctly on mobile!

/* Logo - reduce size on smaller screens */
.custom-logo {
  max-width: 100%;
  height: auto;
}

• This reply was modified 2 years, 4 months ago by apexbee.

@apexbee I’m looking at your site on mobile and the logo does seem to be adjusting nicely to my phone’s small size.

Could you try clearing your mobile browser’s cache or trying a different mobile browser that you haven’t used before?

Hello,
I also have a question regarding the logo sizing issue on mobile. I’d like the ability to re-size the logo on this site : azmidlife.com

I tried to add

`/* Logo – reduce size on smaller screens */
@media screen and ( max-width: 500px ) {
.custom-logo {
width: 300px !important;
height: inherit !important;
}
}`

but this made the logo actually much larger. But it might not look bad at that large size if I could center it. Not sure how to do that?

Edit: I changed the 300px above to 60% and the image looks fine in a cell phone now. But was curious how to center the logo in a mobile phone view, since the logo is circular, I think it would look better centered and the menu stacking under it?

Thank you,
Chris

• This reply was modified 2 years, 3 months ago by chriscaldwell11.

Hi @chriscaldwell11 – could you please start a new thread, per forum policy? It’ll be easier to help you there. Thanks!