Code to change aspect ratio for a specific product page

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,

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

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>

1 hour ago, tuanphan said:

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

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

 

Thank you Tuanphan, it works perfectly!!

What would be the percentage for a square ratio?

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

...

Thank you!

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. 

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?