Fix gallery on left when scrolling text on right

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

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

@bangank36 would be more than grateful for your help 🙂

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;
}

@bangank36 amazing!! This works very well, thanks a lot :))

@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? 

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;
    }
}

@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....

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;
    }
}

@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.