Responsive images are missing showing wrong units making it not responsive

[Egon_Sung]

For a while I’ve been trying to figure out why the sites image show low resolution images on desktop. I was reading the code and found out that the generated units are wrong.

As you can see it shows 500w, 800w, 1080w, 1600w, 2000w. As soon as I changed those units on my inspector to either ‘vw’ or ‘px’, the large format is then revealed. Anyone know how I can fix this on Webflow?

Thanks!

---

Here is my site Read-Only: https://acommons-com.webflow.io/architecture/fairchild-play-group

EDIT: Its the 4th image from the grid.

[jhiggins (John Higgins)]

Did you try checking the hiDPI box?

[Egon_Sung]

Thanks, but the images are getting pulled from CMS.
And I couldn’t find the option to click hiDPI.

[Egon_Sung]

So, I believe the problem, from what I have seen from other threads, is from the CSS grid reacting to the image optimisation tool. My solution is instead of using 1 large grid for the whole gallery of items, I divided each row individually. And now since the largest image is no longer in a css-grid, it is now working. Not the correct solution, and Webflow team should try to fix this problem in the long run. But, for my purpose, it works now.