Streaming live at 10am (PST)

Dropdown toggle text box not responsive


#1

Hello,

I have created a FAQ section on my site using drop downs, and the text is not responsive. the text in the item list is responsive but the text on the actual dropdown toggle is not. This means when viewing on a small screen like an iPhone the text just runs off the screen. I feel like I have tried everything and cannot figure it out and cannot find anything in the forums. The section I am referring to is at the very bottom of the page. Please help!


Here is my public share link: https://preview.webflow.com/preview/kmmtest?preview=2f0ff824aa23a3d6e45b269e370790b8
(how to access public share link)


#2

You're using an element that comes with quite some predefined parameters, that you can't override from the UI.

For instance, all those elements:

.w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link

have a default white-space value that tell them to avoid wrapping

white-space: nowrap;

So you need to override that property.

Give a class to everyone of your TEXT elements within the dropdown toggle. For example .ddown-toggle-text

Now add the following custom code to the <head> custom code box:

/* make the dropdown toggle text goes to next line */
.ddown-toggle-text {
white-space:normal !important;
}

Publish and test online, because it won't show-up in the Designer.

If it doesn't work, or works funny, try the following code instead:

/* make the dropdown toggle text goes to next line */
.ddown-toggle-text {
white-space:normal !important;
word-break:break-all;
}


Dropdown buttons not responsive / won't break into 2 lines
#3

I'm trying to do an FAQ toggle dropdown text also only in the tablet and phone view. How can i do that through webflow or do i need custom code?


#4

Hi @goodEye

You don't need custom code to do that.

Simply create your dropdown on desktop and click on the desktop icon to disable your dropdown on desktop

Hope this helps,

Regards


#5

right, got that part, but I want to show all of the FAQ on desktop, show just the headline on tab and phone, click on headline to reveal text, click headline again to close text. I can't quite get the right combo of things to make it work.
thanks!


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.