Question 272878 in CSS Question posted in
Some basic documentation can be found here.

Css – Media queries go into effect on strange values

this is my media query as i try to make my react app responsive.

@media screen and (max-height: 800px) {
    font-size: 65px;
    .shuttleObject{
      width: 90%;
    }
  }
}

The thing is, when i try to change the height and width in the web developer console in chrome, this code works when:

width: 976px
height: 796px

then when i go

width: 976px
height: 797px

it doesnt go into effect

When i change the width to 977px its in effect again. Why does it work like that and is there something that i can do to only work how its supposed to, meaning that <800px = in effect, > 800 = not.

If I should provide more, please let me know.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I forgot to add this line of code in the head

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    After this added line it works correctly.


  2. 0

    Hope this helps! you can just set the required css properties as intial value, then change it to accordingly, when screen size height is greater than 800px height. (As Given Example).

    //use this as intial css values.
.demo{
    font-size: 65px;
    .shuttleObject{
      width: 90%;
    }
 }
 
//Apply css as per your requirement if height is greater than 800px

 @media screen and (min-height:800px) {
    /* style changes when the screen gets larger */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search