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?

This issue usually arises from unintended style settings or interactions that may have been applied to your div blocks or grid layout. Let's go through the steps to troubleshoot and adjust your div blocks.

​

1. Check Grid Layout Settings

• Select the grid where your div blocks are placed.
• Ensure that the grid layout settings are correctly applied without any conflicting styles or interactions.

​

2. Inspect Div Block Styles

• Select each div block within your grid.
• Go to the Styles panel and look at the Hover state to verify the color settings.
• Make sure the hover color is set to red if that's your desired outcome. To do this, switch to the 'Hover' state in the style section and adjust the background color to red.

​

3. Check for Interactions

• In the Interactions panel, ensure that no interactions are applying the blue color on hover.
• Modify or remove interactions as necessary to revert them to the desired styles.

​

4. Review Global Styles

• Go to the Site settings and check if any global styles or CSS overrides are affecting the div block hover states.

​

5. Inspect Page Outline

• A red outline around the page could indicate a focus or border style applied at the page or element level. Check the Body (All Pages) tag in the Styles panel for any outline or border settings.

​

6. Save and Preview Changes

• After making the necessary adjustments, save your changes and preview the page in Webflow to ensure the hover states and outlines are displaying as intended.

​

Summary

Ensure your div block hover states are correctly set to red in the style panel, and verify that no interactions are overriding these settings. Also, check for any unintended global styles or page outlines impacting your design.