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
  • Replies 9
  • Views 922
  • Created
  • Last Reply
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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;
    }
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.