Images (grid) height and text split issue - on Safari

Hi All,

Need help with page - Phusion Living

when opened in Safari, the images and text breaks. It works perfect on Chrome Desktop and Mobile.

Any help will be appreciated.

Preview Link - https://preview.webflow.com/preview/phusion-living?utm_medium=preview_link&utm_source=dashboard&utm_content=phusion-living&preview=c3fef2bfc6ea6deb3277353a8340bbf1&mode=preview

Thanks in advance.

Rahul
(Fiber)

Hi Guys. can anyone please help with this? Thanks

Hi @Fiber_Admin !

Would be os kind as to post screenshots of your issue on sifari vs chrome? A working intended vsersion vs broken version. And detail specifically or circle in red exactally thepobelm areas. Talk to me like I’m 5 so I understand what you mean by “text and images” breaks.

Like this:

Hi Miek,

Please check the attached screenshot on chrome.

And link to video - broken on safari - Loom | Free Screen & Video Recording Software | Loom

Please let me know if that helps. I think its the problem with grid as the 2 images in middle are stretching on safari.

Thanks for your help. Cheers!
Rahul

Hi Miek,

I also noticed the same issue on Tablet Chrome and safari. So i guess its issue with tablet optimization? Your feedback would be really appreciated. Thanks

Rahul

I always feel like grids are a bit wonky. Have you tried putting the two images in a flex div instead?

HI Fonsume,

No, haven’t tried that.

Hi guys,

Please check video, hope this helps to know the reason. I’m feeling I’m doing something wrong with setting up the size.

Hi @Fiber_Admin

Thanks for sharing that!

It looks like flex stretch issue, I’m taking a peek now.

@Fiber_Admin

try this: it appeared to do has flex stretch, to fix that set a non stretch property in grid alignment


And/or
reset your height propery to Auto default state


image

Hi miekwave,

Legend! thanks mate it works perfectly after making the changes.

I’m planning to add a link below each image. In case if I need help with the same. will let you know. Thanks

Really Appreciate your help. Cheers!