Piano Keys

Strange thing happened on this project. The C key is doubled. I haven’t touched the html or css code. It been like this from the start.

Please post your HTML and a link to the exercise.

https://www.codecademy.com/courses/build-interactive-websites/projects/piano-keys

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <p class='title'>Piano Player</p>
  <p id='demo'>Follow the song below to play  the piano.</p>
  <section class="piano">
    <section id='c-key' class="key">
      <section class='keynote'>C</section>
    </section>
    <section id='c-sharp-key' class="black-key">
      <section class='black-keynote'>C#</section>
    </section>
    <section id='d-key' class="key">
      <section class='keynote'>D</section>
    </section>
    <section id='d-sharp-key' class="black-key">
      <section class='black-keynote'>D#</section>
    </section>
    <section id='e-key' class="key">
      <section class='keynote'>E</section>
    </section>
    <section id='f-key' class="key">
      <section class='keynote'>F</section>
    </section>
    <section id='f-sharp-key' class="black-key">
      <section class='black-keynote'>F#</section>
    </section>
    <section id='g-key' class="key">
      <section class='keynote'>G</section>
    </section>
    <section id='g-sharp-key' class="black-key">
      <section class='black-keynote'>G#</section>
    </section>
    <section id='a-key' class="key">
      <section class='keynote'>A</section>
    </section>
    <section id='a-sharp-key' class="black-key">
      <section class='black-keynote'>A#</section>
    </section>
    <section id='b-key' class="key">
      <section class='keynote'>B</section>
    </section>
    <section id='high-c-key' class="key">
      <div class='keynote'>C</div>
    </section>
  </section>

  <section id='lyrics'>
    <section id='column-one'>
      <section id="word-one">HAP-</section>
      <section id="letter-note-one">G</section>
    </section>
    <section id='column-two'>
      <section id="word-two">PY</section>
      <section id="letter-note-two">G</section>
    </section>
    <section id='column-three'>
      <section id="word-three">BIRTH-</section>
      <section id="letter-note-three">A</section>
    </section>
    <section id='column-four'>
      <section id="word-four">DAY</section>
      <section id="letter-note-four">G</section>
    </section>
    <section id='column-five'>
      <section id="word-five">TO</section>
      <section id="letter-note-five">C</section>
    </section>
    <section id='column-six'>
      <section id="word-six">YOU</section>
      <section id="letter-note-six">B</section>
    </section>
    <section id='column-optional' class='column-optional'>
      <section id="word-optional">END</section>
      <section id="letter-note-optional">A</section>
    </section>

    <button id="first-next-line">Line 2</button>
    <button id="second-next-line">Line 3</button>
    <button id="third-next-line">Line 4</button>
    <button id="fourth-next-line">Reset</button>
  </section>

  <script  src="main.js"></script>

</body>
</html>
1 Like

That is the high-c key wrapping which means the container might not be wide enough. Please post the CSS so we can take a closer look.

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #ffc63f;
}
.title{
  font-size: 36px;
  margin-top: 10px;
  margin-bottom: 0px;
  padding: 0;
  color: #141c3a;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
}
#demo{
  text-align: center;
  font-size: 18px;
  margin-top: 15px;
  color: #141c3a;
  letter-spacing: 1px;
  font-style: italic;
}
.piano{
  width: 305px;
  height: 210px;
  display: block;
  margin: 0 auto;
  background-color: #fd4d3f;
  margin-top: 30px;
}
.key{
  width: 30px;
  height: 200px;
  display: inline-block;
  border: solid #141c3a 2px;
  box-shadow: 2px 5px;
  background-color: white;
  color: #141c3a;
}
.black-key{
  width: 25px;
  height: 100px;
  display: inline-block;
  background-color: #141c3a;
  color: white;
  position: absolute;
  margin-left: -12px;
  padding: 0px;
}
.keynote{
  width: 20px;
  height: 20px;
  text-align: center;
  display: block;
  margin: 0 auto;
  margin-top: 175px;
  color: #141c3a;
}
.black-keynote{
  width: 20px;
  height: 20px;
  text-align: center;
  display: block;
  margin: 0 auto;
  margin-top: 75px;
}
#lyrics{
  width: 400px;
  height: 240px;
  display: block;
  margin: 0 auto;
  padding-left: 20px;
  margin-top: 50px;
  background-color: #fd4d3f;
}
#column-one, #column-two, #column-three, #column-four, #column-five, #column-six, #column-optional{
  width: 90px;
  display: inline-block;
  text-align: center;
  margin-top: 30px;
}
#column-optional{
  display: none;
}
#word-one, #word-two, #word-three, #word-four, #word-five, #word-six, #word-optional{
  background-color: white;
  width: 90px;
  height: 25px;
  padding-top: 10px;
  letter-spacing: 5px;
  color: #141c3a;
}
#letter-note-one, #letter-note-two, #letter-note-three, #letter-note-four, #letter-note-five, #letter-note-six, #letter-note-optional{
  color: white;
  width: 25px;
  height: 25px;
  margin-top: 15px;
  margin-left: 35px;
}
#first-next-line, #second-next-line, #third-next-line, #fourth-next-line{
  width: 80px;
  height: 40px;
  font-size: 16px;
  position: absolute;
  margin-top: 30px;
  margin-left: 10px;
  border: none;
  background-color: #ffc63f;
  color: #141c3a;
  letter-spacing: 1px;
  cursor: pointer;
}```

It should look like this…

piano_keys

Still trying to spot the problem. Is your screen zoom set to 100%?

No. 67% on that screenshot. Brb with 100%

100%

IDK if it matters but I am using Chromium browser on a 1366x768 laptop screen.

It may well be that your browser is giving inline-block more space between than other browsers. Try changing the width on piano to 310px and see if that helps. Tweak it up by a pixel at a time until it does.

1 Like

Just curious, but does it change when you make the browser full screen?

Yep, that worked! Thank you sir!

.piano{
  width: 319px;
  height: 210px;
  display: block;
  margin: 0 auto;
  background-color: #fd4d3f;
  margin-top: 30px;
}

1 Like

Set it to 50% on that but works at any zoom level.

No it did not. I was messing with that as well.

BTW, the same issue happened to me. When I changed the piano width to 319, the problem disappeared.

1 Like

A post was split to a new topic: Why we dont call the function direct