Learn Responsive Web Design by Building a Piano - Step 33

I am not sure what I have done wrong on the last step of this tutorial as while testing everything seems to work out. Please let me know if there s anything that can fix this error. Thank you

My code is:

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

.keys {
    width: 633px;
}

}

Error message:
Sorry, your code does not pass. Keep trying.
Your second @media rule should have a #piano selector.

I’m going to give you some advice here that will help you in any future steps. Do not make unnecessary changes to existing code. The tests are often looking for specific things and if you change something you didn’t need to and weren’t asked to then you might cause the tests to fail, even if the changes you made shouldn’t make a difference.

In this case, you changed the order of the tests in the media query. Put them back to where they were originally. This is an example of a change you weren’t asked to make and didn’t need to make. The tests don’t like it and that’s why you aren’t passing.

Ohh okay, I usually try to follow and not add extra on the website to avoid this. Have not realised max has to be first and then min, on the previous step.

This solved the issue. Thank you so much!

2 Likes