Learn Responsive Web Design by Building a Piano - Step 31

HTML-CSS
1

We have 21 key divs however only 14 appears (as intended) but when we use the media selector and change the width to 768px the rest of the key collapses so we had to use the option

overflow: hidden;

right on the #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>`

`
#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;
}

.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;
}
}

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.