Html Question posted in
Some basic documentation can be found here.

Html – Background-color css dosen't work when there is a //**// comment before it

After a couple hours of debugging my code, i tried removing the comment and the background-color suddenly was shown.

.announcement-bar1 {
  background-color: blue;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.announcement-text1 {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background-color: black;
  animation: loopText 20s linear infinite;
}

.announcement-text1 span {
  margin: 0;
  padding: 0 40px;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap; /* Prevent text from wrapping */
  background-color: black;
}

@keyframes loopText {
  0% {
    transform: translateX(50%);
  }
  100% {
    transform: translateX(-50%);
  }
}

vs

(incorrect code)
//*Announcement bar*//
.announcement-bar1 {
  background-color: blue;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
 }

.announcement-text1 {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background-color: black;
  animation: loopText 20s linear infinite;
}

.announcement-text1 span {
  margin: 0;
  padding: 0 40px;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap; /* Prevent text from wrapping */
  background-color: black;
}

@keyframes loopText {
  0% {
    transform: translateX(50%);
  }
  100% {
    transform: translateX(-50%);
  }
}

Why does the first code result in the following .announcement.bar1{} not work?

I tried everything but only removing the comment worked. Not seen this question anywhere so i thought i would post here so people dont run into this frustrating issue.

Tags:

2

Answers


  1. 0

    The correct format for CSS comments is

    /* comment */

    The extra slashes are not inside the comment, and are making the CSS invalid.

    Login or Signup to reply.
  2. 0

    Reference from MDN web docs:

    Comments can be placed wherever white space is allowed within a style sheet. They can be used on a single line, or traverse multiple lines.

    Correct CSS comment Syntax:

    /* Comment */

    Examples

    /* A one-line comment */

/*
A comment
which stretches
over several
lines
*/

/* The comment below is used to
   disable specific styling */
/*
span {
  color: blue;
  font-size: 1.5em;
}
*/
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search