How can I adjust div blocks in Webflow's grid layout when they are showing a blue color when hovering over them instead of red, and the entire page has a red outline?
TL;DR
- Check the Div Block's Hover State in the Styles panel to ensure the background is set to the desired red color.
- Verify and adjust any red border styles applied to the Body or Page wrapper.
- Review parent elements for inherited styles causing unintended hover colors.
- Check for conflicting global styles affecting hover settings and apply changes.
- Publish and test to ensure changes are correctly applied.
If your div blocks are showing a blue color when hovering instead of the desired red, and your entire page has a red outline, you might need to adjust your style settings in Webflow. Let's go through the steps to ensure the hover colors are set correctly.
1. Check Hover State Styles
- Select the Div Block you are working with by clicking it in the Designer.
- In the Styles panel, make sure you are in the Hover State. You can do this by clicking the States dropdown (often indicated with a "None" or similar label) and selecting Hover.
- Ensure that the Background Color is set to the desired red color in the Hover State. This ensures that when hovering, it will appear red as intended.
2. Verify the Page's Outline Style
- If the entire page has a red outline, it could be a border style applied to the Body or Page wrapper.
- Select the Body or main Container element and check in the Styles panel if there is a border with the red color.
- Remove or modify the style if it's unnecessary or unintended.
3. Check Inherited Styles
- Sometimes styles are inherited from parent elements or symbols. Check if the blue hover color is defined in a parent element.
- Select higher-level parent elements in Navigator and review their Hover State to ensure no unintended styles are applied.
4. Confirm No Conflicting Styles
- Consider any Global Styles set for classes that might affect the appearance of elements nested within.
- Ensure there are no conflicting selectors applying different hover styles that could be overriding your red color choice.
5. Publish and Test
- Publish your project to preview live changes.
- Test the hover states again in the published site to confirm the application of the new settings.
Summary
To fix hover color issues, ensure the div blocks' Hover State is set to the desired color and check for any unintended page styles like borders. Review parent elements for inherited styles and ensure there are no conflicting styles.
