CSS grid not displaying correctly

Design help General
1

Hello,

I recently had a client reach out to me about images on their website not displaying correctly. The images are part of a CSS Grid build that I first published over two years ago and this issue was first brought up to me last Friday. Currently in Safari images are still displaying correctly, but in Chrome they are not. Below are side x side of the problem part of the website show on the left in Safari and right in Chrome. I have also included images of some of the settings.

1L-Section-Settings
1L-Section-Settings484Ɨ1394 52.5 KB

2L-Container-Settings
2L-Container-Settings480Ɨ1386 52.6 KB

3L-Grid-Settings
3L-Grid-Settings480Ɨ1720 56 KB

4L-Div-Image-Settings
4L-Div-Image-Settings476Ɨ1884 91 KB

Lake_House_sideXside
Lake_House_sideXside1920Ɨ1072 333 KB

Please help!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Need your share link and publish link

3

No prob, thanks! First time post for assistance here.

Share link: Webflow - Attardo Architecture and Design

Publish link: https://attardo-architecture-and-design.webflow.io

4

Iā€™m not quite sure where the issue would come from, maybe someone else knows. But I found that the fastest way to solve this is setting the overflow on the images to hidden.

5

First step. Try setting class .image-home-grid to overflow = hidden

overflow
overflow1500Ɨ841 183 KB

1 Like
6

THANK YOU VERY MUCH!!! That seems to be the fix!