Jump to content

Hyde Template Product Images being cut off

Recommended Posts

Hi Everyone, I'm using the Hyde Template for a clients online store to see their fine art from but the store images are being cut off due to there not being an option to show the artwork without cropping it?

Normally there is an option to crop or uncrop images in a gallery, but there only seems to be limited image display options in the Style Editor for product listings?

I've had to change the products page to square view to correctly show some round art, but when a product is clicked through the edges are cut off and for tall, thin images, the top an bottoms are cut off?

Does anyone know how this can be fixed so that the main image shows all of the artwork?

Otherwise I'll have to create a square image and past the main image in that with white edges to force the whole piece to view correctly?

The website is www.marilyngough.com if you need to take a look to see what I mean.

Many thanks in advance :0)

Screen Shot 2019-12-30 at 18.15.43.png

Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

2 hours ago, jasonconway said:

Add to Home > Design > Custom CSS

.ProductItem-gallery-slides-item.sqs-pdp-gallery-slide-active img {
    width: 100% !important;
    left: 0 !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...
On 1/2/2020 at 5:41 AM, tuanphan said:

.ProductItem-gallery-slides-item.sqs-pdp-gallery-slide-active img { width: 100% !important; left: 0 !important; }

Hi @tuanphan! We are also having similar issues with our product shots. Is there a way we can get all of the shots to not be cut off? Here is an example URL of this happening (when you click on the 10 Bag option, the picture is cut off): https://www.enjoysnacks.com/shop/candies/big-sour-apple. Any help would be appreciated!

Link to comment
58 minutes ago, galangster said:

Hi @tuanphan! We are also having similar issues with our product shots. Is there a way we can get all of the shots to not be cut off? Here is an example URL of this happening (when you click on the 10 Bag option, the picture is cut off): https://www.enjoysnacks.com/shop/candies/big-sour-apple. Any help would be appreciated!

Try this CSS

.ProductItem-gallery-slides img {
    left: 0 !important;
    width: 100% !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
On 1/2/2020 at 9:41 AM, tuanphan said:

Add to Home > Design > Custom CSS


.ProductItem-gallery-slides-item.sqs-pdp-gallery-slide-active img {
    width: 100% !important;
    left: 0 !important;
}

 

 

On 6/17/2020 at 3:28 PM, galangster said:

Hi @tuanphan! We are also having similar issues with our product shots. Is there a way we can get all of the shots to not be cut off? Here is an example URL of this happening (when you click on the 10 Bag option, the picture is cut off): https://www.enjoysnacks.com/shop/candies/big-sour-apple. Any help would be appreciated!

Hi @tuanphan! I am also having an issue with rounded corners on images, but in our Instagram feed block.  Do I make this adjustment in the Design > Custom CSS settings? If so, I can't figure out what selector to use. Attaching screenshots and URL at the end of this post. The Instagram feed section I'm talking about is on the homepage just above the footer.

URL: https://renovationsells.com/ 

Screen Shot 2020-09-10 at 2.04.20 PM.png

Screen Shot 2020-09-10 at 2.48.57 PM.png

Link to comment
On 9/11/2020 at 3:10 AM, Goneuphoric said:

 

Hi @tuanphan! I am also having an issue with rounded corners on images, but in our Instagram feed block.  Do I make this adjustment in the Design > Custom CSS settings? If so, I can't figure out what selector to use. Attaching screenshots and URL at the end of this post. The Instagram feed section I'm talking about is on the homepage just above the footer.

URL: https://renovationsells.com/

Seems fine. Can you describe in detail???

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.