Archived topic
Header Logo wrong proportions on mobile
3 replies · Started by Mathieu on April 7, 2021
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
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.
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!
Ah that makes sense. Glad you found an alternative. Thank you for letting us know. :)
