CODEWITHSUNDEEP
htmlcssnoscript
adddff
adddff

Reputation: 27

noscript style no working

hey im making a html document and i want to have it so that when someone visits the page and has noscript enable, it would make the entire page black and display white text saying "enable JavaScript" here is my code:

<noscript>
<style>
.noscript{
   width: 4000px;
   height: 4000px;
   position: fixed;
   top: 50%;
   left: 60%;
  transform: translate(-50%, -50%);
   background: black;
}
.noscriptext{
width: 400px;
   height: 100px;
   position: fixed;
   top: 40%;
   left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; font-size: 100%;
  color: white;
}

</style>

<div class="noscriptext"><h1>to use this you must enable javascript</h1></div>
</noscript>

<div class="noscript">&nbsp;</div>

but it's not working help please? i tried this one: Body styling for a noscript tag? but nothing. pictures:https://i.sstatic.net/LhF4y.jpg

Upvotes: 1

Views: 837

Answers (1)

Michael Coker
Michael Coker

Reputation: 53664

You have .noscript after . noscriptext so it's displaying on top. Put .noscript before .noscriptext or use a z-index on .noscriptext.

But you can simplify this quite a bit, I would use this instead.

<noscript>
<style>
.noscriptext {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<div class="noscriptext"><h1>to use this you must enable javascript</h1></div>
</noscript>

Upvotes: 2

Related Questions