Troubleshooting & Getting Help

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:

1. Open Developer Tools
2. Inspect the element you're trying to style
3. Look at the "Styles" panel to see which CSS rules are applied
4. Check for crossed-out styles (these are being overridden)
5. Note the specificity of existing rules
6. 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_123 .kn-page .kn-pie-chart-view {
  background-color: #fff3e0;
}

The Builder Network

Looking to get - or give - a hand? The Knack Builder Network is a network of vetted Knack builders that are available to help build your projects.

If you'd like some hands-on assistance with CSS or even just help with designing or building your app, the Builder Network is a great resource. You can write up the specifications for what you need done - along with your budget - and reach out for offers from Knack-vetted developers and app builders.

Knack Community

Knack has an outstandingly active community. If you're stuck and looking for a hand from a fellow Knack user - or looking to share your own knowledge - consider perusing or posting in our forums. Both the API & Customization and How Do I...? forums are great places to get and give help.

If you've built something you'd like to show off and explain to other developers or builders, we'd love to see it in the Show and Tell forum!

❗️

The Knack Support team is unable to test, troubleshoot, or write code for you.

While we're happy to guide you on whether custom code can be used for a specific purpose, it is outside the scope of our support to provide help designing or troubleshooting specific custom code.