Can I change the default width of images in my blog on Webflow to be full-width instead of half-width?

By default, Webflow may set images in rich text elements to a specific width, but you can change them to full-width by adjusting styling settings.

1. Use Custom CSS in Webflow

• Go to the Designer and select the Rich Text Block that contains your blog content.
• Add a class to the Rich Text Block (e.g., blog-content).
• Open Page Settings, scroll down to Custom Code, and insert this inside the <style> tag in the Head Code section:
• blog-content img { width: 100%; height: auto; }
• Save and Publish your site to apply the change.

2. Adjust Image Settings Manually

• Click on an image inside the Rich Text Block.
• In the Element Settings Panel (⚙️ icon), look for Display options.
• Set Width to 100% to make the image span the container fully.
• Ensure its parent container (the Rich Text Block) has a max-width set appropriately, such as 800px or 100%, so it doesn’t expand beyond your content width.

3. Modify the Rich Text Block Settings

• If the images are inside a CMS Rich Text field, select the Rich Text Block and click Edit Rich Text Settings.
• Add a class to target only blog images and set them to 100% width in the Style Panel.
• If images still don’t span correctly, check the parent container’s flexbox/grid settings to ensure it allows full width.

Summary

To make blog images full-width, you can: (1) add custom CSS to set img { width: 100% }, (2) manually adjust image settings inside the Rich Text Block, or (3) modify Rich Text Block styles to ensure images follow container width constraints. Publish and test on different screen sizes for best results.