---
id: 612ec29c84b9a6718b1f5cec
title: Part 33
challengeType: 0
dashedName: part-33
---
# --description--
For the new `@media` rule, set the `width` of the `#piano` to `675px` and the `width` of the `.keys` to `633px`.
With that, your piano is complete!
# --hints--
Your second `@media` rule should have a `#piano` selector.
```js
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
const piano = rules?.find(rule => rule.selectorText === '#piano');
assert(piano);
```
Your new `#piano` selector should have a `width` of `675px`.
```js
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
const piano = rules?.find(rule => rule.selectorText === '#piano');
assert(piano?.style.width === '675px');
```
Your second `@media` rule should have a `.keys` selector.
```js
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
const keys = rules?.find(rule => rule.selectorText === '.keys');
assert(keys);
```
Your new `.keys` selector should have a `width` of `633px`.
```js
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
const keys = rules?.find(rule => rule.selectorText === '.keys');
assert(keys?.style.width === '633px');
```
# --seed--
## --seed-contents--
```html
Responsive Web Design Piano
