Currently I'm styling with media queries, when using chrome's inspect to look at different devices, my queries seem fine everything styles the way I expect it to, when I resize the browser however the media queries don't seem to do much

http://gotsocial.co.uk/gotsocial/index.php

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
 margin:0;
 padding:0;
 border:0;
 outline:0;
 font-size:100%;
 vertical-align:baseline;
 background:transparent;
  font-family:Verdana,Geneva,sans-serif;
}

input[type=submit]{
				background-color:#008000;
             }

a{
	text-decoration:none;
	color:black;
}

.navBar{
	background-color:#FFFFFF; 
}

ul{
	list-style-type:none;
}

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 2.0vh;
}
p {
  font-size: 3vmin;
}

*:focus {
    outline: none;
}

.text-center{
	text-align:center;
}

.deskTopcontrols{
	overflow:hidden;
}

.newUser a{
	color:blue;
	text-decoration:none;
}

.mainBody{
	background-color:#FFFFFF;
	overflow:hidden;
	min-height:50%;
}

.localarea:hover{
		cursor:pointer;
	}

.advanced:hover{
	cursor:pointer;
}

.advanced-search{
	display:none;
}	

.advanced-search h2{
	text-align:center;
	margin-top:1%;
}


input, textarea {
    border: 5px solid white; 
    -webkit-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    -moz-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    padding: 15px;
    background: rgba(255,255,255,0.5);
    margin: 0 0 10px 0;
}

.form-group select{
	 border: 5px solid white; 
    -webkit-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    -moz-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    padding: 15px;
    background: rgba(255,255,255,0.5);
    margin: 0 0 10px 0;
} 

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){

.localarea{
	width:50%;
	float:left;
	text-align:center;
}

.local h2{
text-align:center;
margin-top:1%;
}

.advanced{
	width:50%;
	float:left;
	text-align:center;
}
.index-background{
	width:100%;
}

.index-background img{
	width:100%;
}

.form-group input{
width:80%;
margin:10px;
}

.loginControls{
	display:none;
}


.form-group-index{
	width:100%;
	margin:10px;
}

.form-group textarea{ 
	 width:80%;
	 height:20%;
	 resize: none;
	 outline: none;
	 margin:10px;
}

.contactSelect{
	width:100%;
}

.form-group input[type=submit]{
	margin:20px;
	background-color:#008000;
	width:30%;
}

.form-group select{
	width:90%;
	margin:10px;
}

.getPassword{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	margin:5%;
}

}


/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){

.index-background{
	width:100%;
}

.index-background img{
	width:100%;
}

.form-group input{
width:80%;
margin:10px;
}

.loginControls{
	display:none;
}


.form-group-index{
	width:100%;
	margin:10px;
}

.form-group textarea{ 
	 width:80%;
	 height:20%;
	 resize: none;
	 outline: none;
	 margin:10px;
}

.contactSelect{
	width:100%;
}

.form-group input[type=submit]{
	margin:20px;
	background-color:#008000;
	width:30%;
}

.form-group select{
	width:90%;
	margin:10px;
}

.form-group-forgot input{
	width:100%;
}

}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  @media screen and (min-device-width: 768px) and (max-device-width: 1024px){

.index-background{
	width:100%;
}

.index-background img{
	width:100%;
}

.form-group input{
width:80%;
margin:10px;
}

.loginControls{
	display:none;
}


.form-group-index{
	width:100%;
	margin:10px;
}

.form-group textarea{ 
	 width:80%;
	 height:20%;
	 resize: none;
	 outline: none;
	 margin:10px;
}

.contactSelect{
	width:100%;
}

.form-group input[type=submit]{
	margin:20px;
	background-color:#008000;
	width:30%;
}

.form-group select{
	width:90%;
	margin:10px;
}

}
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
 @media screen and (min-device-width: 768px) and (max-device-width: 1024px){
 	.index-background{
		width:100%;
	}
	.local h2{
	text-align:center;
	margin-top:1%;
}
	.index-background img{
		width:100%;
	}

.form-group input{
width:80%;
margin:10px;
}

.loginControls{
	display:none;
}


.form-group-index{
	width:100%;
	margin:10px;
}

.form-group textarea{ 
	 width:80%;
	 height:20%;
	 resize: none;
	 outline: none;
	 margin:10px;
}

.contactSelect{
	width:100%;
}

.form-group input[type=submit]{
	margin:20px;
	background-color:#008000;
	width:30%;
}

.form-group select{
	width:90%;
	margin:10px;
}

}
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){

.locations{
	width:100%;
}
.index-background{
	width:100%;
}

.local h2{
text-align:center;
margin-top:1%;
}

.localarea{
	width:50%;
	float:left;
}

.advanced{
	width:50%;
	float:left;
}
.index-background img{
	width:100%;
}

.form-group input{
width:95%;
margin:10px;
}

.contactUs-center{
	width:80%;
	margin-left:auto;
	margin-right:auto;
}

.loginControls{
	display:none;
}


.form-group-index{
	width:100%;
	margin:10px;
}

.form-group textarea{ 
	 width:80%;
	 height:20%;
	 resize: none;
	 outline: none;
	 margin:10px;
}

.contactSelect{
	width:100%;
}

.form-group input[type=submit]{
	margin:20px;
	background-color:#008000;
	width:30%;
}

.form-group select{
	width:90%;
	margin:10px;
}

.localarea{
		width:50%;
		float:left;
		text-align:center;
	}

.advanced{
	width:50%;
	float:left;
	text-align:center;
}

.form-group-forgot{
width: 40%;
margin-left: auto;
margin-right: auto;
}

.form-group-forgot input{
	width:100%;
}

}

