Piano

--- id: 612ec29c84b9a6718b1f5cec title: Step 33 challengeType: 0 dashedName: step-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 Piano

``` ```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; 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; } } --fcc-editable-region-- @media (max-width: 1199px) and (min-width: 769px) { } --fcc-editable-region-- ``` # --solutions-- ```html Piano

``` ```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; 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 (max-width: 1199px) and (min-width: 769px) { #piano { width: 675px; } .keys { width: 633px; } } ```