Learn Responsive Web Design by Building a Piano - Step 27

Tell us what’s happening:
I need to add @ media query

   **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;
}

.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 only screen and (max-width: 768px) {
max-width: 768px;
}

   **Your browser information:**

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

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

Link to the challenge:

You don’t want to add anything inside of the media query yet. Just add the media query itself.

Also, while what you have is technically correct, it’s not what the tests want. They just want the @media keyword and the condition. Get rid of the screen only media type.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.