Jump to content

Fix gallery on left when scrolling text on right

Recommended Posts

Dear Community,

On my product page, I have an image gallery on the left hand side, and a long text on the right. The text is exceeding the image gallery by far. And I would like to fix the gallery for as long as you would scroll down the text on the right side (so that you constantly see the image gallery while scrolling the text). When the text ends, the gallery should be unfixed ideally, so that you can fully see the product recommendations, which I placed below.

 

Hoping that someone might've had a similar issue / can hopefully help 🙂

Thanks

Link to comment
5 hours ago, donforello said:

Dear Community,

On my product page, I have an image gallery on the left hand side, and a long text on the right. The text is exceeding the image gallery by far. And I would like to fix the gallery for as long as you would scroll down the text on the right side (so that you constantly see the image gallery while scrolling the text). When the text ends, the gallery should be unfixed ideally, so that you can fully see the product recommendations, which I placed below.

 

Hoping that someone might've had a similar issue / can hopefully help 🙂

Thanks

We can have a look  if you provide the site url to check

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
4 hours ago, donforello said:

@bangank36 would be more than grateful for your help 🙂

This effect will only work if the text is longer than then product

.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery {
      position: sticky;
      top: 10px;
      align-self: flex-start;
      height: auto;
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
7 minutes ago, donforello said:

@bangank36 sorry to disturb you once more - I have just realized that on the mobile view, the gallery is now fixed as well and the text is running over the gallery.. is there a way to unfix / un-stick the gallery on mobile? 

@media only screen and (max-width: 640px) {
	.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery {
          position: sticky;
          top: 10px;
          align-self: flex-start;
          height: auto;
    }
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
11 hours ago, donforello said:

@bangank36 thanks for the quick response. I'm afraid the issue still prevails after using your code.. the gallery sticks on mobile and the text is running over it....

My bad, you should remove the snippets I gave above and replace them with this

@media only screen and (min-width: 768px) {
	.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery {
          position: sticky;
          top: 10px;
          align-self: flex-start;
          height: auto;
    }
}

image.png.5772de391b79eac4cbe3ba185424c82a.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@bangank36 Thanks so much - you're a star! It worked perfectly. I actually figured out it was my bad - I left the previous code in to freeze the image, which resulted in the last code not working.

 

On another note - would you by any chance know how to remove / hide the current product that someone is looking at on the summary / recommendations below the product? Cause the current product seems to always appear as first item in the summary / recommended products.

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.