Responsive CSS changes not updating when browser resized

Question

I'm working on an asp.net site and making it responsive, just using @media commands in the stylesheet.

Usually when I work on apache websites, e.g. wordpress as soon as I refresh the page, I can resize the brower to a mobile or tablet size and see the changes on a PC browser. But with this .net site the changes don't show.

They do show however on my actual mobile phone, but I don't want to have to keep previewing changes through my phone.

I've tried using an emulator like mobiletest.me but that doesn't display the changes either. I've tried using Firefox and Chrome, neither work. It seems the website isn't being fooled into thinking my browser is a mobile.

Anyone have an an idea on what this issue could be?

Thanks

UPDATE

Sorry code below:

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

#block1 {
    display:none;
}

Answer 1

An educated guess says that you are using a specific media query for devices, rather than resolution alone, which is why it's not responding when you resize the window.

Mobile devices: (what i suspect you have)

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

Based on Resolution: (what you require)

@media only screen 
and (min-width : 320px) {
    /* Styles */
}