Accordian won't show all text on mobile

Hey everyone. Beating my head against a wall here so time to ask for help.

My site has an FAQ section: FAQ - Cape Ann Diver II

The issue is that on mobile, many answers get cut off if they are too long. It appears that my accordion has a max height that it will expand to. However, I can’t find that setting anywhere. Seems to me that everything is set to auto. I can’t figure out why it won’t just expand to whatever height is necessary to show all the text in that answer. The best example of this is the question: “What type of boat is CAD2?”

Is there a way to make it so that the accordion items will expand to fit all the text?


Here is my site Read-Only: https://preview.webflow.com/preview/cad2-ceb453?utm_medium=preview_link&utm_source=designer&utm_content=cad2-ceb453&preview=badc2bc5ed6dc98bbb8b11e94b0a0476&pageId=60300af3f854e809f2677a92&mode=preview

Hey Matt!

Welcome to the community!

You’ve set a fixed height on your interaction (200px), which means you won’t have the full text display. Simply change that to “auto”.

See screenshots:



Hope this helps,
Colin

Awesome. Thanks. This certainly seems like the source of my issues. Quick question though: how did you get to those options? I’m clicking through all the various accordion elements on my page and I can’t see those animations options and parameters that you have.

Hey Matt,

The element you’ve applied the interaction to is the Accordion Title, if memory serves. These settings can be found by selecting the element and going to the Interactions panel/tab in the top right corner (lightning bolt).

I’m unsure how familiar with CSS you are, but essentially Webflow interactions use Javascript to modify the CSS. If you’re having trouble with an element that you can’t solve via the Styling panel, double check you haven’t added an interaction that modifies the appearance. :slight_smile:

Let me know if that’s clear, or if you have any other questions!
Colin