You may run into an issue where you try to update the style of a block, like a block of text, but it doesn’t change in your preview.
This might seem like a bug with the Visual Editor, but a common culprit is styling coming from your repo’s CSS files.
Builder integrates with your existing site and inherits styles from it. So, if in your stylesheet you have specified, say, all h1 tags to be red, Builder won’t normally override that styling.
When there are two conflicting CSS styles, specificity wins. The specificity of the h1 selector coming from my codebase makes it so that, even when Builder tries to change the color, the red color takes priority.
A quick way to check for this is to open up your browser’s inspector, and see if there are any conflicting styles.
But I want my text to be blue, so how do I make that happen?
There are a few ways
- Update your CSS file, but this might cause unexpected changes to the styling of other elements that share that selector
- Use inline styles. In the Options tab, select “Edit as code” and use an inline-style to apply your CSS
- Ask Visual Copilot. Builder’s AI can handle some of your style editing for you. For details, check out Visual Copilot: use AI to create content
