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

You can resize an individual image inside a Rich Text Element in Webflow using the settings panel or custom CSS. Here’s how:

1. Use Webflow’s Inline Image Resizing

• Double-click on the Rich Text element to enter edit mode.
• Click on the image within the rich text.
• Drag the blue corner handles to resize manually.

2. Adjust Image Size Using Custom CSS

If you need more precise control, use custom CSS inside an Embed element:

• Add an Embed element inside your Rich Text block.
• Insert this inline CSS:
• <style> .your-image-class { width: 300px; } </style>
• Assign the class to the image in the Rich Text element using the "Custom Attributes" panel.

3. Use the Custom Code Panel for Global Styling

• Go to Page Settings > Custom Code and enter this in the <style> section:
• .rich-text-class img:nth-of-type(1) { width: 300px; }
• Modify nth-of-type(n) to target a specific image in the Rich Text block.

Summary

You can resize images directly by dragging the handles or apply custom CSS for more control. If needed, custom styles can be placed inside an Embed element or the Page Settings panel.