2cf4a7d787
* feat: i broke it horribly * fix: background colour first * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: missing asserts * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: remove extra background * fix: meta order * feat: clarify descriptions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
2.7 KiB
2.7 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 612ec0490ae8626e9adf82e4 | Part 31 | 0 | part-31 |
--description--
You might have noticed the keys collapse when the browser window is smaller than 768px. Set overflow to hidden in the first .keys selector, to take care of this issue. This property will hide any element that is pushed outside the set width value of .keys.
--hints--
Your original .keys selector should have the overflow property set to hidden.
assert(new __helpers.CSSHelp(document).getStyle('.keys')?.overflow === 'hidden');
--seed--
--seed-contents--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design 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">
<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>
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;
}
--fcc-editable-region--
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
--fcc-editable-region--
.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: 335px;
}
.keys {
width: 318px;
}
.logo {
width: 150px;
}
}