How do I resize an individual image inside a rich text element in Webflow?

To resize an individual image inside a Rich Text Element in Webflow, you need to use a combination of custom classes and embedded code, since the Rich Text Element has limited direct styling options.

1. Use a Rich Text Element from a Collection or Static Page

• Ensure your Rich Text Element is either a static element or bound to a CMS field.
• Add your image to the Rich Text block using the Editor (CMS mode) or the Designer (if editing static content).

2. Apply a Custom Class to the Image Using the Editor

• Enter the Webflow Editor (www.yoursite.com/?edit) if the Rich Text is CMS-based.
• Click on the image inside the Rich Text block.
• Click the "gear" (⚙️) icon to open the image settings.
• Set a custom class name (e.g., small-image) in the "Custom attributes" or "Class" field, if available.
• If this is not editable, continue to Step 3 with a universal CSS selector.

3. Add Custom Code to Style the Image

• Go to Page Settings or Project Settings > Custom Code.
• In the Before tag section, add inline styles targeting the image.

Example:

<style>  .rich-text-block img[src*="your-image-name.jpg"] {    max-width: 200px;    height: auto;  }</style>

• Replace "your-image-name.jpg" with an identifying part of the image filename or a unique class if set.
• You can also target positions like .rich-text-block img:nth-of-type(3) to style a specific image positionally.

4. Publish to See Changes

• Publish your site to preview the changes. Webflow Designer won't render Custom Code accurately in preview.

Summary

To resize an individual image inside a Rich Text Element in Webflow, you need to apply a specific CSS rule—either by targeting a unique class added via the Editor or using image attributes like src. Use custom CSS in Project/Page Settings to apply the resizing style.