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

**URL:** <https://forum.finsweet.com/t/weird-issue-with-my-fs-slider-comp-all-thumbnails-get-stacked-in-1-grid-column/5684>\
**Category:** Finsweet Components\
**Tags:** cmsfilter, component-slider\
**Created:** [July 30, 2025, 11:20am UTC](https://forum.finsweet.com/t/weird-issue-with-my-fs-slider-comp-all-thumbnails-get-stacked-in-1-grid-column/5684 "2025-07-30T11:20:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![atle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/atle/32/4875_2.png) [@atle](https://forum.finsweet.com/u/atle)\
**Post date:** [July 30, 2025, 11:20am UTC](https://forum.finsweet.com/t/weird-issue-with-my-fs-slider-comp-all-thumbnails-get-stacked-in-1-grid-column/5684/1 "2025-07-30T11:20:06Z")

</div>

## 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

- URL: [[Your staging URL here]](https://strai-kjokken-beta2.webflow.io/om-oss/proff)
- Webflow Read-only link: [[Your Webflow Read-only link here]](https://preview.webflow.com/preview/strai-kjokken-beta2?utm_medium=preview_link&utm_source=designer&utm_content=strai-kjokken-beta2&preview=49f5c61acb8f6cb8d4c57699c324c40e&pageId=6881e509e6e34a3ff0abda0c&locale=en&workflow=preview)

## 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

---

<div class="post-metadata">

**Author:** ![atle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/atle/32/4875_2.png) [@atle](https://forum.finsweet.com/u/atle)\
**Post date:** [July 30, 2025, 11:20am UTC](https://forum.finsweet.com/t/weird-issue-with-my-fs-slider-comp-all-thumbnails-get-stacked-in-1-grid-column/5684/2 "2025-07-30T11:20:36Z")

</div>

Here’s a link to a screen recording of the issue. [Heres a screenrecording](https://vimeo.com/1105751395/5bf49e34d6?share=copy)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [July 31, 2025, 6:59pm UTC](https://forum.finsweet.com/t/weird-issue-with-my-fs-slider-comp-all-thumbnails-get-stacked-in-1-grid-column/5684/3 "2025-07-31T18:59:42Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![atle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/atle/32/4875_2.png) [@atle](https://forum.finsweet.com/u/atle)\
**Post date:** [August 1, 2025, 7:44am UTC](https://forum.finsweet.com/t/weird-issue-with-my-fs-slider-comp-all-thumbnails-get-stacked-in-1-grid-column/5684/4 "2025-08-01T07:44:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [August 1, 2025, 9:39am UTC](https://forum.finsweet.com/t/weird-issue-with-my-fs-slider-comp-all-thumbnails-get-stacked-in-1-grid-column/5684/5 "2025-08-01T09:39:44Z")

</div>

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