Press for navigation
Swipe for navigation
Grain AI
Optimize web appearance with CSS snippets for margins, link colors, pointer events, div dimensions, and more.
Website Styling
Updated 14 hours ago
Grain AI's Top Features
Hides Webflow badge
Adjusts rich text margins
Enforces link color inheritance
Manages pointer events
Maintains square div dimensions
Hides focus outlines
Resets ordered list styling
Sets global font size
Provides margin and padding utilities
Ensures container alignment
Frequently asked questions about Grain AI
You can hide the Webflow badge by adding `.w-webflow-badge { display: none!important; }` to your CSS.
Use the specified CSS to remove margins: `.w-richtext>:first-child { margin-top: 0; }` and `.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child { margin-bottom: 0; }`.
Add the following CSS: `a, .w-tab-link, .w-nav-link, .w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link { color: inherit; }` to ensure links inherit color from their parent elements.
Use the `.clickable--off` class to disable pointer events, and `.clickable--on` to enable them.
Apply the `div-square` class, which uses padding to maintain a 1:1 aspect ratio: `.div-square::after { content: ""; display: block; padding-bottom: 100%; }`.
Add `main:focus-visible { outline: -webkit-focus-ring-color auto 0px; }` to your CSS to hide the focus outline for the main element.
Use the following CSS to reset ordered list styling: `ol { padding-left: 1.5rem !important; } ol li { background-image: none !important; padding-left: 1rem !important; list-style-type: decimal !important; }`.
Set the global font size to 100% by using: `:root { font-size: 100%; }`.
Ensure container alignment with: `.container, .container-medium, .container-small, .container-large { margin-right: auto!important; margin-left: auto!important; }`.
To reset the appearance for form elements, use the specified CSS for inputs and textareas, making them appear uniform across different browsers.
Category
Website Styling
Prev Project