Jump to content

Newbie needs CSS code for changing aspect ratio on photos across multiple product pages

Recommended Posts

I've have read a thread regarding photo aspect ratio alterations across different product pages, for example, I'm a photographer, half of my photos are meant to be seen 4:3 horizontal and some need to be 3:4 vertical. I have made two separate pages which is ridiculous to me but they still look the same across the whole website. I need control. I tried using the code 

  .tweak-product-item-gallery-aspect-ratio-11-square .ProductItem-gallery-slides:before {
    padding-bottom: 130% !important;

 that I grabbed off another thread here, pasted it into the "header" area but it did not work. Help? I don't really understand the CSS shorthand directions other than GO HERE < THEN HERE < ETC > ETC ...please help! What I would truly like is for ALL my photos to be displayed correctly on ONE PRODUCT PAGE having the photos at differing aspect ratios...is that possible too?  🙂 Mahalo

Edited by DavoTheDirector
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Can you share the website please?

Often CSS will be case dependent and it's not going to be a quick fix without us seeing the actual site live.

You can add a password to it if it's not live yet.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
On 2/4/2022 at 10:55 PM, DavoTheDirector said:

Here is an example of the page that needs to be 4:3 Vertical. https://www.photoartbydavo.com/vertical-photos Also each product needs to be displayed as 4:3 on the product page itself. Currently, the entire site uses 4:3 horizontal. Ugh..Thanks..:)

Which page you want 3:4?


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.