Here's the CSS of div I am trying to get to change on max width 800px. I don't understand what I am doing wrong, the same query of max width works for other container divs.

  @media(min-width :800px){
    .bodyForClient{
      background: black;
      height: 2000px;
    }
  }



  .bodyForClient{
    height: 100vh;
    width:100%;
    background: rgba(80, 74, 5, 0.802);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
   
}

CodePudding user response：

There are two things I noticed.

1. You put media query on top but it should have on bottom.
2. As you mentioned you want to get a interaction on max-width of 800px but in media query you put min-width so it's working just opposite.

You can apply like this.

It'll apply from (your screen resolution) to 801px.

.bodyForClient{
    height: 100vh;
    width:100%;
    background: rgba(80, 74, 5, 0.802);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

and it will for 800px and below screens

@media(max-width:800px){
.bodyForClient{
      background: black;
      height: 50vh;
    }
}

Here you go: https://codepen.io/jskrishna/pen/ZEvNQNW