Jump to content

Chang aspect ratio on related product images

Go to solution Solved by KwameAndCo,

Recommended Posts

  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

6 hours ago, E-W said:

How do I make the related product images square?

I tried adding:

padding-bottom: 150% !important;

to both the image wrapper and images but can't get it to work. 

SITE PASSWORD: ADMIN

What is the website URL?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
  • Solution
6 hours ago, E-W said:

padding-bottom: 150% !important;

 

This will create an image with a 2:3 aspect ratio because it is 100%:150% (width:height).

Square would be 

.yourelement {
  padding-bottom: 100%!important;
}

 

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
6 hours ago, KwameAndCo said:

This will create an image with a 2:3 aspect ratio because it is 100%:150% (width:height).

Square would be 

.yourelement {
  padding-bottom: 100%!important;
}

 

Thanks!

This was the final code used for a 1:1 ratio:

.grid-image-wrapper {
  padding-bottom: 100%!important;
}

Link to comment
16 hours ago, E-W said:

Thanks!

 

Happy to have helped.

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

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.