Certain unexpected behaviors on a web survey (incorrect display, survey still visible after deactivation, changes not applied) may be related to invalid CSS on your site. This article explains how to check and fix this.
Why can CSS affect your surveys?
Skeepers surveys integrate directly into your site and interact with the existing HTML, CSS, and JavaScript code. If the browser encounters significant CSS errors, the behavior of some page elements may be affected:
- incorrect display of components;
- overlapping elements;
- rendering issues;
- unexpected behaviors of web campaigns.
CSS standards continuously evolve. It is therefore important to regularly ensure that the style sheets used on your site remain compliant with current web standards.
Invalid CSS code can block the update of a deployment and prevent the application of the latest changes, even if the deployment appears valid. Always validate your CSS code before adding or modifying it.
Customize the design of a deployment
- From the Deployment tab, select the deployment you want to customize by clicking directly on the corresponding line.
- Click on
to access the editing interface.
-
The design interface then opens:
- A customization menu is displayed on the left.
- A real-time preview of your changes appears on the right.
-
Access your CSS by clicking on the
icon located on the right.
For more information on customizing the design of a deployment, see the dedicated article.
```html
Access the connector's advanced styling options
- From the Deployment tab of your campaign, click
Edit a deployment to open the deployment you want to customize.
-
In the
tab, select the action associated with the deployment.
-
Click Advanced settings to access the advanced customization options for the deployment format (button, pop-in, etc.).
How to check if your CSS is valid?
The W3C provides a free CSS validation tool: W3C CSS Validator
This tool identifies syntax errors, incorrect properties, unrecognized values, and deprecated or incompatible rules.
Method 1: Validate a URL
- Open the W3C CSS Validator.
- Select Validate by URI.
- Enter the URL of your page.
- Start the analysis.
- Review the detected errors.
Method 2: Validate your CSS code
- Open the W3C CSS Validator.
- Select Validate by Input.
- Copy and paste your CSS.
- Click Check.
- Fix the reported errors.
What to do if errors are detected?
- Fix the identified CSS errors.
- Publish the changes on your site.
- Clear the browser cache if necessary.
- Test the survey display again.
Best practices
- Regularly check CSS validity after each site update.
- Avoid using deprecated CSS rules.
- Test changes in a pre-production environment before going live.
- Monitor any errors reported by the W3C validator.
- If you use production and pre-production environments, create a dedicated deployment for each. This helps avoid caching and propagation issues while ensuring more reliable testing and safer production releases.
- Prefer private browsing to test your deployments and avoid biases related to browsing data.
When to contact Skeepers support?
If your CSS is valid and the problem persists after your checks, contact our team providing the following information:
- the affected URL;
- the deployment ID;
- the impacted browsers;
- if possible, screenshots or videos of the observed behavior.