[Resolved] 60px high header image display issues

[Brian]

Hello,

I’m a bit of a dummy when it comes to CSS, so hopefully this will be an extremely straightforward question that I’m just too dense to figure out on my own.

I am using generatepress, the Rumour setup to be exact. Currently I just have this setup to run on localhost through Docker, so I don’t really have a “production” URL I could point to (though obviously I can make that work if necessary). In WordPress admin, I’ve gone to Site Identity and uploaded a new logo, of which the dimensions are 200 x 600 px (this is what Windows reports the dimensions being as when I highlight it in Explorer, for example).

Doing this without any additional CSS changes makes the image appear a bit cut-off on the top and bottom, though Chrome reveals the image is being sized as its native 200 x 600 size. I discovered is due to the padding: 10px 0; that is applied to .navigation-branding img

However when I remove that, it actually blows the image up to a strange size of 300 x 600, only by removing this padding.

Here are things with the padding:
http://www.onemillionpower.com/support/With%20Padding.png

Here are things without the padding:
http://www.onemillionpower.com/support/Without%20Padding.png

And here is the actual logo I uploaded, in case this is useful in any way:
http://www.onemillionpower.com/support/omplogoheader60.png

Any help would certainly be appreciated on what I’m missing, if it’s possible without access to some publicly accessible WP instance to troubleshoot. Thanks very much!

[Leo]

Hi there,

We would really need to see the issue live to be able to help for questions like this.

Please duplicate the issue on a staging site so we can see.

Thanks!

[Brian]

No problem. I’ve gone ahead and setup a staging site with the exact same code/images I was referring to earlier:

http://onemillionpower.com/staging/

I’ll also add credentials for someone to get into that instance through admin in the Private Information field.

Thank you!

[Leo]

The source code is showing this is the image you’ve uploaded:
http://onemillionpower.com/staging/wp-content/uploads/cropped-omplogoheader60.png

Which looks cropped already?

Let me know if I’m missing something here.

[Brian]

I apologize, it seems you’re correct! I have no memory of actually cropping it, but I think I must have not clicked “Skip Cropping” like I thought when I uploaded the image. Thanks so much for pointing that out, and sorry for taking up your time!

[Leo]

No problem 🙂

[Author]

Posts