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

[joel_van_rooij (joël van rooij)]

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.

Sincerely,
Joël

Website Builder Screenshot:

Published Website Screenshot:

---

Here is my site Read-Only:
https://preview.webflow.com/preview/joels-fresh-project-ced4ca?utm_medium=preview_link&utm_source=designer&utm_content=joels-fresh-project-ced4ca&preview=7173f1b4250800c86f99c754765d4ef1&pageId=5f83706fa156d57a380d17ca&workflow=preview

[dennyhartanto]

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.

[joel_van_rooij (joël van rooij)]

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.

Best,
Joël

[dennyhartanto]

@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.

e

[joel_van_rooij (joël van rooij)]

@dennyhartanto

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.