Design a Piano - Step 31

Curriculum Help
,
1

Tell us what’s happening:

Hi everyone, I’m stuck on Step 31 of the Responsive Web Design v9 Piano project. The test keeps saying “Your second @media rule should have a #piano selector,” even though my second @media (max-width: 768px) block contains both #piano and .keys with the required widths (675px and 633px). I’ve also reset my code and tried multiple versions, but the test still fails. Has anyone else experienced this or knows what might be causing it?

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 {
  background-color: #00471b;
  width: 992px;
  height: 290px;
  margin: 80px auto;
  padding: 90px 20px 0 20px;
  position: relative;
  border-radius: 10px;
}

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

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

.key.black--key::after {
  content: "";
  background-color: #1d1e22;
  position: absolute;
  left: -18px;
  width: 32px;
  height: 100px;
  border-radius: 0 0 3px 3px;
}

.logo {
  width: 200px;
  position: absolute;
  top: 23px;
}

@media (max-width: 1199px) {
  #piano {
    width: 675px;
  }

  .keys {
    width: 633px;
  }
}

@media (max-width: 768px) {
/* User Editable Region */
    /* Nothing goes here */
  
  #piano {
    width: 675px;
  }
/* User Editable Region */

#piano {
    width: 675px;
  }

  .keys {
    width: 633px;
  }

  .logo {
    width: 150px;
  }
}

Your browser information:

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

Challenge Information:

Design a Piano - Step 31

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/workshop-piano/612ec29c84b9a6718b1f5cec.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Welcome to the forum @mokwatisimacdonald,

You have two #piano selectors in your second @media rule and you have changed the starting code, which will cause the tests to fail. I suggest resetting this step and trying again.

Happy coding