My media queries are not working and I can't figure out why...

I've got an iPhone 6. I'm using this website as a resource: http://stephen.io/mediaqueries/#iPhone

This is the website I'm working on: http://loosecannonfitness.com/mobile/

Here's my stylesheet:

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape)
{
	body {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 12px;
color: #000000;
vertical-align: top;
padding: 0px;
height: 100%;
width:100%;
background-color:#000000;
}

.body_container {
	 width:430px;
	 height:auto;
	 margin:auto;
	background-color:#ffffff;	 
}

.key {
	background-image:url(../images/exercise_key_mobile_375.jpg);	
	width:300px;
	height:121px;
	margin-bottom:10px;	
	margin-top:-15px;
	margin-left:37px;
	float:left;
}

.title_text {
	font-size:14px;
	font-weight:bold;
}

.iButton {
	display: block;
	width: 72px;
	height: 17px;
	background: url(../images/iButton.png) no-repeat;
	margin-top: 6px;
	cursor: pointer;
	position:absolute;
	margin-left:343px;
}

.altMenu {
	position: absolute;
	display: none;
	top: 168px;
	padding-bottom:8px;
	font-size: 12px;
	width: 200px;
	padding-top: 6px;
	padding-left:0;
	margin-left: 218px;
	border-radius: 5px;
	z-index: 99999999;
	background-color:#282828;
}

.top_graphics {
height:142px;
width:430px;
margin:auto;
text-align:center;
background-image:url(../images/header_430.jpg);
background-repeat:no-repeat;
}

.scroll_bar {
	width:430px;
	height:31px;
	background-image:url(../images/scroll_bar_430.jpg);
	background-repeat:no-repeat;
}

.logo {
	width:141px;
	height:141px;
	position:absolute;
	margin-left:25px;
	margin-top:8px;
	background-image:url(../images/logo_430.png);
	background-repeat:no-repeat;
}

.facebook_icon {
	width:32px;
	height:32px;
	position:absolute;
	margin-left:650px;
	margin-top:166px;
}

.shopping_icon {
	width:32px;
	height:32px;
	position:absolute;
	margin-left:695px;
	margin-top:166px;
}

.blog_icon {
	width:32px;
	height:32px;
	position:absolute;
	margin-left:738px;
	margin-top:166px;
}

.scroll_caps {
	margin-left:auto;
	margin-right:auto;
	width:368px;
	height:27px;
	padding-top:2px;
}

.body_filler {
	width:430px;
	min-height:100px;
	height:auto;
	background-image:url(../images/body_filler_430.jpg);
	background-repeat:repeat-y;	
}

.title_graphic {
	margin-left:23px;
	width:384px;
	height:243px;
	background-image:url(../images/title_graphic_430.jpg);
	background-repeat:no-repeat;	
}

.title_burpees {
	width:85px; 
	height:15px; 
	position:absolute; 
	margin-left:265px; 
	margin-top:100px;
}

.title_buy_now {
	width:75px; 
	height:20px; 
	position:absolute; 
	margin-left:138px; 
	margin-top:204px;
}

.title_learn_more {
	width:75px; 
	height:20px; 
	position:absolute; 
	margin-left:43px; 
	margin-top:204px;
}

.testimonial_sign {
	width:379px;
	height:30px;
	background-image:url(../images/testimonials_430.jpg);
	background-repeat:no-repeat;
	margin-left:25px;
	position:relative;
	z-index:10;
}

.testimonial_text {
	margin-left:30px; 
	margin-top:-25px;
}

table.title_testimonials {
	width:360px;	
}

td.white_text {
	color:#ffffff;
}

.actual_text {
	width:375px;
	margin:auto;
	height:auto;
}

table.workouts {
	width:370px;
	margin:auto;
	border:1px solid #cccccc;
}

.shield {
	height:70px;	
}

img.guns {
float:left;
width:350px;
margin-left:10px;
margin-bottom:10px;
}

.calendar_container {
	margin:auto;
	width:350px;	
	text-align:center;
}

.calendar {
	width:350px;	
	text-align:center;
	margin:auto;
}

.callout {
	width:50%; 
	height: auto; 
	padding: 10px; 
	background-color: #ffffff; 
	border: solid #cccccc 1px; 
	box-shadow: 5px 5px 10px #cccccc; 
	float:left;
}

.hammons {
	width:150px;
	float:left;
	margin-right:10px;	
	margin-bottom:10px;
}

.hammons_warning {
	background-color:red; 
	width:320px; 
	height:40px; 
	color:#ffffff; 
	margin:auto;
	text-align:center; 
	padding-top:5px;
	padding-bottom:10px;
}

.iphone {
	width:152px;
	margin:3px;
	float:right;
	margin-top:25px;
}

.conclusion {
margin-top:7px;
width:340x;
height:auto;
padding:10px;
border: solid #cccccc 1px;
color:#000000;
box-shadow: 5px 5px 10px #cccccc;
border-radius: 15px;
}

input.email_address {
	width:200px;
}

.submit_button {
	width:100px;	
}

.footer {
	width:430px;
	height:51px;
	background-image:url(../images/footer_430.jpg);
	background-repeat:no-repeat;
}

.footer_text {
	background-color:#000000;
	color:#ffffff;
	width:430px;
	height:auto;
	margin:auto;
	font-size:9pt;
	text-align:center;
	padding-left:5px;
	padding-right:5px;
}

A.footer_link {
	color:#ffffff;
	text-decoration:none;
	font-size:9pt;
}

.about_graphic {
width:150px; 
margin:3px; 
float:left;
}

.about_container {
	float:left; 
	margin-left:1px; 
	margin-top:-4px;
}
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) {


	body {
	font-family: Helvetica, Microsoft Sans Serif;
	font-size: 12px;
	color: #000000;
	vertical-align: top;
	padding: 0px;
	height: 100%;
	width:100%;
	background-color:#000000;
	}
	
	.iButton {
	display: block;
	width: 72px;
	height: 17px;
	background: url(../images/iButton.png) no-repeat;
	margin-top: 6px;
	cursor: pointer;
	position:absolute;
	margin-left:226px;
}

.altMenu {
	position: absolute;
	display: none;
	top: 148px;
	padding-bottom:8px;
	font-size: 11px;
	width: 150px;
	padding-top: 6px;
	padding-left:0;
	margin-left: 151px;
	border-radius: 5px;
	z-index: 99999999;
	background-color:#282828;
}

	.body_container {
		 width:320px;
		 height:auto;
		 margin:auto;
		background-color:#ffffff;	 
	}

	.top_graphics {
	height:121px;
	width:320px;
	margin:auto;
	text-align:center;
	background-image:url(../images/header_320.jpg);
	background-repeat:no-repeat;
	}

	.scroll_bar {
		width:320px;
		height:31px;
		background-image:url(../images/scroll_bar_320.jpg);
		background-repeat:no-repeat;
	}

	.logo {
		width:107px;
		height:107px;
		position:absolute;
		margin-left:25px;
		margin-top:17px;
		background-image:url(../images/logo_320.png);
		background-repeat:no-repeat;
	}

	.facebook_icon {
		width:20px;
		height:20px;
		position:absolute;
		margin-left:225px;
		margin-top:97px;
	}

	.shopping_icon {
		width:20px;
		height:20px;
		position:absolute;
		margin-left:253px;
		margin-top:97px;
	}

	.blog_icon {
		width:20px;
		height:20px;
		position:absolute;
		margin-left:280px;
		margin-top:97px;
	}

	.scroll_caps {
		margin-left:auto;
		margin-right:auto;
		width:257px;
		height:27px;
		padding-top:2px;
	}

	.body_filler {
		width:320px;
		min-height:100px;
		height:auto;
		background-image:url(../images/body_filler_320.jpg);
		background-repeat:repeat-y;	
	}

	.title_graphic {
		margin-left:25px;
		width:269px;
		height:305px;
		background-image:url(../images/title_graphic_320.jpg);
		background-repeat:no-repeat;	
	}

	.title_burpees {
		width:125px; 
		height:15px; 
		position:absolute; 
		margin-left:12px; 
		margin-top:128px;
	}

	.title_buy_now {
		width:80px; 
		height:20px; 
		position:absolute; 
		margin-left:165px; 
		margin-top:222px;
	}

	.title_learn_more {
		width:85px; 
		height:20px; 
		position:absolute; 
		margin-left:165px; 
		margin-top:252px;
	}

	.testimonial_sign {
		width:267px;
		height:22px;
		background-image:url(../images/testimonials_320.jpg);
		background-repeat:no-repeat;
		margin-left:26px;
		position:relative;
		z-index:10;
	}

	.testimonial_text {
		margin-left:25px; 
		margin-top:-25px;
	}

	table.title_testimonials {
		width:270px;	
	}

	td.white_text {
		color:#ffffff;
	}

	.actual_text {
		width:265px;
		margin:auto;
		height:auto;
	}

	table.workouts {
		width:260px;
		margin:auto;
		border:1px solid #cccccc;
	}

	.shield {
		height:35px;	
	}

	.guns {
		margin-left:5px;
		width:250px;
		margin-bottom:10px;
	}

	.calendar_container {
		margin:auto;
		width:250px;	
		text-align:center;
	}

	.calendar {
		width:250px;	
		text-align:center;
		margin:auto;
	}

	.callout {
		width:50%; 
		height: auto; 
		padding: 10px; 
		background-color: #ffffff; 
		border: solid #cccccc 1px; 
		box-shadow: 5px 5px 10px #cccccc; 
		float:left;
	}

	.hammons {
		width:65px;
		float:left;
		margin-right:10px;	
		margin-bottom:10px;
	}

	.hammons_warning {
		background-color:red; 
		width:250px; 
		height:40px; 
		color:#ffffff; 
		margin:auto;
		text-align:center; 
		padding-top:5px;
		padding-bottom:10px;
	}

	.iphone {
		width:75px;
		margin:3px;
		float:right;
		margin-top:25px;
	}

	.conclusion {
	margin-top:7px;
	width:238px;
	height:auto;
	padding:10px;
	border: solid #cccccc 1px;
	color:#000000;
	box-shadow: 5px 5px 10px #cccccc;
	border-radius: 15px;
	}

	input.email_address {
		width:125px;
	}

	.submit_button {
		width:100px;	
	}

	.footer {
		width:320px;
		height:38px;
		background-image:url(../images/footer_320.jpg);
		background-repeat:no-repeat;
	}

	.footer_text {
		background-color:#000000;
		color:#ffffff;
		width:320px;
		height:auto;
		margin:auto;
		font-size:9pt;
		text-align:center;
		padding-left:5px;
		padding-right:5px;
	}

	A.footer_link {
		color:#ffffff;
		text-decoration:none;
		font-size:9pt;
	}

	.about_graphic {
	width:150px; 
	margin:3px; 
	float:left;
	}

	.about_container {
		float:left; 
		margin-left:1px; 
		margin-top:-4px;
	}
	
	.key {
	background-image:url(../images/exercise_key_mobile_375.jpg);	
	width:300px;
	height:121px;
	margin-bottom:10px;	
	margin-top:-15px;
	margin-left:37px;
}
}

