Liquid, JavaScript, themes, sales channels
The Brooklyn theme has this image scrolling sticky product information by default and it works great. However, we have added some accordion code to the product page, this code can be found here -> Click
I've narrowed it down as much as I can and the problem seems to be related to the size of assets on the page. For example see this page . and this example video: https://streamable.com/1w5j4l
As you can see on smaller screens the scrolling doesn't work but on larger screens it does. On my 1440 monitor it works at 100%, 110% but then breaks at 125%. on a 1080 monitor it doesn't work at all and this is what I am looking to fix.
I hope I've made that as clear as possible. any help would be appreciated.
Thank you.
Hello, @DavidDNA
It seems like you have some responsive design css. The rules seem ranged out of effect and stop applying to the elements in question.
If you simply extend the ranges, everything should work.
If you need further assistance, just let me know.
Sounds simple enough but it's The brooklyn theme code that needs extending. Any thoughts around this?
Do you think maybe we should put this to the brooklyn theme team for assistance.
We are slightly unsure which ranges to extend and are concerned we may break anything as we are close to a final build.
Any chance you can point us in the right direction it's the last day of the website build 🙏🏼
Hello @DavidDNA,
I would use the inspect element feature and follow the css class changes on the stationary element. A rule drops from the classlist dynamically. That rule is whee your range issues in the css must be.
It would be better if the Brooklyn team looked into it.
Hello,
Please follow the steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Asset > theme.scss.liquid and paste this at the bottom of the file:
.template-product .product-single__meta--wrapper{
position: sticky;
top: 50px;
}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024