CODEWITHSUNDEEP
htmlcssmedia-queries
Sandeep Mourya
Sandeep Mourya

Reputation: 17

Media query not working when I change the screen size

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;
   
}

Upvotes: 0

Views: 1099

Answers (1)

Krishnkant Patidar
Krishnkant Patidar

Reputation: 36

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

Upvotes: 2

Related Questions