My CSS breakpoint is not working

My code:

@media only screen and (min-width: 992px) {
    body{
        overflow-x: hidden;
    }
    ul{
        position: absolute; top: 0px; left: 640px; 
        display: inline-flex;
    }
    h6.f22{
        left: 140px;
        top:170px;
    }
    h2.int{
        top:160px;
        left: 94px;
        font-size: 55px;
    }
    h2.int2{
        top:160px;
        left: 370px;
        font-size: 55px;
    }
    p.descp{
        left: 100px;
        top:260px;
    }
    button.button{
        left:130px;
        top:430px;
    }
    div.boxed4{
        height:615px;
    }
    div.boxed2{
        height:800px;
    }
    footer#footer{
        position: relative;
       top: 363px;
    }
    h1.h1t{
        left: 500px;
        top:100px;
    }
    input#f1.form-control{
        left:350px;
        top:150px;
    }
    textarea#f1.form-control{
        left:350px;
        top:163px;
    }
    input.form-control.submit{
        top:170px;
        left:350px;
    }
    svg.svg-inline--fa1.fa-facebook{
        left:400px;
    }
    svg.svg-inline--fa2{
        left:430px;
    }
    svg.svg-inline--fa4{
        left:422px;
    }
    .svg-inline--fa{
display:inline-flex;
padding: 0 40px 0 0;
position: relative;
left:500px; top: 35px;
height: 45px;
width: 45px;
    }
}
@media only screen and (min-width: 1280px){
    ul{
        position: absolute; top: 0px; left: 1000px; 
        display: inline-flex;
    }
    a.nav-text{
font-size: 23px;
    }
    h1.title{
        font-size: 30px;
        position: absolute; top:10px; left: 60px;
    }
    h6.f22{
        font-size: 18px;
    }
    h1.h1t{
        position: relative; top: 140px; left: 850px;
    }
    input.form-control.submit{
        top:170px;
        left:691px;
    }
    input#f1.form-control{
        left:691px;
        top:150px;
    }
    textarea#f1.form-control{
        left:691px;
        top:163px;
    }
    .svg-inline--fa{
        display:inline-flex;
        padding: 0 40px 0 0;
        position: relative;
        left:800px; top: 35px;
            }
 
}

Here, @media only screen and (min-width: 992px) is for laptop and @media only screen and (min-width: 1280px) is for large devices such as pc. The problem is when im on laptop, my 1st breakpoint doesnt work, whenever i comment out the 2nd breakpoint only then it works for laptop. What can i do to solve this?

CodePudding user response：

Organize your media queries according to the form below:

p{
  background-color: black;
  font-size: 50px;
}

/* mobile */
@media only screen and (min-width: 480px){
  p{
    color: red;
  }
}

/* tablet */
@media only screen and (min-width: 768px){
  p{
    color: green;
  }
}

/* desktop */
@media only screen and (min-width: 992px){
  p{
    color: blue;
  }
}

/* huge */
@media only screen and (min-width: 1280px) {
  p{
    color: white;
  }
}

<p>TEXT</p>

CodePudding user response：

Your query seems right. Guess you'll see the query working when resizing your browser on your laptop and desktop to let's say a third of the screen size.

Most laptops these days use a resolution of 1920x1080 or higher. And even when it's lower there are still a lot of large resolutions used till 1280x1024. All these resolutions will make your latest media query kick-in.

CodePudding user response：

I think at first you should design for computer or mobile this is you first and main css

2.then put media qurey and control your element.

in this css file you need (@media only screen and (min-width: 1280px)) and you should put this code upper than the other