Streaming live at 10am (PST)

Responsive images are missing showing wrong units making it not responsive

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.

Did you try checking the hiDPI box?

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

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.

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