Troubleshooting Common Issues

🚧
Coming Soon! We're putting the finishing touches on this feature

Problem: Styles Not Applying

Solution: Check and Increase Specificity

/* ❌ Too low specificity - may not work */
.kn-action-button {
  background-color: red;
}

/* ✅ Higher specificity - will work */
.kn-page .kn-action-button {
  background-color: red;
}

/* ✅ Even higher specificity if needed */
.kn-app .kn-page .kn-action-button {
  background-color: red;
}

Debugging Steps:

Open Developer Tools
Inspect the element you're trying to style
Look at the "Styles" panel to see which CSS rules are applied
Check for crossed-out styles (these are being overridden)
Note the specificity of existing rules
Increase your specificity to match or exceed

Problem: Mobile Styles Not Working

Solution: Check Media Query Order and Syntax

/* ✅ Correct order: Desktop first, then mobile overrides */
.kn-main-nav {
  display: flex; /* Desktop default */
}

@media (max-width: 768px) {
  .kn-main-nav {
    display: none; /* Mobile override */
  }
}

Problem: Hover and Focus States Not Working

Solution: Increase Specificity for Interactive States

/* ❌ May not work due to low specificity */
.kn-action-button:hover {
  background-color: blue;
}

/* ✅ Higher specificity for reliable hover states */
.kn-page .kn-action-button:hover {
  background-color: blue;
}

/* ✅ Ensure focus states are accessible */
.kn-page .kn-action-button:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

Problem: Targeting Specific Views

Solution: Use Scene and View Classes

/* Target a specific form view */
.scene_123_view_456.kn-form-view {
  background-color: #e3f2fd;
}

/* Target all views on a specific page */
.scene_123.kn-page .kn-view {
  border: 2px solid #2196f3;
}

/* Target specific chart types */
.scene_456.kn-page .kn-pie-chart-view {
  background-color: #fff3e0;
}