Open in new window


I'm going nuts in that there's no difference between landscape and portrait. At the very least there should be a difference in the size of my header graphic.

Can anyone tell me what I'm missing?
Bruce GustPHP DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mikkel SandbergWeb DeveloperCommented:
Hi brucegust,
I don't think there is necessarily anything wrong with the media queries. If you view the page in Chrome, open the dev tools and look at the responsive view, it should display properly for the iPhone 6 setting.
Just resizing your browser does not show the proper view, because it also needs to spoof the user agent.
I was able to get it to display properly following the above steps. Let me know if that doesn't work or you have any other questions.
Bruce GustPHP DeveloperAuthor Commented:
Hey, Mikkel!

My dilemma is that on my phone it looks like this for portrait:

portrait
...and this for landscape:

landscape
I'm glad to hear that I'm not totally off base with my code, but the fact that there's no difference in my page when the orientation of my phone changes has me baffled.

What am I missing?
Bruce GustPHP DeveloperAuthor Commented:
I just realized that the code does work! That's a different graphic, but can you tell me this: Why does it not fill the screen? I'm thinking that the graphic is 430px across and the screen is 637. The page should be centered and it should fill the phone's browser window far more substantially than it does.

Can you tell me where I'm blowing it?
Mikkel SandbergWeb DeveloperCommented:
I'm not sure if this will completely fix all the problems, but you can add overflow-x: hidden to the .body_container class in the landscape css. At least this way it will get rid of that horizontal scroll.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bruce GustPHP DeveloperAuthor Commented:
Mikkel!

I figured it out! The reason my page wasn't changing in size the way that I thought it should is because I had a <div> that I was using as a link that was positioned over my Facebook icon. It was misplaced several hundred pixels to the left, hence the bizarre looking rendering.

Thanks for your help!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.