Brooklyn theme accordion challenges

DavidDNA
New Member
10 0 0

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.

Replies 7 (7)

David_Weru
Shopify Partner
177 16 43

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.

 

 

DavidDNA
New Member
10 0 0

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. 

DavidDNA
New Member
10 0 0

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 🙏🏼

David_Weru
Shopify Partner
177 16 43

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.

David_Weru
Shopify Partner
177 16 43
Click to expand...
Click to expand...
If you have a link to the site, I can point it out in the code.
David_Weru
Shopify Partner
177 16 43

It would be better if the Brooklyn team looked into it.

LitExtension
Shopify Partner
4860 1001 1133

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify