Jump to content

Freezing Product Item Details in place, and centering gallery text CSS

Recommended Posts

Hi all, 

I'm trying to freeze my product item details in place so that it's not cut off when I scroll. I found this thread here, but adding the CSS code does not work. 

I also want to center the text under the photos in my gallery on my homepage. I found this thread but that also didn't work. 

Would appreciate any help. Thanks!

Edited by Slugman
fix links
Link to comment

@Slugman Hi! You can add this code in Website > Pages > Website Tools > Custom CSS to freeze the product item details section on scroll.

@media screen and (min-width: 1025px) {
    #pdp .ProductItem-details {
        position: fixed !important;
        top: 120px !important;
        right: 0 !important;
        height: 100% !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px)  {
    #pdp .ProductItem-details {
        position: fixed !important;
        top: 200px !important;
        right: 0 !important;
        height: 100% !important;
    }
}

And this code to center the gallery caption texts:

#collection-65357ea105d9dd4da4c9fce7 .gallery-caption p.gallery-caption-content {
    text-align: center;
}

Hope that helps!

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.