Jump to content

Help with images in store

Go to solution Solved by tuanphan,

Recommended Posts

Hi,

I'm trying to get my website up and running but have encountered a problem with the store. I sell various items of different types however when I upload them they are inevitably cropped to the extent that its almost impossible to make some of them out.

I have tried reducing the image sizes but this doesn't seem to do anything.

Any help or advice would be welcome.

Thanks for your time and Merry Christmas,

Link to comment
  • Replies 6
  • Views 592
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
On 12/28/2022 at 4:23 PM, Sigsite said:

Hi,

The site is still private but here are some screen shots to illustrate the problem. The last one is what the photo should look like, as you can see the top and bottom are badly cropped. 

Help.png

Help 2.png

Experiment pic.jpg

Try adding this to Design > Custom CSS

body[class*="type-products"] article img {
	object-fit: contain !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi,

Thank you so much for your kind offer to help us who are getting the hang of Squarespace.

The question that you answered on this forum is the exact same problem we are having with the website we are starting.

Thank you so much for your code it does work wonderfully on the store items!

The only problem is it also resizes the background images of sections on the store page. Is there a way to only make it apply to store product items?

 

question1.jpg

question2.jpg

Link to comment
On 12/31/2022 at 3:34 AM, JackiC said:

Hi,

Thank you so much for your kind offer to help us who are getting the hang of Squarespace.

The question that you answered on this forum is the exact same problem we are having with the website we are starting.

Thank you so much for your code it does work wonderfully on the store items!

The only problem is it also resizes the background images of sections on the store page. Is there a way to only make it apply to store product items?

 

question1.jpg

question2.jpg

Hi,

Try this new code, if it doesn't work, please share link to your site, we can check easier

img.grid-item-image.grid-image-cover.loaded, img.ProductItem-gallery-slides-item-image {
	object-fit: contain !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.