Design a Piano - Step 31

HTML-CSS
1

Tell us what’s happening:

step 31, Design a Piano. It says that ‘your second @media rule should have a #piano selector.’ I’ve tried everything I can, but the error wont clear. How do I fix this?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <div id="piano">
      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
      <div class="keys">
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
      </div>
    </div>
  </body>
</html>

/* file: styles.css */
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* Piano container */
#piano {
  background-color: #00471b;
  width: 992px;
  height: 290px;
  margin: 80px auto;
  padding: 90px 20px 0 20px;
  position: relative;
  border-radius: 10px;
}

/* Keys container */
.keys {
  background-color: #040404;
  width: 949px;
  height: 180px;
  padding-left: 2px;
  overflow: hidden;
}

/* White keys */
.key {
  background-color: #ffffff;
  position: relative;
  width: 41px;
  height: 175px;
  margin: 2px;
  float: left;
  border-radius: 0 0 3px 3px;
}

/* Black keys (pseudo-element) */
.key.black--key::after {
  background-color: #1d1e22;
  content: "";
  position: absolute;
  left: -18px;
  width: 32px;
  height: 100px;
  border-radius: 0 0 3px 3px;
}

/* Logo */
.logo {

/* User Editable Region */

  width: 200px;
  position: absolute;
  top: 23px;
}

/* Small screens */
@media (max-width: 768px) {
  #piano {
    width: 358px;
  }

  .keys {
    width: 318px;
  }

  .logo {
    width: 150px;
  }
}

/* Medium screens (FIXED) */
@media (min-width: 769px) and (max-width: 1199px) {
  #piano {
    width: 675px;
  }

  .keys {
    width: 633px;
  }
}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36

Challenge Information:

Design a Piano - Step 31

2

Welcome to the forum @saretha.ramu!

It looks like you may have changed the starting code in areas you were not asked to change, which will cause the tests to fail. Please click the reset button to restore the original code and try again.

image

Happy coding!

3

I did what you told me to but it’s still showing me the same error https://www.freecodecamp.org/learn/responsive-web-design-v9/workshop-piano/step-31

4

Please show your updated code.

5 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Piano</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <div id="piano">
    
    <img class="logo" 
         src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" 
         alt="freeCodeCamp Logo">

    <div class="keys">

      <!-- Set 1 -->
      <div class="key"></div>
      <div class="key black--key"></div>
      <div class="key black--key"></div>
      <div class="key"></div>
      <div class="key black--key"></div>
      <div class="key black--key"></div>
      <div class="key black--key"></div>

      <!-- Set 2 -->
      <div class="key"></div>
      <div class="key black--key"></div>
      <div class="key black--key"></div>
      <div class="key"></div>
      <div class="key black--key"></div>
      <div class="key black--key"></div>
      <div class="key black--key"></div>

      <!-- Set 3 -->
      <div class="key"></div>
      <div class="key black--key"></div>
      <div class="key black--key"></div>
      <div class="key"></div>
      <div class="key black--key"></div>
      <div class="key black--key"></div>
      <div class="key black--key"></div>

    </div>
  </div>

</body>
</html>

html {

  box-sizing: border-box;

}



\*, \*::before, \*::after {

  box-sizing: inherit;

}



/\* Piano container \*/

#piano {

  background-color: #00471b;

  width: 992px;

  height: 290px;

  margin: 80px auto;

  padding: 90px 20px 0 20px;

  position: relative;

  border-radius: 10px;

}



/\* Keys container \*/

.keys {

  background-color: #040404;

  width: 949px;

  height: 180px;

  padding-left: 2px;

  overflow: hidden;

}



/\* White keys \*/

.key {

  background-color: #ffffff;

  position: relative;

  width: 41px;

  height: 175px;

  margin: 2px;

  float: left;

  border-radius: 0 0 3px 3px;

}



/\* Black keys (pseudo-element) \*/

.key.black--key::after {

  background-color: #1d1e22;

  content: "";

  position: absolute;

  left: -18px;

  width: 32px;

  height: 100px;

  border-radius: 0 0 3px 3px;

}



/\* Logo \*/

.logo {

  width: 200px;

  position: absolute;

  top: 23px;

}



@media (max-width: 768px) {

  #piano {

    width: 358px;

  }



  .keys {

    width: 318px;

  }



  .logo {

    width: 150px;

  }

}



@media (min-width: 769px) and (max-width: 1199px) {

  #piano {

    width: 675px;

  }

  .keys {

    width: 633px;

  }

}
8

It doesn’t look like you reset your code. There are no comments in the CSS starting code.