How can I make the text in the dropdowns of my FAQ in Webflow break to the next line when the screen size changes?
TL;DR
- Set the FAQ text element to display as block or inline-block and ensure white space is set to wrap.
- Use responsive width units and typography, then test across Webflow breakpoints to confirm proper text wrapping on all devices.
To ensure the FAQ dropdown text wraps to the next line on smaller screen sizes in Webflow, you'll need to adjust the styles of the text elements inside your dropdown. Here's how:
1. Check the Text Element's Display Settings
- Select the FAQ text element (usually a paragraph or heading inside the dropdown).
- In the Style panel, make sure the Display is set to Block or Inline Block.
- Avoid using Flex: Row - No Wrap, as this may force text to stay on one line.
2. Enable Word Wrapping
- Still in the Style panel, look for the Typography section.
- Confirm that White Space is set to Wrap (not No Wrap), so text can move to the next line as needed.
- Do not apply
overflow: hiddenunless necessary, as it may clip the text instead of wrapping.
3. Set Max Widths or Use Responsive Units
- For the container holding your FAQ text, set a Max Width (e.g.,
100%,400px, or80vw) to prevent text from stretching endlessly. - Use responsive units like
%**,vw, oremfor width instead of hardcodedpx` values.
4. Use Responsive Typography
- Under Typography, set font sizes using EM, REM, or VW units for better scaling across devices.
- Consider adjusting Font Size and Line Height using media queries (Webflow’s breakpoints) for mobile views.
5. Test Across Breakpoints
- In Webflow’s Design panel, switch between Desktop, Tablet, and Mobile breakpoints.
- Adjust styling at each screen size to ensure text wraps properly in all views.
Summary
To make FAQ dropdown text wrap in Webflow, ensure the text display is block or inline-block, white space is set to wrap, and widths are responsive. Then test at all breakpoints to confirm clean wrapping behavior across devices.