CSS Stylings No Longer Working

Question

I have a Qualtrics survey written mostly with custom JS. Throughout, I use CSS stylings to manipulate the background colour of the page body. At some point in the last week, my CSS stopped displaying properly (having worked correctly since January). Below is a minimal example of my code; the issue is that the html, body{ } chunk doesn’t affect the page body (i.e., it’s white rather than black). I’d be grateful for any suggestions! My script:

Some text

EDIT: I’ve tried altering the background colour inline, to no avail.

Rogers_Lab_Bangor · Accepted Answer

Thanks @Nanditha MM.I’ve managed to get this sorted; for anyone facing the same problem, the culprit is the “survey-canvas” object inside the “main” tag. This did the trick:main { background-color: black !important;}

RickB · Answer

Your code looks mostly fine, but there are a few potential reasons why the background color may not be displaying as expected:Qualtrics Platform Restrictions: Qualtrics may have specific restrictions or configurations that affect the way CSS is applied. Make sure that your CSS is compatible with the Qualtrics platform.ID Selector: In your CSS, you have #SkinContent selector, but there is no element in your HTML with the ID of "SkinContent". If this ID is not being used elsewhere, you can remove it from your CSS.Browser or Cache Issue: Sometimes, changes to CSS may not reflect immediately due to browser caching. Try clearing your browser cache or testing the page in a different browser to see if the issue persists.JavaScript Interference: If you have custom JavaScript that manipulates styles or the DOM, there might be a conflict causing the background color not to display correctly. Check your JavaScript code for any potential issues.Specificity Issue: If there are other CSS rules that target the body or HTML elements with higher specificity, they may override your background color rule. Ensure that there are no conflicting styles with higher specificity.Qualtrics Template Overrides: If you're using a Qualtrics template, there may be default styles or overrides that affect the appearance of your survey. Make sure your custom styles are not being overridden by template styles.Syntax Errors: Check for any syntax errors in your CSS or HTML code that might be preventing the styles from being applied correctly. Make sure there are no typos or missing characters.By checking these potential issues, you should be able to troubleshoot and resolve the problem with your CSS not displaying as expected in Qualtrics.

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded