Mobile devices not being able to use media queries-CodePudding

So i'm trying to use media queries and it just doesn't work on devices with 800 px in height.

 @media only screen and (max-width:600px) {
  .logo {
   display: inline-block;
    position: sticky;
    color: white;
    font-size: 4vw;
    margin-top: 2.7vw;
 }


 .lista{
   text-decoration: none;
   position: sticky;
   color: white;
   padding-bottom: 7px;
   transition: .1s all linear;
   font-size: 3vw;
   display: inline-block;
   font-weight: bold;
 }

  header ul.navigace{
   float: right;
   margin-top: 3vw;
   word-spacing: 1vw;
 }


  header{
   background: rgb(31, 9, 110);
   position: sticky;
   height: 9vw;
 }

tried even setting maximum height and stuff and it didn't work.

CodePudding user response：

If you only want it for mobile devices, this width should be up to 767px (as you did). However, if you want to customize it for tablet and desktop devices, you can give a certain range. It is possible to achieve this with the following code.

@media only screen and (min-width: 768px) and (max-width: 1023px) {..}

CodePudding user response：

if you want to use media query at 800 px in height then you have to do like@media (min-height:800px){} your code in your code you are not closing the bracket "}" at the end that's why it's not working