Resolving Issue with Inconsistent Image Sizes in Pinterest-Like Grid Layout on Published Website

Hello fellow Webflow designers,

I am having an issue with my grid layout on my website. I have created a Pinterest-style design featuring my photos, and when I resize the photos within a lightbox to fill the width and length of the lightbox, they appear as expected in the website builder preview mode. However, when I publish the site, the photos are resizing themselves to a smaller size. Is there anyone who knows how to fix this issue? Any help would be greatly appreciated.

I have included screenshots of the page viewed in the website builder and the same page after it has been published, with the photos appearing in different sizes. I have also included a read-only link to my site for reference.

Thank you in advance for your assistance.


Website Builder Screenshot:

Published Website Screenshot:

Here is my site Read-Only:

Hi @joel_van_rooij, I no longer see this issue. Has it been fixed? Else you can add more details such as the browser you are using & screen size.

Hello @dennyhartanto,

Thank you for your reply. Unfortunately, the issue has not been resolved. I am using Google Chrome on two different desktops, one with a screen resolution of 1920x1080 and the other with a screen resolution of 3440x1440. The problem persists on both devices, as the photos are being displayed at oddly scaled sizes. I have included a screenshot taken from the 1920x1080 desktop for reference. If you require any additional information, please let me know.


@joel_van_rooij I see, it seems you just need to add a width: 100% to the images. Make sure you make a class for all of the images so that you dont end up creating 100s of classes.

In the example below I named it Balagan Image.


1 Like


Thank you for your help! Your suggestion to add a width: 100% to the images worked for me. I made sure to create a class for all of the images to avoid creating a large number of classes.


1 Like