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.

0 Likes
David_Weru
Trailblazer
154 14 34

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.

 

 

0 Likes
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. 

0 Likes
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

0 Likes
David_Weru
Trailblazer
154 14 34

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.

0 Likes
David_Weru
Trailblazer
154 14 34
Click to expand...
Click to expand...
If you have a link to the site, I can point it out in the code.
0 Likes
David_Weru
Trailblazer
154 14 34

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

0 Likes

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 - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes