Media queries issue in Internet Explorer

Question

I have seen this question is asked so often, i have tried all possible ways but my custom media queries are not working, it always pick following media query if screen size is bigger than 768px.

@media all and (min-width:768px){
//further code here
}

i tried adding following meta tags but found no luck.

<meta http-equiv="X-UA-Compatible" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

I am writing my media queries in following manner

@media all and (min-width:768px){
//further code here
}
@media all and (min-width:768px) and (max-width:1024px){
//further code here
}
@media all and (min-width:1025px) and (max-width:1440px){
//Further code here
}
@media all and (min-width:1441px) and (max-width:2560px){
//Further Code here
}

//Working Code of Media Query for my Screen Size
@media all (max-width:1440px){
  .border-center{
  background-image: url(../img/ms-border-to-centerp.png);
  background-size: contain;
  background-repeat: no-repeat;
  height:155px;
}
.searched-border-center{
  background-image: url(../img/ms-border-to-centerp.png);
  background-size: contain;
  background-repeat: no-repeat;
  height:183px;
}
.mosquePage{
  background-image: url(../img/ms-border-to-centerp.png);
  background-size: contain;
  background-repeat: no-repeat;
  height:183px;
}
#flipbook{
position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#flipbook1{
position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
  .compass_container {
    left: -34% !important;
    top: -34% !important;
    transform: scale(0.8) !important;
}
    
    .mainCompass{
        /*left:-45px; */
    }
    .compass__rose{
    height:250px !important;
    }
    .compass__pointer{
    height:250px !important;
        width:250px !important;
    }
    #qiblaDegree{
    margin-top:0px !important;
    }
}

Answer 1

It's because the styles are being applied to any size above 768px . Either use max-width or add !important to any styles you want to take precedence over any others. max-width is the better choice as adding !important can quickly get confusing and messy.