CSS Stylings No Longer Working | XM Community
Skip to main content

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:

 

<!DOCTYPE html>

<html>

<head>

<style>

html, body {
  height: 100% !important;
  margin: 0;
  padding: 0;
  background-color: black !important;
}

p {
  color: white;
  font-size: 18px;
}

</style>

</head>

<body>

<p>Some text</p>

</body>

</html>

 

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

Your code looks mostly fine, but there are a few potential reasons why the background color may not be displaying as expected:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 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.

Thanks, @RickB. Edited to remove #SkinContent. 

For clarity, this all worked until recently, and I haven’t changed anything in the interim. Previously, the !important property was necessary to override Qualtrics’ default stylings, but at the moment even that isn’t working properly. I assume something has changed in the backend. 

Hi @Rogers_Lab_Bangor,

 

You can try with the below code once:

 

<!DOCTYPE html>
<html>

<head>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: black;
    }

    {
      color: white;
      font-size: 18px;
    }
  </style>
</head>

<body>
  <p>Some text</p>
</body>

</html>

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;
}

Leave a Reply


Terms & Conditions