/* #### Desktops #### */
@media screen and (min-width: 1024px){

.logo{
	width:10%;
	float:left;
	padding:1%;
}

.reviews{
	width:35%;
	float:left;
	display:inline-block;
}

.reviews ul li{
	display:inline-block;
	margin:7px;
	padding:5px;
}
.loginMaster{
	float:right;
	width:50%;
}

.login{
	width:50%;
	float:left;
	margin:7px;
	padding:5px;
}

.loginControls{
	width:17%;
	height:auto;
	background-color:#FFFFFF;
	float:left;
	clear:left;
	display:none;
	 position: absolute;
	 overflow:auto;
	  z-index: 10;

	 margin:10px;
}

.loginControls div{
	margin:10px;
}


.loginControls div span{
	margin:10px;
}

.mainBody{
	margin-top:1%;
	width:90%;
	margin-left:auto;
	margin-right:auto;
	min-height:50%;
}

.locations{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	min-height:50%;
}
.localarea{
	width:50%;
	float:left;
	text-align:center;
}

.advanced{
	width:50%;
	float:left;
	text-align:center;
}
.advanced-search h2{
text-align:center;
margin-top:1%;
width:100%;
}

.local h2{
	text-align:center;
	margin-top:1%;
}

.index-background{
	width:24%;
	height:40%;
	margin:3px;
	display:inline-block;
	background-color:#FFFFFF;
}

.form-group-index input{
	width:90%;
}

.index-background img{
	width:100%;
	height:185px;
}	
.showLogin{
		width:10%;
		float:left;
		margin:7px;
		padding:5px;
		cursor:pointer;
	}

.center-form{
	margin-top:20px;
	width:90%;
	margin-left:auto;
	margin-right:auto;
	margin-top:1%;
}

.contactUs-center{
	width:50%;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
}
.form-group input{
	float:left;
	width:100%;
}

.form-group-index{
	width:28%;
	display:inline-block;
	margin:10px;
}

.form-group textarea{

 width:100%;
 height:20%;
 resize: none;
 outline: none;
}

.form-group select{
	 width:100%;
	 height:20%;
}

.center-form label{
	float:left;
	margin:8px;
	margin-top:17px;
}

input[type=submit]{
				background-color:#008000;
                 color: #fff;
				 cursor:pointer;
				 margin-left:1%;
				 outline: none;
             }

input[type=submit]:hover{
	background-color:#228B22;
}			 

input[type=checkbox]{
	width:30px;
	height:30px;
	border-radius: 25px;
}

.footer{
	background-color:#FFFFFF;
	position: absolute;
	bottom:0;
	width:100%;
	clear:both;
}

.contacting .form-group{
	float:left;
	width:50%;
}

.contacting label{
	float:left;
	margin:8px;
	margin-top:17px;
}

label[for="agree"] {
  cursor:pointer;
}

.getPassword{
	width:95%;
	margin-left:auto;
	margin-right:auto;
	margin:5%;
}

.form-group-forgot{
	width: 40%;
    margin-left: auto;
    margin-right: auto;
}

.form-group-forgot input{
	width:100%;
}
}

}

    I only scrolled through, but this jumped out at me:

    @media screen and (max-device-width: 640px){
  @media screen and (min-device-width: 768px) and (max-device-width: 1024px){

    So the rules specified within apply if the maximum device width is: (a) no more than 640px, and (b) no less than 768px.

      Write a Reply...