cant get media query to work - css

Question

I created a website that is mostly responsive, but it needed a little help when viewed on smaller screens. I tried to add an #media query to the css page, but it doesn't seem to be making any difference.
I only added different style rules in my main css page, and did not add anything to my html. I am confused on how media queries work exactly, so maybe that's my problem?
Here is my css
/*Alt styles for smaller screens*/
#media only screen and (max-width: 780px) {
div.price-area1 {
width: 100%;
text-align: center;
}
div.price-area2 {
width: 100%;
text-align: center;
}
div.price-area3 {
width: 100%;
}
input.submit {
width: 60%;
margin-left: 20%;
}
nav {
width: 100%;
}
nav ul li {
position: relative;
float: left;
width: 50%;
font-family: 'Poiret One', cursive;
margin-bottom: 15px;
text-align: center;
font-size: 24px;
}
}

Answer 1

The easiest way to understand media queries is to read about it here and here:
With that said, you may want to use a framework such as bootstrap which is a great way to start a site. Otherwise you can use this template for media queries:
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
/* Styles */
}
This is a good starting point if you want to do it all yourself.