donforello Posted January 5, 2021 Share Posted January 5, 2021 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
Beyondspace Posted January 5, 2021 Share Posted January 5, 2021 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 - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
donforello Posted January 9, 2021 Author Share Posted January 9, 2021 @bangank36 would be more than grateful for your help 🙂 Link to comment
Beyondspace Posted January 10, 2021 Share Posted January 10, 2021 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 - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
donforello Posted January 10, 2021 Author Share Posted January 10, 2021 @bangank36 amazing!! This works very well, thanks a lot :)) Link to comment
donforello Posted January 10, 2021 Author Share Posted January 10, 2021 @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? Link to comment
Beyondspace Posted January 10, 2021 Share Posted January 10, 2021 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 - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
donforello Posted January 10, 2021 Author Share Posted January 10, 2021 @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.... Link to comment
Beyondspace Posted January 11, 2021 Share Posted January 11, 2021 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; } } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
donforello Posted January 11, 2021 Author Share Posted January 11, 2021 @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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.