[Resolved] Header Logo wrong proportions on mobile

[Mathieu]

Hi,

I’ve added a logo for the mobile view, but when I check the website on Safari or Chrome (iOS), the logo is compressed horizontally and doesn’t have the right proportions. It adjusts itself automatically if I rotate the phone in landscape mode, or randomly if I scroll back to the top of the page. The problem does not appear in the preview of the WP Customizer.

Any tip on how I can fix this?

I added the following CSS code to adjust the height of the logo and make it bigger than the default size, then I though perhaps it’s causing a conflict so I got rid of it:

.navigation-branding img, 
.site-logo.mobile-header-logo img {
    height: 50px;
}

.site-logo.mobile-header-logo img {
    padding: 5px;
}

Is it because the logo proprtions are wrong to start with?

The website is: mirrorlesscomparison.com

Thanks

Mat

[Elvin]

Hi there,

I was going to suggest adding width: auto; but it seems like you’ve done that already.

I’ve checked the page and the mentioned issue doesn’t happen. (it doesn’t scroll back)

Have you sorted this out?

Let us know.

[Mathieu]

Hi

I didn’t sort it out, but I found an alternative method to do what I wanted, by following this thread.

Basically instead of having the name of the website included in the logo image, I now have the logo plus the text for the site title appearing on the mobile header.

Thank you!

[Elvin]

Ah that makes sense. Glad you found an alternative. Thank you for letting us know. 🙂

[Author]

Posts