Community forum for knowledge and support

Updated last year

Hoping You Guys Can Lend A Hand To An Issue I'm Having

At a glance

The community member is experiencing an issue with the spacing and size of 3 cards on a Webflow website, which is causing problems on Safari. The community members suggest adjusting the height of the image wrapper and setting the image to "Fit: Cover" to fix the spacing issue. They also caution that using 100% height values can cause unusual behavior in Safari. The community members recommend resizing the images to address the overall size of the cards.

Useful resources
A
J
13 comments

Do you want them to get the spacing fixed on Safari?

Yes that’s right - thank you!

The spacing is much too large on Safari. Also wondering how to reduce the overall size of the 3 cards.

Looking into this.

Adjust the height of the image wrapper on left. It will fix your issue. Let’s say that, give it a fixed height, and make your image inside to Fit: Cover

Image properties

ok amazing - thank you. Will try this now.

One thing very important. 100% height value is very unknown for Safari. If image height is set to 100%, and it’s parent height to 100%, and then it’s parent to 100%.

Safari will show some unusual behaviour.

Ok thank you - still trying to figure it out but that is valuable to know!

When it comes to width, I can see you have the container block there. And the container has a value. So, the child inside can go as far the container width, nothing beyond.

So, it okay, when it comes to width. But for the height. You will observe weird behaviour.

In your case, the image height itself is 1536px. So it’ has the ability to go as far as 1536. Because nothing is stopping it.

Same case for other images

Ya I see now. I will try resizing the images.

Add a reply
Sign up and join the conversation on Slack