Step 33 Building a Piano

The question says, For the new @media rule, set the width of the #piano to 675px and the width of the .keys to 633px.

 @media (min-width: 769px) and (max-width: 1199px) {
     #piano {
       width: 675px;
  }
    .keys {
    width: 633px;
    }
}

I am getting a hint that says, Your second @media rule should have a #piano selector.

Does anyone know what I am doing wrong?

/* file: index.html */
<!DOCTYPE html>
<html>
 <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 {
 background-color: #1d1e22;
 content: "";
 position: absolute;
 left: -18px;
 width: 32px;
 height: 100px;
 border-radius: 0 0 3px 3px;
}

.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;
 }
   **Your browser information:**

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

Challenge: Step 33

Link to the challenge:

That exact code is working for me. This may be an Apple issue. Have you tried various browsers?

Edit: woops, yes, you changed the first line, which broke the tests.

Your code is actually fine, but the test fails because the order of max-width and min-width is flipped compared to the original. I would recommend resetting the challenge.

Use this code !

Mod Edit: SOLUTION REDACTED

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

Hi, it does not work for me too. Any solutions?

Hello.
In the challenge itself, there is option ‘Ask for help’
You can use it to create your own thread about this step and your issue with it

The error is in your code is that you have to set max-width first instead of min-width… :slight_smile:

hello,
Fine, it works.