Text gets clipped in toggle element if over 3 lines in mobile view

Design help Layout & Design
1

I’ve used the ‘drop down’ element in ‘advanced’ to create a series of Questions and Answers on a page.

A visitor to the site will just see the question proceeded by a open/close icon. Clicking the Question Pops down the answer which is a paragraph of text.

My issue is in mobile view/vertical.

The question text sits inside a List Title which is nested in the Accordian Toggle, all elements that come with the component.

All works fine with 3 lines of text but once a fourth line of text is added, that fourth line gets clipped.

Otherwise it opens and closes just fine.

I’ve been adjusting every combination of elements to see if I can open this up to fit that fourth line but to no avail.

It may be that there are just some limitations which how this works since it has to handle a single line question as well as 3 line question.

  • I hesitate to make the type smaller.
  • May be a limitation to the toggle or I am missing something obvious
  • I wanted to use the component supplied by WF rather than make from scratch

messages_0
messages_0864×1872 304 KB

Here is my site Read-Only:

2

I have abandoned the drop down element provided in webflow because of the issues I had outlined above. I found a tutorial for creating similar effect from scratch here; Simple FAQ Structure with Webflow CMS - Follow Along Tutorial by Grace Walker

The only difference between this build in the tutorial and the drop down element you can drop in from within webflow, in this tutorial you must click and close each question where as the Drop Down element, at least how I had it configured, would close a question automatically as you open a new one.

Would be great to add that functionality but it remains a bit above my experience level.