Solution 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.

Problem :

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

Comments

Comment posted by bill.gates

did you tried to turn around the order? the first is the last, and the last is the first?

Comment posted by Sybghatallah Marwat

does it make any difference ??

Comment posted by bill.gates

yea it could make the difference

Comment posted by Sybghatallah Marwat

I have tried that too, still facing same issue

Comment posted by Sybghatallah Marwat

I changed my code to

Comment posted by Daniel_Knights

It’s likely an issue with some specific styles then. Could you include a demo of what’s wrong?

Comment posted by Sybghatallah Marwat

i have edited the question and put some code for you, i am using same code with different sizes for elements

Comment posted by Sybghatallah Marwat

My bad luck, Media Queries are working but i have 3 Divs and other divs are shown over 1st Div i need

By

Leave a Reply

Your email address will not be published. Required fields are marked *