media query conditional CSS has broken

I am new to WordPress CSS and need some advice! it seems teh media query CSS has broken on my custom stylesheet ( i have just taken over this site). I know I need to add resolution specific CSS media queries to adjust the logo size and/or menu position when iPads (similar resolution) devices are used. Currently the CSS includes this:

/* media changes */
@media (min-width: 0px) and (max-width: 640px) {
.navbar-header img {
width: 100px;
}
@media (min-width: 500px) and (max-width: 640px) {
.navbar-header img {
width: 130px;
}

I’ve tried playing round with these values but to no avail!

Any help much apprecaited.

The site is http://www.jordansmill.com

Thanks!