Project Summary Page - Photos blurry

Hi, my site is https://shorturl.at/vALW7 - my pw is zuerich.

On my porfolio project summary pages, my cover photos for some reason appear blurry.

I have added the following code to force one column only, and because I am forcing only one grid column, the photos appear blurry. They are fine when there's a second column, and they are also fine in full width inside the project (where the same file is being used in the same full screen size, and it's fine).

.portfolio-grid-overlay {
  grid-template-columns: 1fr;
}

I have tried png and jpg files, I have tried resizing the photo, nothing seems to work.. They only appear blurry on this summary page, not on the actual project page which is strange..

Can anyone help with this?

The photos look fine to me:

18 minutes ago, Ziggy said:

The photos look fine to me:

If you look at it on a large device, take this second photo and look at the sofa in the background, it's not as crisp and clear as on the actual project page. There is a difference in quality of the image.

Hello ! @charlineca

I see what you mean. There could be a variety of reasons for this. The image dimensions could be too small, and the grid box could be too big (either in height or width), so it is stretching the image and giving it that blurry look. Squarespace recommends the width of your images to be between 1500 and 2500 pixels. Also make sure you're processing your images from hi res to web quality correctly.

On 12/21/2023 at 1:16 PM, charlineca said:

I have added [CSS] to force one column only, and because I am forcing only one grid column, the photos appear blurry...They only appear blurry on this summary page, not on the actual project page which is strange..

@charlineca The issue is that your custom CSS is reducing the number of columns and this is therefore increasing the width of individual images on the page.

For example, at a viewport of 1875px, Squarespace loads images at 1500px wide, which is more than enough for images in two columns. However, if there is only one column, it exceeds the width of the 1500px image (it is stretched to 1875px) and so doesn't look sharp.

When you click into the project it will look fine because Squarespace is expecting the wider viewport and will load the 2500px version at that width.

Did this help? Please give feedback by clicking an icon below  ⬇️

1 hour ago, AlexSan said:

Hello ! @charlineca

I see what you mean. There could be a variety of reasons for this. The image dimensions could be too small, and the grid box could be too big (either in height or width), so it is stretching the image and giving it that blurry look. Squarespace recommends the width of your images to be between 1500 and 2500 pixels. Also make sure you're processing your images from hi res to web quality correctly.

The images are all high res, all a minimum of 3000px wide.. So that's not the issue. I also tried changing between png and jpg, it's all the same. 

56 minutes ago, paul2009 said:

@charlineca The issue is that the custom CSS is reducing the number of columns and so increase the width of individual images in the list.

For example, at a viewport of 1875px, Squarespace loads images at 1500px wide, which is more than enough for images in two columns. However, if there is only one column, it exceeds the width of the 1500px image (it is stretched to 1875px) and so doesn't look sharp.

When you click into the project it will look fine because Squarespace is expecting the wider viewport and will load the 2500px version at that width.

Did this help? Please give feedback by clicking an icon below  ⬇️

Understood, that makes sense. Is there any way to adjust the width of the images so they don't stretch but are simple shown as a larger image?

On 12/21/2023 at 4:25 PM, paul2009 said:

@charlineca The issue is that the custom CSS is reducing the number of columns and so increase the width of individual images in the list.

For example, at a viewport of 1875px, Squarespace loads images at 1500px wide, which is more than enough for images in two columns. However, if there is only one column, it exceeds the width of the 1500px image (it is stretched to 1875px) and so doesn't look sharp.

When you click into the project it will look fine because Squarespace is expecting the wider viewport and will load the 2500px version at that width.

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi @paul2009 is there any way to solve this?

Has this been figured out at all? It's a big issue..

@charlineca, I believe the right solution would be to not use a grid. I don't think this is something that can be fixed with css.

1 hour ago, AlexSan said:

@charlineca, I believe the right solution would be to not use a grid. I don't think this is something that can be fixed with css.

Thank you but my clients have specifically requested this grid, so I will keep trying to find a solution for this.. I'm sure there must be a way to trigger a 2500px resolution for the collection images (instead of the 1500px now)?