Jump to content

Code to change aspect ratio for a specific product page

Recommended Posts

20 hours ago, Alfredito said:

Site URL: https://www.thetinnedfishmarket.com/

Hi there,

Can someone give me the code to change the aspect ratio of all images/products on a product page?  At the moment all product pages are set to 4:3 four three, but I would like to add a new product page with 2:3 ratio. 

Have tried a few things posted here but none seems to work.

Thanks in advance,

 

kindly show us your product page with different ratios

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 9/27/2021 at 1:47 AM, Alfredito said:

Site URL: https://www.thetinnedfishmarket.com/

Hi there,

Can someone give me the code to change the aspect ratio of all images/products on a product page?  At the moment all product pages are set to 4:3 four three, but I would like to add a new product page with 2:3 ratio. 

Have tried a few things posted here but none seems to work.

Thanks in advance,

 

Add to that Product Page Header (NOT Custom CSS) > Then save & reload the site

<style>
  .grid-image-wrapper {
    padding-bottom: 150% !important;
}
</style>

 

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
On 9/29/2021 at 4:25 PM, Alfredito said:

Thank you Tuanphan, it works perfectly!!

What would be the percentage for a square ratio?

 

 

 

2:3 = (100 * 3)/2

3:4 = (100 * 4)/3

...

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.