I believe there may be an issue with the test validation for the Piano project. The instructions require the new @media rule to contain:
A #piano selector with width: 675px
A .keys selector with width: 633px
I have added the required second @media rule exactly as instructed, and the CSS is valid. I have also checked the following:
The CSS syntax is correct.
All brackets and media queries are properly closed.
The selectors and widths match the requirements exactly.
I refreshed the page, cleared the issue by trying different browsers, and re-entered the code manually. However, the tests continue to return:
“Your second @media rule should have a #piano selector.”
“Your new #piano selector should have a width of 675px.”
“Your second @media rule should have a .keys selector.”
“Your new .keys selector should have a width of 633px.”
Based on the code and the requirements, the solution appears correct, but the automated test does not seem to recognize it. Could you please verify whether there is a bug with the test validator or the challenge state?
Thank you for looking into this.
Welcome to the forum @carla.mateus.gallo,
If you’ll please post your code and a link to the challenge, we will try to help.
The easiest way to do that is to use the “Help” button in the challenge.
Or you can copy/paste your code, formatted as follows:
There are two ways you can format your code to make it easier to read and test:
- After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (
</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)
- Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post.
To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:
Happy coding
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;
}
}
Welcome to the forum @carla.mateus.gallo
Please post a link to the challenge, or follow the advice from @dhess.
Happy coding
It looks like you swapped the order of the max-width and min-width for the media query, which is causing the tests to fail.
Copy the new selectors, reset the step, then paste the new selectors back into the original media query.
Happy coding