Media queries not working in Chrome but in Firefox?

Question

The site I'm currently working on isn't picking up my styling for devices under 480px in chrome but is working in firefox, chrome is picking up the media queries for 800px and 1200px and I cannot for the life of me figure out why it isn't picking up the 480px media query.

Please see the stylesheet below.

@media screen and (max-width:1200px) { 

.ui-tabs .tab {
    clear:both; 
    height:386px; 
    width:550px; 
    margin:0 auto;
}

.ui-tabs .groundFloor {
    background:url(img/groundFloor_550.jpg) top center;
}

.ui-tabs .firstFloor {
    background:url(img/firstFloor_550.jpg) top center;
}

.ui-tabs .secondFloor {
    background:url(img/secondFloor_550.jpg) top center;
}

}


@media screen and (max-width:800px) {

#slide1 h1.logo {
    width:350px;
}

.mainnav {display:none;}
.navMobile {display:block;}

.navMobile {
    height:auto;
}

.navMobile .menuBox {
    height:auto;
    min-height:40px;
    width:100%;
    display:inline-block;
    position:fixed;
    top:0;
    left:0;
    right:0;
    background:#fff;
    z-index:99999;
}

.navMobile .menuBox ul {
    display:block;
    clear:both;
    height:auto;
    width:100%;
    padding:0;
    margin:0;
    border-top:1px solid #eee;
    font-family: "proxima-nova";
}

.navMobile .menuBox ul>li {
    display:block;
    clear:both;
    padding:10px 0;
    text-align:center;
    border-bottom:1px solid #eee;
}

.navMobile .menuBox ul>li a {
    padding:0;
    margin:0;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color:#ccc;
    font-size: 0.9em;
    font-weight:500;
    opacity: 1;
}

.navMobile .menuBox ul>li a:hover,.mainnav ul>li a:focus {
    text-decoration: none;
}

.navMobile .menuBox ul>li:last-child a {
    margin-right: 0;
    padding-right: 0;
}

.navMobileBtn {
    clear:both; 
    height:40px;
    width:40px;
}

.button {
    margin-left: -37px;
}

.home-block {
    width:100%;
    margin-right:0;
}

.caption {
    font-size: 1.6em;
}

.building .area .colLarge {
    float: none;
    clear: both;
    width: 100%;
    padding:0;
    padding-top: 2%;
}

.building .area .colSmall {
    float: none;
    clear:both;
    width:100%;
    padding:0;
    padding-top: 2%;    
}

.building .area .divide .divideLeft {
    float: none;
    clear:both;
    width: 100%;
    padding:0;
    padding-top: 4%;
}

.building .area .divide .divideRight {
    float: none;
    clear:both;
    width: 100%;
    padding:0;
    padding-top: 4%;
}

.ui-tabs ul li {
    font-size:1.2em; 
}

.formBox {
    display:inline-block;
    float:none;
    clear:both;
    height:auto;
    width:100%;
    margin:0;
}

.formBox .title {
    float:left;
    margin-right:4%;
    width:100%; 
}

.formBox .firstName {
    float:left;
    margin-right:4%;
    width:100%;
}

.formBox .surname {
    float:left;
    width:100%;
}

.formBox .email {
    float:left;
    margin-right:4%;
    width:100%;
}

.formBox .number {
    float:left;
    width:100%;
}

.formBox .businessType {
    float:left;
    margin-right:4%;
    width:100%;
}

.formBox .businessType input[type=text] {
    padding-left:2%;
    width:100%;
}

.formBox .unit {
    float:left;
    width:100%;
}

.formBox .additionalInfo {
    float:left;
    width:100%;
}

.formBox .additionalInfo input[type=text] {
    padding-left:1%;
    width:100%;
}

.formBox input[type=text] {
    display:block;
    width:97%;
    height:30px;
    padding-left:3%;
    border:0;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px; /* border radius */
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; /* prevents bg color from leaking outside the border */
    background-color: #ebebeb; /* layer fill content */
    font-size:0.8em;
    color:#797886;
}

