Learn Responsive Web Design by Building a Piano - Step 28

Tell us what’s happening:

I have no idea what I’m doing wrong here. How am I supposed to include a #piano selector within the @media selector?

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


/* User Editable Region */

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

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

Challenge Information:

Learn Responsive Web Design by Building a Piano - Step 28

You’ve already created a #piano selector earlier in the course, so you know how to create one. You just want to add it “within” the media query. What does that mean to you? I would reset the step to get the original CSS back. Don’t change anything that is already there. Just add the new #piano select within the existing media query.

Hmm. I think I catch your drift. Let me reset it and I’ll get back to you on this.

Figured it out. Thanks for the feedback @bbsmooth!

1 Like

can somebody please help out and tell me what is the issue here

What is this? This isn’t the same step and I don’t see any comment.

If you need help on a step, please use the Help button in the step to open a new post in the forums.

The basic structure of a media query:

@media (condition) {
/* CSS rules */
}

Within the opening and closing braces of the media query, you can write the CSS rules that you need for a particular situation.

sorry about that, i’m new to this whole thing. But please if you can help me out that would be very kind of you

Yes, we can all help you out if you use the Help button in the step to create a new topic in these forums.

Here is the help button

You will have to click on the Check Your Code button a couple of times for it to show up

Then click on the create a post to the forum button and fill out the template.
Then we will have all of the information to help you

ok, i appreciate.
i’d do that now