Jump to content

Shop Gallery Help: Placement Options? Change buttons?

Recommended Posts

  • Replies 6
  • Views 720
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Hey @TorvaTerra! have you looked at the full product page layout? It will place your product images at the top without any extra code required 🙂 

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

Link to comment

Gotcha - now that, we can totally fix with code 😎 

This code here will reduce the height of it to 30% of the page height, change up taht 30 to any value you want. The second line will make sure the image isn't cropped. If they are different sizes, there will have to be some space between the image and the container edge because we can't make the container fit the image; we have to code it the other way around. 🙃

 

Anyhoo - I hope this helps you with your project! And thanks for the video tutorial idea; I'll totally have to add this to my youtube channel 🙌

.pdp-layout-full-width-carousel .pdp-gallery-images{
max-height: 30vh;
}
.pdp-gallery-slides-image{
object-fit:contain!important
}

 

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

Link to comment

That blank space is lame - let's add a forced width to fix it; play around with the % here until you like the size. You can sneak some padding in here too. You can add these new property and value combos to your original code so it looks like this:

.pdp-layout-full-width-carousel .pdp-gallery-images {
    max-height: 50vh;
    width: 40%;
    padding-top:10px
}

P.S. Those foxes are so dang cute!!!! 😍

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

Link to comment

@inside_the_square Thank you 🙂

I played with the sizing it just still has some things that aren't right. I feel bad bothering you haha! Without any customization options for the "Full" gallery mode I dont know how to fix the awkward spacing of the description area vs the drop-down for options being so wide apart.

The dream would be for the gallery to be a single stationary image at the top center, then the arrows would slideshow through each single photo without cropping them.

Then the description would be directly under that gallery, followed by the drop down to select the session.

It feels so simple yet I cannot figure it out :C

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.