A checklist of steps to take when you are trying to troubleshoot some issue in Webflow. This steps won't help every time but it should cover 80% of the issues.
- [ ] STEP 1: If it's a spacing issue, enable X-Ray mode and hover over different elements to find if the space is coming from some element's margin or padding.
- [ ] STEP 2: Remove the class from the suspect to see if the issue disappears. If it does, then skip to Step 6.
- [ ] STEP 3: Since removing a class on the suspect element didn't help, that means the issue is coming from some other element. Start by removing classes from the direct parent, then parent's parent, all the way up including the Body element until you remove the class that makes the issue disappear. If you find the buggy class, then skip to Step 6.
- [ ] STEP 4: If the issue isn't coming from any of the parents, then it might be coming from children or siblings. Repeat the process from Step 3 first with children then with sibling elements.
- [ ] STEP 5: If still no luck, then add the element from scratch. For example, if the issue is on the navbar. Add a brand new navbar. Place it in the body, so it's not affected by any of the parents. Then start recreating your navbar. Add classes and other elements one by one, and check for the issue every step. Either you'll find the issue, or it won't happen on this new element.
- [ ] STEP 6: Once you identify the class that's causing the issue, put the class back on the element and start resetting each style that is in blue color. You should be able to find a particular style that is causing the issue.
- [ ] STEP 7: If resetting blue styles didn't help or there are now blue styles, then start resetting the styles in orange color.