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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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
  • 2 years later...

Can someone help provide a code to enter into Custom CSS that overrides the Aspect Ratio in the Grid Simple layout in the Image blocks? Help! The workaround is tedious and I do not want to use the Grid Strips layout. For some reason, none of Tuanphan's codes have worked for me in their other suggestions in other forum areas. Anyone else have a code that currently works? Do I also need to remove code that Squarespace has put into place before I can add one that overrides this? 

The goal is: I want to use Grid Simple but I don't want it cropping any of my images in the main portfolio view page. 

Link to comment
On 11/14/2023 at 4:21 AM, NanV said:

Can someone help provide a code to enter into Custom CSS that overrides the Aspect Ratio in the Grid Simple layout in the Image blocks? Help! The workaround is tedious and I do not want to use the Grid Strips layout. For some reason, none of Tuanphan's codes have worked for me in their other suggestions in other forum areas. Anyone else have a code that currently works? Do I also need to remove code that Squarespace has put into place before I can add one that overrides this? 

The goal is: I want to use Grid Simple but I don't want it cropping any of my images in the main portfolio view page. 

Can you share link to page where you have problem?

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.