CSS Media Query Not Working for Devices Widths 1000px and Greater-CodePudding

For some reason my CSS media query is not working for device widths 1001px and up. I have never seen this occur before with any of my prior projects. Any suggestions?

My media queries for devices that are 1000px and below is working fine. I have updated Chrome, cleared my cache, and still nothing. Here is my CSS...


style {

@media only screen and (min-width: 1001px) and (max-width: 1500px) {

  /* --- NAV ---*/

  .navbar {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 2rem 1.5rem;
    background: white;
    box-shadow: 0px 0px 33px -18px gray;
    position: fixed;
    z-index: 2;
    width: 100%;
  }
  .nav-item {
    margin-left: 2rem;
  }
  .nav-link {
    font-size: 13pt;
    font-weight: 400;
    color: #8f8f8f;
  }

  /* --- BODY ---*/

  .header-div {
    filter: brightness(100%);
    height: 23rem;
  }
  #header-image {
    max-width: 100%;
    filter: brightness(80%);
    margin-top: 2rem;
    position: relative;
    z-index: -1;
  }
  .header-h1 {
    color: white;
    font-size: 20pt;
    font-weight: 400;
    width: 20rem;
    padding-left: 2rem;
    margin-top: -16rem;
  }
  .header-h2 {
    color: white;
    font-weight: 300;
    margin-top: 5px;
    margin-bottom: 9px;
    font-size: 15pt;
    padding-left: 2rem;
  }
  .first-button {
    color: black;
    background: #f2f2f2;
    border-radius: 3px;
    padding: 4px 11px;
    border: none;
    font-weight: 400;
    margin-top: 10px;
    cursor: pointer;
    transition: all linear 0.4s;
    margin-left: 2rem;
  }
  .first-button:hover {
    color: white;
    background: black;
  }
}

}

CodePudding user response：

Delete style { on the first line.

Stylesheets don't need a style element selector.

CodePudding user response：

Just copy and paste this:

@media only screen and (min-width: 1001px) and (max-width: 1500px) {

  /* --- NAV ---*/

  .navbar {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 2rem 1.5rem;
    background: white;
    box-shadow: 0px 0px 33px -18px gray;
    position: fixed;
    z-index: 2;
    width: 100%;
  }
  .nav-item {
    margin-left: 2rem;
  }
  .nav-link {
    font-size: 13pt;
    font-weight: 400;
    color: #8f8f8f;
  }

  /* --- BODY ---*/

  .header-div {
    filter: brightness(100%);
    height: 23rem;
  }
  #header-image {
    max-width: 100%;
    filter: brightness(80%);
    margin-top: 2rem;
    position: relative;
    z-index: -1;
  }
  .header-h1 {
    color: white;
    font-size: 20pt;
    font-weight: 400;
    width: 20rem;
    padding-left: 2rem;
    margin-top: -16rem;
  }
  .header-h2 {
    color: white;
    font-weight: 300;
    margin-top: 5px;
    margin-bottom: 9px;
    font-size: 15pt;
    padding-left: 2rem;
  }
  .first-button {
    color: black;
    background: #f2f2f2;
    border-radius: 3px;
    padding: 4px 11px;
    border: none;
    font-weight: 400;
    margin-top: 10px;
    cursor: pointer;
    transition: all linear 0.4s;
    margin-left: 2rem;
  }
  .first-button:hover {
    color: white;
    background: black;
  }
}

I deleted the style {

}

You used "style" as a selector and put the media query in it