Want to display images of artworks of various sizes and orientations using CCS

Site URL: https://sphere-perch-tsl5.squarespace.com/available-works

I want to display my artworks but in their full sizes, the system is not allowing me to do this. This is why I have investigated the Custom CCS option. 

So far I have deleted the image for one that doesn't show all of the artwork, and attempted to insert a  new image file uploaded from my computer, but it keeps telling me 'Syntax error on line 1' and the https:// is highlighted in purple. 

I didn't enter any code above or below this. I don't know if that matters. But if it does I want to know how I can fix it so I can have all of my images showing properly. At the moment most of them are cropped - not good.

I should add that I'm a complete ignoramus when it comes to coding, so you're going to have to explain it to me like I'm a toddler. (Sorry!) 

Thanks in advance for the help. 

Orla 

Hi @Orla try adding this to the Custom CSS of your website. It should force the image not to fill the container and crop. This will make the images smaller.

.products.collection-content-wrapper .grid-item .grid-image-cover {
    object-fit: contain !important;
}

Please let me know if this has worked for you.

10 minutes ago, Ziggy said:

Hi @Orla try adding this to the Custom CSS of your website. It should force the image not to fill the container and crop. This will make the images smaller.

.products.collection-content-wrapper .grid-item .grid-image-cover {
    object-fit: contain !important;
}

Please let me know if this has worked for you.

Thank you, Ziggy! Should I put this above or below the image when I upload it? 

You need to put it in the Custom CSS, under the Design tab in the dashboard.

This guide should help if you can't find where to place it.

https://support.squarespace.com/hc/en-us/articles/206545567-Using-the-CSS-Editor#toc-add-css-code

You also don't want to be placing this directly on the page.

37 minutes ago, Ziggy said:

You need to put it in the Custom CSS, under the Design tab in the dashboard.

This guide should help if you can't find where to place it.

https://support.squarespace.com/hc/en-us/articles/206545567-Using-the-CSS-Editor#toc-add-css-code

You also don't want to be placing this directly on the page.

I think it worked. Yes, the images are slightly smaller, but they are fully visible. Thank you for your help. 

2 minutes ago, Orla said:

I think it worked. Yes, the images are slightly smaller, but they are fully visible. Thank you for your help. 

Great, yes, it looks like it's work to me as well. If you could mark my first response as the answer to your question that would be much appreciated.

On 9/27/2022 at 11:31 AM, Ziggy said:

Great, yes, it looks like it's work to me as well. If you could mark my first response as the answer to your question that would be much appreciated.

Erm, Ziggy, I have spotted something. The code you send me above seems to be working fine on the web page Available Works with the different images with information on it. However, when I click on one of the works to look at it more closely, it appears to be cropped. This seems to be the case for all of the except the artwork entitled All Time, Everywhere, Anyone - this was the one I was working on when I entered that code. 

This is making me think that if I entered that code in the same way with the individual images, they wouldn't be cropped when I click on them to open them - but I thought I'd better run this past you before attempting it. What do you think, so I have a go?

Again, am very appreciative of your help with this. 

img.ProductItem-gallery-slides-item-image {
  object-position: 50% 0%;
  object-fit: contain;
}

Yes, that's another situation! But the same problem, try the CSS above.

24 minutes ago, Ziggy said:

img.ProductItem-gallery-slides-item-image {
  object-position: 50% 0%;
  object-fit: contain;
}

Yes, that's another situation! But the same problem, try the CSS above.

Thanks again - I actually didn't use this, I went into the section design and adjusted it there. But thank you for your help anyway ....