If your gauge style looks broken, misaligned, or different from the admin panel preview, the issue is usually a CSS conflict with your website's theme.
**Solutions:**
**1. Ensure Base CSS is Loaded**
Make sure this line is in your page's `<head>` section:
```html
<link rel="stylesheet" href="https://remappingwebsite.com/lookup/api/styles/vehicle-lookup-base.css">
```
The base CSS must be loaded before the page renders. Without it, gauge styles will not display correctly.
**2. Check for CSS Overrides**
Your website's CSS may be overriding the widget's styles. Common conflicts:
- Global `*` selectors that reset all element styles
- Theme styles targeting `div`, `select`, `button`, or `input` elements broadly
- CSS frameworks (Bootstrap, Tailwind) that apply global resets
**3. Check for Duplicate Gauge CSS**
If you manually linked a gauge CSS file AND your settings load one automatically, there may be conflicts. The widget automatically loads the correct gauge CSS from your settings. Do not manually add gauge CSS files.
**4. Use Browser Developer Tools**
1. Right-click on the widget and select **Inspect**
2. Check the **Styles** panel for any overridden CSS rules
3. Look for your theme's styles overriding widget classes
4. Crossed-out styles indicate they are being overridden
**5. Test on a Clean Page**
Create a simple test page with just the widget code (no other CSS or scripts) to confirm the gauge style works correctly in isolation. If it looks fine on the test page, the issue is a conflict with your website's theme.
**6. Contact Support**
If you cannot resolve the CSS conflict, contact support with:
- Your website URL
- The gauge style you are using
- A screenshot of how it currently looks
