Styling Not Applying

Your style changes aren't showing up? This guide helps you troubleshoot theme settings, design mode edits, and custom CSS problems.

Troubleshooting Styling Issues

Theme Changes Not Reflecting

You updated theme settings but the page looks the same.

This happens when changes aren't saved, the page is cached, or page-specific overrides take precedence.

Solution:

1. Look for the unsaved changes indicator in the theme editor
2. Click Save Theme to apply changes
3. Click Refresh Preview in the preview toolbar
4. Press F5 within the preview frame to reload
5. Perform a hard refresh with Ctrl+Shift+R to clear cached CSS
6. Check if the landing page has page-specific style overrides in design mode
7. Remember that theme changes apply workspace-wide to all landing pages

Design Mode Edits Not Saving

Style changes you make in design mode disappear or don't persist.

This occurs when auto-save is in progress, AI regenerates code, or the wrong element is selected.

Solution:

1. Wait for the Saving... indicator to complete
2. Avoid switching to AI mode immediately after making design changes
3. Make all AI edits before fine-tuning styles in design mode
4. Use the Layers panel to verify you're editing the correct element
5. Check element selection by highlighting it in the canvas
6. Open version history to see when changes were last saved
7. Revert to a previous version if recent changes were lost

Custom Styles Not Working

Your custom styling rules aren't applying as expected.

This happens due to CSS specificity conflicts, typos, or loading order issues.

Solution:

1. Press F12 to open browser developer tools
2. Click the Elements tab and select the element
3. View the Styles panel to see which rules are applying
4. Check for more specific selectors that override your custom styles
5. Verify element class names and IDs match exactly (check for typos)
6. Ensure custom styles load after default theme styles
7. Look for duplicate style rules that may conflict
8. Use more specific selectors or adjust CSS specificity if needed

Colors Not Matching Theme

Colors displayed on the page don't match your theme color settings.

This occurs when page-level overrides are set, CSS variables aren't loading, or color formats are inconsistent.

Solution:

1. Open the Theme Editor and verify color variables are set correctly
2. Check if individual elements have custom colors applied in design mode
3. Press F12, go to Elements, then the Computed tab
4. Find which style rule is setting the color that's displaying
5. Ensure you're using consistent color formats (hex, RGB, or CSS variables)
6. Clear element-level color overrides to let theme colors apply
7. Ask the AI: "Apply theme colors to all elements"

Responsive Display Issues

Styles look correct on desktop but break on mobile or tablet.

This happens when responsive breakpoints aren't configured or mobile styles override desktop incorrectly.

Solution:

1. Toggle between Desktop, Tablet, and Mobile views in the preview toolbar
2. Check how styles adapt at each viewport size
3. Verify responsive settings use correct breakpoint sizes
4. Check if elements are hidden on specific device sizes
5. Select the device size before making style edits in design mode
6. Ensure mobile-specific styles only apply at appropriate breakpoints
7. Ask the AI: "Make these styles responsive across all device sizes"

Fonts Not Loading

Custom fonts aren't displaying on your landing page.

This occurs when font files aren't loading, font names have typos, or fallbacks aren't set.

Solution:

1. Verify Google Fonts are loading (check Network tab in browser tools)
2. Check that custom font files are properly uploaded and accessible
3. Verify the font family name matches exactly (case-sensitive)
4. Look for typos in font-family CSS declarations
5. Check if fallback fonts are displaying instead of custom fonts
6. Ensure modern font formats (woff2) are used for best compatibility
7. Set appropriate fallback fonts in case custom fonts fail to load

Debugging Workflow

Use these steps to systematically diagnose styling issues:

1. Press F12 to open browser developer tools
2. Click the element selector tool and click the styled element
3. View Styles panel to see all CSS rules applying to the element
4. Check Computed tab to see final calculated styles
5. Look for strikethrough styles that are being overridden
6. Hard refresh (Ctrl+Shift+R) to clear cached styles

FAQ

Related Resources

• Theme Editor
• Design Mode Overview
• Element Styling