.formTop {
    display:inline-block;
    float:none;
    clear:both;
    height:auto;
    width:100%;
    margin:0;
}

.formSubmit {
    float: none;
    clear:both;
    width: 90%;
    margin: 30px auto;
}

form.mobileForm {
    display:block;
}

form.mainForm {
    display:none;
}

@media screen and (max-width: 480px) {

#slide1 h1.logo {
    width:250px;
}

.ui-tabs ul li {
    font-size:0.8em; 
    font-weight:100;
}

.ui-tabs .tab {
    clear:both; 
    height:211px; 
    width:300px; 
    margin:0 auto;
}

.ui-tabs .groundFloor {
    background:url(img/groundFloor_300.jpg) top center;
}

.ui-tabs .firstFloor {
    background:url(img/firstFloor_300.jpg) top center;
}

.ui-tabs .secondFloor {
    background:url(img/secondFloor_300.jpg) top center;
}

}

Another potential issue (which I just ran into) is that Chrome treats `max-device-width` differently from `max-width` (which should be pretty obvious, but is easy to miss). Make sure you're using the right one if you copy/paste the media query code from another project :-) — Topher Fangio, Oct 23 '15 at 17:04
And another issue that I ran into myself: In desktop browsers, there's a slight difference between Firefox and Chrome in the amount of space that the top area (url bar, bookmarks, etc) occupies, leaving a slightly different effective height. At certain resolutions, media queries that rely on a specific height value might go over the threshold for one browser but not the other. The solution is to relax the height parameter in the media query until it fires in both. — Mahn, Jan 13 '19 at 19:00

score 8 · Accepted Answer · answered Feb 26 '13 at 17:28

8

You've got some bad nesting going on, or incorrect braces. If I remove the actual styles, it looks like this:

@media screen and (max-width:1200px) { 

}

@media screen and (max-width:800px) {

/* Missing } brace here */

@media screen and (max-width: 480px) {

}

Firefox is probably just handling the error differently. Take care of that and you should be good to go.

answered Feb 26 '13 at 17:28

Wesley Murch

101,186
37
194
228

3

Actually, CSS3 allows `@media` to be nested, [which currently only Firefox implements](http://stackoverflow.com/questions/11746581/nesting-media-rules-in-css/11747166#11747166), causing it to render properly - I'm guessing it's filling in the `}` at the very end of the stylesheet per [this section of CSS2.1](http://www.w3.org/TR/CSS21/syndata.html#parsing-errors). That said, the OP certainly didn't intend to nest one rule in another, so this is the right answer. – BoltClock Feb 26 '13 at 17:34
Thanks, not sure how I missed that! Thanks so much for your time on this! – dennisterrey Feb 26 '13 at 17:35
4

Recently I run into a related media query problem that Chrome Dev Tools wasn't responsive correctly, and it was fixed with this meta tag: ``. Hope this help too. – whatacold Feb 06 '17 at 16:00
@whatacold I had that tag exactly like that, but another one was placed later through a template invocation and was overriding it ([details](https://stackoverflow.com/a/49131097/6225838))... So before wasting time checking braces-nesting in a huge CSS, look for all meta-viewport tags first. – CPHPython Mar 06 '18 at 12:47

score 2 · Answer 2 · answered Feb 26 '13 at 17:30

2

Try this:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

Source >>

answered Feb 26 '13 at 17:30

chriz

1,580
19
27

Thanks for your time on this, the above answer helped me out! – dennisterrey Feb 26 '13 at 17:38
No problem! I did't notice the missing bracket but I thought Id show you the article as it may be useful in the future! – chriz Feb 26 '13 at 17:42
i face this problem and solved by adding media query bottom of style script. adding top of style media query not worked for me like eg: – lava Feb 08 '21 at 17:37

Media queries not working in Chrome but in Firefox?

2 Answers2

Linked