Webflow sync, pageviews & more.
NEW

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 the parent element to Flexbox with Wrap Children enabled.
  • Use Horizontal Direction and Justify: Space Between to align text left and "5 videos ^" right.
  • Limit left text width (e.g., max-width: 70%) and set "5 videos ^" to white-space: nowrap.
  • Test and adjust responsiveness using container widths and flex-grow if needed.

It sounds like you want the text to wrap onto a new line and align the "5 videos ^" to the right within a container in Webflow. Here’s how to achieve that using Webflow’s Flexbox layout:

1. Use a Flexbox Container

  • Select the parent element that contains both the text and the "5 videos ^" section.
  • Set its Display to Flex (in the Style Panel).
  • Choose Wrap Children to allow text to wrap when needed.

2. Align Text Properly

  • Ensure the parent element is set to Direction: Horizontal so the text flows in a line.
  • Set Justify: Space Between to push the first part of the text to the left and the "5 videos ^" to the right.

3. Adjust the Widths

  • If needed, set the first text block (left text) to max-width: 70% to allow it to wrap while still giving space for the "5 videos ^" to stay on the right.
  • Set the right-aligned text ("5 videos ^") to white-space: nowrap to prevent it from wrapping to a new line.

4. Ensure Proper Breakpoints

  • Test responsiveness by adjusting container widths on different screen sizes.
  • If necessary, adjust the flex-grow settings or use grid instead for more precise control.

Summary

Use Flexbox with Space Between, ensure Wrapping is enabled, and set whitespace rules properly for text alignment. This ensures the left text wraps naturally while keeping the "5 videos ^" neatly aligned on the right.

Rate this answer

Other Webflow Questions