Jump to content

Change aspect ratio of product by category?

Recommended Posts

Currently editing my 7.0 site with the Jones preview template, so its not live yet.
I have two products I'm selling, posters and stickers, and I enjoy the look of the selected aspect ratio for one, but would very much like to alter the look of the "stickers" category. I realize this may mean I need to target individual product item slides in the css, just didn't know if there was a way to target tagged categories? If not that's fine too. 

Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 months later...
  • 1 month later...

This has been the biggest issue for me, as well! I'm currently in a 2 week trial and setting up a demo site for a photographer. The widescreen aspect ratio is great for a horizontal 10x20 photo but terrible for a vertical 8x12...seems odd that the same ratio has to apply to all categories. I won't be surprised if this ends up being a deal-breaker for my photographer.

Link to comment
  • 2 months later...
On 12/12/2020 at 12:06 AM, bregvz said:

Hi! I have same issue, I need another aspect ratio (3:2 Standard) on this category https://www.ak-workshop.dk/shop-akworkshop/opslagstavler   password: ak2020 

Is it possible to change that??

Thank you very much!

Add to Above category page settings > Advanced > Header

<style>
  .grid-image-wrapper.has-hover-img {
    padding-bottom: 66.667% !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
  • 1 month later...
10 hours ago, bregvz said:

Thank you @tuanphan for your time! it works but changes all the other categories (even when I added the code in to the Page Header Code Injection of the category)  any other solution?

Your site is private...

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 1/25/2021 at 2:26 AM, bregvz said:

I'm sorry www.ak-workshop.dk

password: ak2021

Try adding this to Design > Custom CSS

body#collection-5f758d461158a96d1ace20d5 .grid-image-wrapper.has-hover-img {
    padding-bottom: 66.667% !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

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.