Learn Responsive Web Design by Building a Piano - Step 33

HTML-CSS
1

Tell us what’s happening:

estoy realizando el piano segun las especificaciones que me pide la consigna y no me toma los parametros correctamente, es en diseño web adaptable en el ultimo ejercicio (num 33) alguien que me pueda ayudar?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>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" alt="freeCodeCamp Logo" />
      <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>

/* file: styles.css */

/* User Editable Region */

@media (max-width: 991px) {
  #piano {
    width: 675px; /* This addresses points 1 and 2 */
  }

  .keys {
    width: 633px; /* This addresses points 3 and 4 */
  }
}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Challenge Information:

Learn Responsive Web Design by Building a Piano - Step 33

2

Tu solución funciona desde mi punto de vista. Prueba uno de los siguientes pasos para continuar.

Haz clic en el botón “Restablecer” y fuerza la actualización de la página con CTRL + F5 si usas Windows. Luego, intenta pegar el código de nuevo. En otros sistemas, sigue las instrucciones aquí.

O bien, prueba el paso en modo incógnito o privado.

O bien, desactiva todas las extensiones que interactúan con el sitio web de freeCodeCamp (como el modo oscuro, los bloqueadores de anuncios o los correctores ortográficos) y configura el zoom de tu navegador al 100 %. Ambos factores pueden provocar que las pruebas fallen erróneamente.

O bien, asegúrate de que tu navegador esté actualizado o prueba con otro.

O bien, desactiva los temas de alto contraste en Windows (desde el menú de configuración de accesibilidad).

Espero que alguna de estas opciones te funcione.

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Reset” step button and force a refresh of your page with CTRL + F5 if you’re on Windows then try to paste the code in again. On other systems, please follow the instructions here.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

or - Turn off high contrast themes on Windows (from accessibility settings menu)

I hope one of these will work for you.

3

Are you writing your comments in English for some reason?