@media Query not responding in chrome

So I'm trying to get this page to be responsive.. It works in firefox, and in chromes inspect tool, but regularly resizing chromes browser doesn't yield any results.

@media screen and (min-width:600px) {
#form {
    width:600px;
    grid-template-rows: 100%;
}
form {
    display:grid;
    grid-template-columns: 2fr 4fr;
    grid-template-rows: 20% 20% 20% 20% 20%;
}

body {background-color:red;}

}

@media screen and (max-width:599px) {
#form, label, input, select, textarea {
    width:100% !important;
    margin-bottom:0px;
}
form {
    display:block !important;
    }
span {
    height:40px;
    width:100%;
    display:inline-block;
}
body {background-color:blue;}

}

I have tried making sure its updating and setting colors to different media queries to see when they kick in, it never goes blue in chrome except in responsive mode.