css media query not working properly on google chrome

Question

I am working on creating my website in php from a week or more all my media queries working properly as defined... @media screen and (max-width: 768px) @media screen and (max-width: 600px) ...But suddenly chrome stopped working properly and showing contents of 768px on the width of 960px, and on 750px instead of 600px. I have refreshed chrome again and again even cache, but no result. But EADGE is working fine. Is there any problem with chrome refreshing frequently during developing website or something else? Kindly help me in this weird situation.

@media screen and (max-width: 900px) { 
.side-btn{
    font-size: 100%;
    margin: 4px 5px;
    padding: 3% 3%;
}
}
@media screen and (max-width: 768px){
.nav1 ul li{
    clear: both; 
    width: 100%;
    border-right: none;     
    border-bottom: 1px solid grey;      
}
.nav2 {     display: block; }
.navul{     display: none;  }

}
@media screen and (max-width: 600px) {
.startmenu,.itemhead{   font-size: 100%;}
.side-btn{
    font-size: 80%;
    margin: 4px 3%;
    padding: 3% 3%;
}
.itbody{ height: 340px; }
.custom{
    margin-top: 3px;        
    width: 100%; 
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.inqbasket{
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
}
.ifcol1{    width: 100%;    }
.ifcol2{    width: 100%;    }

}

Please show us some code so we can see where the problem is. — Boian Ivanov, Sep 12 '17 at 11:07
Welcome to Stack Overflow! Please take the [tour], have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) Please update your question with a **runnable** [mcve] demonstrating the problem, using Stack Snippets (the `[<>]` toolbar button). We cannot help you with code/markup/styles we cannot see. — T.J. Crowder, Sep 12 '17 at 11:08
Let me put it this way: if you don't provide some code as well, you are just wasting your time; you will never get an answer. — doubleOrt, Sep 12 '17 at 11:14

score 3 · Accepted Answer · answered Sep 12 '17 at 12:43

3

I have found the mistake I'am making is that I have zoomed out my chrome browser to 67% that was cause the problem of width scaling. Now everything is working fine when I backed to 100% zoom.

answered Sep 12 '17 at 12:43

Muhammad Adeel

85
1
9

this is working for me, in my case browser zoomed to 80%, that was the reason behind media query were not working, i have zoomed to 100%, now working. – Sanjay Tiwari Oct 20 '20 at 11:01

score 0 · Answer 2 · answered Sep 12 '17 at 11:14

I've seen some weird behavior in Chrome a few years ago, mainly when it didn't render the page from GPU (check this link for some info: Chrome and Media Queries Bug). But the solution offered there helped me back then, so put transform: rotateZ(0deg); on the body element. But without a code example, that`s the best guess I can make. Cheers

score 0 · Answer 3 · answered Sep 12 '17 at 11:42

You should try min-width instead of max-width. I am sharing change code with you, Try it.

@media screen and (min-width: 900px) { 
.side-btn{
    font-size: 100%;
    margin: 4px 5px;
    padding: 3% 3%;
}
}
@media screen and (min-width: 768px){
.nav1 ul li{
    clear: both; 
    width: 100%;
    border-right: none;     
    border-bottom: 1px solid grey;      
}
.nav2 {     display: block; }
.navul{     display: none;  }

}
@media screen and (min-width: 600px) {
.startmenu,.itemhead{   font-size: 100%;}
.side-btn{
    font-size: 80%;
    margin: 4px 3%;
    padding: 3% 3%;
}
.itbody{ height: 340px; }
.custom{
    margin-top: 3px;        
    width: 100%; 
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.inqbasket{
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
}
.ifcol1{    width: 100%;    }
.ifcol2{    width: 100%;    }

}

css media query not working properly on google chrome

3 Answers3