asked on

Why does my media query not work?

Here's my css:

<style type="text/css">
	html, body {
		margin: 0px;
		padding:0px;
		font: 14px sans-serif;
		height:100%;
		background:#ffe39a;
		background: -webkit-linear-gradient(#eaad02, #ffe39a); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#eaad02, #ffe39a); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#eaad02, #ffe39a); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#eaad02, #ffe39a);
		min-height: 100%;  /* Fallback for vh unit */
		min-height: 100vh; 
	}

	h4 {
		margin: 10px 0;
		color: #1823a0;
	}
	
	.container {
		height:100%;
		display:flex;
		justify-content: center;
		align-items: center;
		flex-flow:column wrap;
		flex-direction:column;
	}
	
	.content {
		max-width:625px; 
		border:1px solid #7b5b01;
		-moz-border-radius: 14px 14px 14px 14px; 
		border-radius: 14px 14px 14px 14px; 
		box-shadow:7px 7px 10px #7b5b01;
		display:flex;
		justify-content: center;
		align-items: center;
		flex-flow:column wrap;
		flex-direction:column;
	}
	
	.form_label {
		display:inline-block; 
		text-align:left; 
		font-weight:bold;
	}
	
	.orange_row {
		background:#934e00;
		background: -webkit-linear-gradient(#934e00, #f26a00); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#934e00, #f26a00); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#934e00, #f26a00); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#934e00, #f26a00);
		border-radius: 0px 0px 14px 14px; 
		width: 100% !important;
	}
	
	.white_background {
		 margin:0 auto; 
		 background-color:#ffffff; 
		 box-shadow: 3px 3px 5px #7d7d7d inset;
		 padding:10px; 
		 border-radius:5pt;
	}
	
	table.olympic {
		border: 2px solid #ffffff;
	}
	
	table.olympic td {
		font-size:9pt;
		border: 2px solid #ffffff;
		text-align:center;
		font-weight:bold;
	}
	
	.watermark {
	position:absolute; 
	margin-left:80%; 
	margin-top:-50px;
	}
	
	/*here's where the responsive media queries begin */
	
	 @media only screen and (max-width: 800px) {
	 
		 html, body {
			margin: 0px;
			padding:0px;
			font: 14px sans-serif;
			height:100%;
			background-color:#ffe39a;
		}
	
		.container {
			height:auto;
			margin:auto;
		}
		
		.content {
			max-width:625px; 
			border:1px solid #7b5b01;
			-moz-border-radius: 14px 14px 14px 14px; 
			border-radius: 14px 14px 14px 14px; 
			box-shadow:7px 7px 10px #7b5b01;
			margin:auto;
		}
	
	}
	
	 @media only screen (min-device-width:375px) and (max-device-width:667px) {
	 
		  html, body {
				margin: 0px;
				padding:0px;
				font: 14px sans-serif;
				height:100%;
				background-color:#ffe39a;
			}
	 
		 .container {
				height:auto;
				margin:auto;
			}
			
			.content {
				max-width:625px; 
				border:1px solid #7b5b01;
				-moz-border-radius: 14px 14px 14px 14px; 
				border-radius: 14px 14px 14px 14px; 
				box-shadow:7px 7px 10px #7b5b01;
				margin:auto;
			}
	
	 }
	 
	  @media only screen and (max-width:430px) {
	  
			html, body {
				margin: 0px;
				padding:0px;
				font: 14px sans-serif;
				height:100%;
				background-color:#ffe39a;
			}
	 
		 .container {
				height:auto;
				margin:auto;
			}
			
			.content {
				max-width:625px; 
				border:1px solid #7b5b01;
				-moz-border-radius: 14px 14px 14px 14px; 
				border-radius: 14px 14px 14px 14px; 
				box-shadow:7px 7px 10px #7b5b01;
				margin:auto;
			}
	
	 }
	 
	  @media only screen and (max-width:429px) {
	  
			body {
				margin: 0px;
				padding:0px;
				font: 14px sans-serif;
				height:100%;
				background-color:#ffe39a;
			}
	 
		 .container {
				height:auto;
				margin:auto;
			}
			
			.content {
				max-width:625px; 
				border:1px solid #7b5b01;
				-moz-border-radius: 14px 14px 14px 14px; 
				border-radius: 14px 14px 14px 14px; 
				box-shadow:7px 7px 10px #7b5b01;
				margin:auto;
			}
	
	 }

</style>

Open in new window

When I look at my iphone6 ( @media only screen (min-device-width:375px) and (max-device-width:667px) {), I expect my background color to be a solid #ffe39a and instead it's the gradient defined at the top.

Why?

ASKER CERTIFIED SOLUTION

Robb Hill

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Bruce Gust

ASKER

Robb, I did what you suggested and was able to determine that I had my css files at the end of my media queries making them the last word on how things were being stylized. Once I changed the order of things, everything looked great!

Thanks so much!