A user working with the Fashionopolism theme needed to make product images sticky while scrolling through long descriptions. The layout had images on the left and descriptions on the right, creating excessive white space below shorter images.
Solutions provided:
PageFly-Henry suggested adding CSS code to the stylesheet:
position: sticky; z-index: 1; top: 0; to the .media-gallery elementDan-From-Ryviu recommended inserting markup code into the theme.liquid file under the <head> element
Outcome:
Both solutions successfully resolved the issue. The user confirmed that the sticky positioning now works as intended, keeping images visible while scrolling through product descriptions.
Hii
I am using Fashionopolism theme
I have two section left side image right side description and my description too large that’s why below the image too much space so I want image have stick until the description end scrolling after then new section show Please tell me the css property
How can I do it please tell
Store link: https://www.aristavault.com/collections/finger-lock-series/products/finger-lock-smart-laptop-bag-black
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file stylesheet.css
Step 3: Paste the below code at bottom of the file → Save
.rio-media-gallery {
position: sticky;
z-index: 1;
top: 0;
}
Hope that my solution works for you.
Best regards,
Henry | PageFly
Go to your Online store > Themes > Edit code > open theme.liquid file, add this below code under element
Thank you very much
This is working.
Thank you @PageFly-Henry
Your solution also working.
yes, it is working.
You are welcome @jaygupta-tech 