I’m trying to make a FAQ accordion responsive to different width screens, but the accordion will only shrink it’s width to the longest text block within an accordion item. I think the text block needs to wrap to a new line at some point, but I’m not sure how to do that.
Could you help?
Here is my site Read-Only: Webflow - Cavalier PT
Hi,
The problem is with the dropdown animation.
The element “accordian item”, has an initial state of 68 px height.
Its height is therefore limited and when the content goes on 2 lines, 68px is not enough.
You should target the div “dropdown list” instead of “accordian item”, either to close or open the dropdown.
Then, for “dropdown list”, put 0px height for its initial state and in “auto”, on click the dropdown will open according to the content of “dropdown list” so the title of the dropdown can not be impacted, no matter the breakpoint.
And of course, remember to target “dropdown list” instead of “accordian item” at the second click “accordion close” and put 0px of height for the latter.
I tried it and it works without worries, hope I was clear and could help you
Huzzah, it works! Thank you so much, that makes total sense.
