Media Query, doesn't work on Mobile browsers and Chrome

Question

I'm having problems with the @media of my website in the CSS styles, currently when i test my webpage in fire fox everything works fine, even when scaled down to 450px (i think this is how far i can scale down before it stops). However when testing in Chrome, it seems that none of the media styles are being called when the screen is scaled down, onto of this it does not work on my android browser when testing it.

Could anyone tell me where i'm going wrong. the web url is (now.hidden-due to question answered) and i'll drop some of the code here from the css. Ignore the media widths i've been playing around with different things to try and get the page working.

Oh I've also tried using the -webkit-min-pixel-ration:0 but i dont quite understand how this works.

here is the CSS

@media (max-width: 555px) {
    .invisible2 { display:none; }
    .center-fold { left: 22%;                   
}

#page { margin-top: -130px;

}



.flex-direction-nav li a.prev {
    background-position: 0 0;
    left: -20px;
    display:none;
}

.flex-direction-nav li a.next {
    background-position: -52px 0;
    right: -21px;
    display:none;
}

nav li a {
        width: 50%;
        border-bottom: 1px solid #fff;
        font: 400 13px/1.4 Georgia, "Times New Roman", Times, serif;
        margin-bottom: 10px;
    }

nav small {

    display:none;

}

.pannels {   max-width:178px;           }

}

@media (max-width: 450px) {

        nav li a {
        width: 50%;
        font: 400 12px/1.4 Georgia, "Times New Roman", Times, serif;
        padding-top: 12px;
        padding-bottom: 12px;
        }

 #underline { margin-top: 33px;

}

.pannels {   max-width:178px;           }

    nav li:nth-child(even) a {
        border-right: none;
    }

    nav li:nth-child(5) a, nav li:nth-child(6) a {
        border-bottom: 1px solid #fff;
    }



    #content .gallery-columns-2 .gallery-item {
        width: 45%;
        padding-right: 4%;
    }
    #content .gallery-columns-2 .gallery-item img {
        width: 100%;
        height: auto;
    }
#tea-image { display:none; }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    body {
        padding: 0;
    }
    #page {
        margin-top: 0;
    }
    #branding {
        border-top: none;
    }


#tea-image { display:none; }



}

Answer 1

@media (max-width: 555px) {
    .invisible2 { display:none; }
    .center-fold { left: 22%;
}

You have lost the closing brace for the .center-fold rule.