How to make my accordion responsive?


I am new to webflow… I habe created a basic accordion following the webflow instruction. In the beginning everything was fine…until I started trying to make it responsive to different screen sizes. Now several problems are piling up:

  1. Even though the 2 accordions are the same, only the bottom works properly (only in desktop mode).
  2. In other screen sizes they don’t open up…

I think I have messed it up with trying to adapt the sizes of the buttons to the diffeent screensizes…
Here is what I want to achieve: The relation / feeling between size of the button and the typo should be like in desktop mode. To maintain this feeling I have to change the size of the button & typo in the different screensizes. As a result it seems that I have to create individual opening- & closing- interactions / animations for each screensize…?

Can someone help???

Here is my messy work:

Hi Svend,

The issue you are having is due to the height of the Accordian and also the height of the Accordian Item. Here’s a quick video showing how you can reset those values and get your Accordian working again:

Loom Video


Hy Dave! Thank you so much! You made me night! You are the one and only king of accordions! Big hugs, Svend

Hy again!

Now I face another problem: I want to change the size of the accordion button at each breakpoint in order to maintain the look & feel of button size / typo size of the desktop view. Once I change the height of the button I have to create a new animation with a new initial height state - is that right? Or is there another way to adapt the button size at each viewport and using the initial style?