Logos appear squished client's browser, but are not spec'd in a way that should allow that, nor do they appear that way on any browsers I view the site on

Two sponsor logos (at bottom of page) are appearing squished via Safari on my client’s computer. (Attached is a photo of what my client sees on their screen — two bottom logos in bottom row.)

I have not spec’d the logo sizing in a way that should result in them squishing, nor do they appear to be squished on any breakpoint in any browser I view the site on.

Help?


Here is my site Read-Only: [LINK][1]

You’ve set object-fit: fill on class="Sponsor Logo". This may not be the fix, but the fit value “…completely fills the container. If the object’s aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit.” Object-fit Web Doc Here.
Try changing the object-fit value :thinking:

Hi! I am not a developer so I don’t touch code.

However, I think I found it? I had each “sponsor logo” size set to a certain percentage, and the max-width set to 100%, height: auto for all. BUT, the parent “sponsor link” alignment was set to “stretch”! Ahh! That’s it, right?

It worked! Thank you for leading me to the solution!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.