Wrapping Lists Around Images & Video

Want your lists to wrap properly around floated images and video elements?

You can, and with Webflow's 2024 updates you can even do this using the designer directly with no custom code.

Styling

Here's the styling you need to apply.

We recommend you apply all styles "within rich text element" so that they only affect rich text and only within the specific rich text classes you create.

Ordered / Unordered List Element

Set the layout of the list element itself;

• Display: inline

Then, under custom properties at the bottom of the style panel, set these;

• Margin: 0
• Padding: 0

List Item Element

To indent your bulleted items;

• Margin-left: 40px

To give them space;

• Margin-bottom: 1rem

Image /Video Figure Element

For a right-justified figure,;

• Margin-left: 40px
• Margin-bottom: 20px

‍