What options should I set in Webflow to make this text wrap to a new line and align the "5 videos ^" to the right?
TL;DR
- Set parent container to Flex with Wrap enabled and Justify set to Space Between.
- Place main text and "5 videos ^" in separate child elements for proper wrapping and alignment.
To make text wrap properly and align "5 videos ^" to the right, you’ll need to adjust layout styles using Webflow's Flexbox or Grid settings, depending on your structure.
1. Use a Flexbox Container
- Select the parent element that contains both the main text and the "5 videos ^".
- Under the Layout section in the right-hand panel, set the Display to Flex.
- Set Direction to Horizontal (Row).
- Set Wrap to Wrap (not No Wrap) so content wraps to new lines if space is limited.
- Set Justify to Space Between to push the elements to opposite ends of the container.
- Optionally set Align to Start or Center vertically.
2. Structure Child Elements
- Ensure you have two distinct child elements inside the parent Flex container:
- One for the main text block.
- One for the "5 videos ^" text.
- The first block will naturally align left. The second will align right due to Space Between.
3. Adjust Width Responsively
- If the parent container is too narrow, it may force wrapping in unwanted ways.
- You can:
- Set a fixed or max width on the parent container.
- Ensure the left text block is set to auto width or flexible sizing so it wraps naturally.
4. Optional: Use Grid Instead
If Flexbox doesn’t suit your layout need:
- Set the parent container to Display: Grid.
- Define two columns: 1fr for the main text, auto for "5 videos ^".
- Place the respective text items in each column.
- This supports cleaner alignment and natural wrapping.
Summary
Set the parent container to Flex with Wrap enabled and Justify: Space Between, placing the main text and "5 videos ^" in separate child elements. This ensures proper text wrapping and right alignment of the video label.