CSS Media Query Not Loading

Problem

I'm writing a static website and testing it locally. I have written a media query to change the layout a little bit so that it is much nicer to look at on a smartphone. With the media query my aim is to change the text and the profile photo from being side by side to being one followed by the other.

My issue is that when I load the HTML file on Chrome or Firefox and resize the window, the layout does not change and I cannot figure out how to fix it. Any help would be much appreciated. Find my code below.

For my standard CSS I have this (a small snippet):

#about-text {
    /*A div containing paragraphs and a table*/
    display: inline-block;
    width: 50%;
}

#profile-photo {
    /*An img tag after the closing about-text div*/
    border: 4px solid #1abc9c;
    display: inline;
    float: right;
    margin: 8% 0% 0% 0%;
    max-width: 40%;
}

And then I have a media query and the corresponding CSS:

@media (min-device-width : 320px) and (max-device-width : 480px) {

#about-text {
    /*A div containing paragraphs and a table*/
    display: block;
    width: 50%;
}

#profile-photo {
    /*An img tag after the closing about-text div*/
    border: 4px solid #1abc9c;
    display: block;
    float: right;
    margin: 8% 0% 0% 0%;
    max-width: 40%;
}
}
Problem courtesy of: Finn LeSueur

Solution

You are using min-device-width and max-device-width which only takes into the account the device's screen size. Use min-width and max-width and it will work in your browser when you resize.

Example:

.testDiv {
    color: green;
}

@media (min-width : 320px) and (max-width : 480px) {
    .testDiv {
       color: red;
   }
}

http://jsfiddle.net/ZUPD2/

Solution courtesy of: Sean Dawson

Discussion

Maybe because there is no closing bracket for the media query block ?

Discussion courtesy of: minychillo

This recipe can be found in it's original form on Stack Over Flow.