How can I make the text in the dropdowns of my FAQ in Webflow break to the next line when the screen size changes?

To make the text in the dropdowns of your FAQ in Webflow break to the next line when the screen size changes, you can utilize custom CSS. Here's the step-by-step process:

1. Select the dropdown component in Webflow's Designer.
2. Go to the "Settings" tab in the right sidebar and give your dropdown element a custom class name. Let's say we name it "faq-dropdown".
3. Switch to the "Custom Code" tab in the right sidebar and click on "Head".
4. Add the following CSS code:

```css
@media (max-width: 767px) {
.faq-dropdown .dropdown-toggle {
white-space: normal !important;
}
}
```
This code applies a media query to screens with a maximum width of 767 pixels (which corresponds to smaller screen sizes like mobile devices). It targets the dropdown toggle within the 'faq-dropdown' class and sets the value of `white-space` property to `normal`, allowing the text to break to the next line.

5. Publish your site for the changes to take effect.

With this CSS code, the text in your dropdowns will automatically wrap to the next line when the screen size is smaller than 767 pixels, ensuring a better user experience on mobile devices or smaller screens.

Feel free to adjust the media query or any other CSS properties based on your design requirements.