Hi - I have an accordian dropdown menu for services that is working totally fine for the desktop version. However, in the responsive versions the dropdown accoridan text won’t wrap to the next line. I’ve seen a few forums saying this requires a specific cms header for it to work on the published versions however I can’t figure out the setup of that custom code for my elements. Can someone help, please.
Thanks for providing your read-only link. I like your page design, by the way!
I found a workaround to wrap your Accordion text element. Under Typography, if you open the dropdown menu for More type options, you’ll find the label Breaking. By default, it should be “Normal”, but I found selecting “Normal” again makes the text wrap. Be sure to remove overflow: hidden and any Max H so the text doesn’t spill outside the element boundaries.
I’m trying this now and it doesn’t seem to fix the issue. Even in OP’s preview link, the accordion title runs off the screen. I followed Webflow University’s accordion tutorial and even the preview there runs off the screen in mobile:Create a custom accordion - Webflow University Documentation. So how can I get an accordion title to wrap to a new line?
Ok I see… so doing the break on line to Normal fixes it… follow up question: how do I make the accordion have different heights? The tutorial forces it to be 80px but some FAQ questions are longer than others. Is there a way to make the accordion start whatever height it happens to be based on the title length and screen size instead of fixed at 80px like specified here? Create a custom accordion - Webflow University Documentation
Thank you so much for this!!! I’ve struggled with the multi-line accordion issue since I started Webflow a few years ago and this is the ONLY answer that fixed the issue without custom code or plugins.
