Sorry for being dumb, i am stuck pls help

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<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 */
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; min-width:769px; )

  **Your browser information:**

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

Challenge: Step 32

Link to the challenge:

2

If we have to start apologizing for “being dumb”, I’m going to wear out my keyboard… This is hard and confusing stuff, cut yourself some slack.

When in doubt, google it. Seriously, professional devs do this all day long. I didn’t know how to do this so I googled “media query range” and was able to find the answer.

3

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