"Spaceship Accessories" text is not showing properly

Question:
When I click the Add accessory button to add an accessory to my spaceship, the modal that pops up still shows with white text, even though I’ve set the color to black in any possible way I can, even using !important, but it’s not working at all.
Repl link: https://replit.com/@element1010/Cosmic-Adventure

<div id="modal">
  <div id="modal-content">
    <span id="close-modal" onclick="closeModal();">&times;</span>
    <span id="modal-text"></span>
  </div>
</div>
* {
  ...
  color: white;
}

...

#modal-content {
  background-color: white;
  color: black;
  ...
}

#modal-text {
  color: black !important;
}

I doubt it, but what if you target:

#modal-content span {
  color: black;
}
1 Like

No, it still doesn’t work.

I’ve changed the modal color to black for a temporary fix.

Hello @element1010!

Change lines 13-17 at script.js to:

const modalContents = {
  accessories: `
    <h2 class='text'>Spaceship Accessories</h2>
  `
}

Then, add the following to style.css:

.text {
  color:black;
  text-align: center;
}

No, it still didn’t work.

I looked at your code, and it appears that you kept the center tag and removed the text-align style.

Please also note the the center tag is deprecated.

Thank you, it seems to have worked now. Why was the center tag changing the color?

Probably some browser specific override for the tag, best I can guess.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.