Where can I find and remove the small grey border on all images in my rich text block in Webflow?
Published on
September 22, 2023
To find and remove the small grey border on all images in a rich text block in Webflow, you can follow these steps:
- Open your Webflow project in the Designer.
- Select the rich text block that contains the images you want to edit.
- Go to the Styles panel on the right-hand side of the Designer.
- In the Selector field at the top of the Styles panel, make sure the rich text block is selected.
- Scroll down to the "Text" section of the Styles panel.
- Locate the "Image" element within the "Text" section.
- If there is a grey border surrounding the image, it is likely due to the default styling applied by the Webflow Rich Text Editor.
- To remove the border, you can add a custom CSS class to the images in the rich text block and target that class in your project's custom code.
- To add a custom class to the images, click on the image within the rich text block and go to the Settings panel on the right-hand side.
- In the class name field, enter a custom class name such as "no-border" (without the quotes).
- Click outside of the Settings panel to save the class.
- Now, go to the Custom Code section of the project settings by clicking on the gear icon in the top-right corner of the Designer, then selecting "Custom code" from the dropdown menu.
- In the "Head Code" section, add the following CSS code:
.no-border { border: none;}
- Save the changes to the custom code and go back to the Designer.
- Now, with the rich text block selected, go to the Styles panel and scroll down to the "Text" section.
- Within the "Text" section, locate the "Image" element again.
- Add the custom class name "no-border" to the "Class" field of the Image element.
- The grey border should now be removed from all images within the rich text block.
In summary, to find and remove the small grey border on all images in a rich text block in Webflow, you need to add a custom class to the images and target that class in your project's custom code to set the border property to none. This will effectively remove the grey border from the images.
Additional Questions:
- How do I customize the styling of images in Webflow?
- Can I remove the default padding around images in a rich text block in Webflow?
- How do I make images responsive in Webflow?