Weird issue with my FS slider comp. All thumbnails get stacked in 1 grid column

Finsweet Components
,
1

Description

I’ve set up a FS Slider component and im using Finsweet Accordion to show / hide the tumbnails underneath the main slider. But for some reason all my thumbnails gets collapsed into 1 column ontop of each other - sometimes on page load, and almost all times when i expand the thumbnail accordion. And i can’t seem to figure out whats causing it.

I would really appreciate if anyone can figure out whats wrong with the setup, cause its driving me crazy.

Site URL

Required: Please provide a staging/production URL where we can see the issue

Steps to Reproduce

  1. Soft reload of the page
  2. Hard reload of the page
  3. Expanding the Accordion (Grid icon above the slider)
    …

Expected Behavior

Every slide listed out in a grid, with the active slide 100% opacity, everyone else 50% ish opacity

Actual Behavior

Thumbs get stacked on top of each other in one single grid column

Video/Screenshots

Required: Please provide a short screen recording showing the issue

  • Video link: I’ll comment a link to a screen recording.

Additional Context

  • Browser: Latest Chrome
  • Device: Macbook M1 pro
2

Here’s a link to a screen recording of the issue. Heres a screenrecording

3

Hey @atle! I’ve been looking into the issue for a while now, and after some research, I believe the problem is caused by how the interaction hides the grid’s parent element using display: none.

Could you try changing the interaction so that the element is hidden by setting height: 0 instead?

The reason is that when display: none is applied, the browser completely removes the element from the layout flow. This means the grid inside it loses all layout context and collapses, which causes all grid items to stack on top of each other in the first cell when the element is shown again. In contrast, setting height: 0 keeps the element in the DOM and allows the grid layout to remain intact, even when hidden.

Let me know if that works better!

4

Hi there @Support-Luis ! I’ve removed the display:none from the interactions now, but sadly that didn’t fix the problem either. But i then changed the thumb slider effect from Fade to Slide, and that seemed to fix the issue.

5

Hey @atle! Thank you for the update! I am glad it was an easy fix! :raising_hands: