images being cut off in product pages

I'm having issues with my images getting cut off in the product pages. It was happening on my main shop page and someone gave me this code 

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

Which took care of the main shop page problem, but when you click on the product the images are still being cut off. I've tried resizing and changing the ratios, but alas, nothing seems to change.

Hi

I have looked all over for a week and can not find how to change the orientation of the image when you click through from the product page. It displays how I want to on the product page but the next page that displays the options for size, number and add to cart options etc it only shows in landscape, cropping half the image off if it's in portrait. 

I have this same problem. Is it this issue - 

I've posted about it too but not had an answer yet. As I'm selling prints I need to show the image in all it's glory 😕

If you need to show landscape and portrait product images on Squarespace 7.1, please see my guide:
Product image aspect ratios on Squarespace 7.1

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

54 minutes ago, paul2009 said:

If you need to show landscape and portrait product images on Squarespace 7.1, please see my guide:
Product image aspect ratios on Squarespace 7.1

 

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

I appear to be on 7.0 that doesn't have the pencil option. How do I update?

9 hours ago, MontyB said:

I appear to be on 7.0 that doesn't have the pencil option. How do I update?

The original poster is using version 7.1, but I see you are using an older template from the Skye family (2016). You can use the same principles that I described in my guide, but you'll find settings in different places:

• You can set the initial aspect ratio of the product images in Design > Site Styles.
• You can still tag your portrait images as I described - this hasn't changed.
• You'll need to use some amended CSS - this can be provided once you have made the necessary changes.

How do you want them to appear?

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

12 minutes ago, paul2009 said:

The original poster is using version 7.1, but I see you are using an older template from the Skye family (2016). You can use the same principles that I described in my guide,but you'll find settings in different places:

• You can set the initial aspect ratio of the product images in Design > Site Styles.
• You can still tag your portrait images as I described
• You'll need to use some amended CSS

How do you want them to appear?

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

Hi

Thanks for the reply. It's not the first image I need to change, it's the ratio aspects on this one - 

On 6/17/2023 at 10:28 AM, paul2009 said:

If you need to show landscape and portrait product images on Squarespace 7.1, please see my guide:
Product image aspect ratios on Squarespace 7.1

 

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

Any answer to this one yet? Thanks

6 hours ago, MontyB said:

Any answer to this one yet?

Have you set the styles and added the tag(s) as I suggested in my earlier post? I checked but couldn't see the changes.

I just went through those steps and used the code in your tutorial and it just made my main shop images all different sizes and didn't really affect my product pages, images are still being cut off. 

1 hour ago, ellenann said:

images are still being cut off.

Please provide a link to the page on your site where this is happening. Have you added any other CSS that could be affecting it?

I already had this code in there to fix the main shop page image cropping

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

I have not published my site yet because the images are not right and I'm still building it, is there any way to send you a link to what I'm working on, or do I have to publish in order to show you?

Here's a link to my unpublished site, if it'll work...

https://mouse-radish-bdal.squarespace.com/config/design

11 minutes ago, ellenann said:

is there any way to send you a link to what I'm working on

Sure. My post "How to Post a Forum Question" provides guidance on how to provide a link. Once you've set a public password you can either share it here (so others can help) or send it via direct message.

Ok. I followed the steps and here's the password- problemSolver24

I tried to verify it in an incognito window like the tutorial suggests, but it wouldn't let me sign in with that password. Please let me know if it works.

On 6/19/2023 at 4:40 PM, paul2009 said:

Have you set the styles and added the tag(s) as I suggested in my earlier post? I checked but couldn't see the changes.

Hi.

I have done this now and it seems to have worked. I had to remove the slideshow option and just use a single image on my product page but I'm happy the orientation now shows the image how it's intended to be seen.

Thank you.

On 6/19/2023 at 7:45 PM, paul2009 said:

Have you added any other CSS that could be affecting it?

On 6/19/2023 at 9:02 PM, ellenann said:

I already had this code in there to fix the main shop page image cropping

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

Your own custom CSS is the cause of your issues. When I remove your custom CSS, it looks like this: