Learn Responsive Web Design by Building a Piano - Step 33

Tell us what’s happening:
the code is seem correct but does not work

  **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 {
  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/105.0.0.0 Safari/537.36

Challenge: Learn Responsive Web Design by Building a Piano - Step 33

Link to the challenge:

Can you be more specific about what parts of the error message are confusing you?

1 Like

they say that you should add a piano selector in your new @media query

The @media query is used to set how your page would appear on different screens.
desktop view, mobile view and tablet view.

in this challenge, you’re expected to set the width of the element with an id piano and the element with class keys.

This is the syntax of the @media query

@media (property: value) and (property: value) { 
selector 1 {property: value;}
selector 2  {property: value;}
}

in your code you’re required to input selector 1 and selector 2.

Selector 1 = #piano
selector 2 = .keys

I hope this helps you

2 Likes

but i did the same thing you just said before but it didnt work
please look at my css code to see what i did

i solved it
thanks guys