My responsive design refolds nicely on desktop, falls apart on iPhone

[Scott Blanchard]

http://canvas.clickbump.com/

It refolds exactly like I want on desktop browsers (when the window is resized down to min). However, when I view it on the iPhone, its as if everything is left justified and the sidebar area is not being cleared.

What could it be?

I'm using a viewport meta tag as follows:

<meta name="viewport" content="width=device-width;initial-scale=1.0" />

Here is my media query:

@media only screen and (max-width:850px) {
	body{padding:0;margin:0}
	.tagline,.pre-footer .social {display:none}
	.wrapper {margin:0;padding:0;box-shadow:none !important;border:0!important;border-radius:0 !important}
	.header .logo{display:block !important;margin:0 auto;text-align:center;max-width:100% !important}
	.content,.sidebar{float:none;width:100%;max-width:95%;min-height:0}
	header[role=banner]{padding-top:10px}
	.header {background:none;height:auto !important;text-align:center;border:none;box-shadow:none;}
	.siteTitle,tagline{position:relative;left:0 !important;bottom:auto;padding:1%}
	.siteTitle a, .tagline{font-size:1em !important}
	.siteTitle a {min-height:0;text-indent:0;white-space:normal;display:inline;line-height:0;}
	.main,.footer,.footer ul,.footer .copyright {text-align:center}
	.footer ul li {display:block;}
	.footer li a {border:none;}
	.content img, .sidebar img {float:none;}
	.adsense336,.adsense250{float:none;margin:0 !important;max-width:100% !important;overflow:hidden}
	.clickbump_slider{margin:0 3%}
	.clickbump_slider .callout {width:100%;max-width:100%;border-radius:0;margin:0 !important;padding:10% 0 0 0 !important}
	.clickbump_slider.alt {padding:2% 2% 0 3%;margin:0 auto;max-width:85%}
	#respond textarea {width:90%}
	.menu.nav,.menu.top{position:relative;margin:0;padding:0;text-align:center !important;}
	.menu.nav ul {float:none !important;display:inline-block;text-align:left !important;}
	.menu.top{height:15px;bottom:auto;display:none}
	.menu.nav li a{padding:3px 6px !important}
	.menu.nav {border:0 !important}
	.menu.nav ul li.current-menu-item,.menu.nav ul li.current-menu-parent{border:1px solid #ccc;}
	.menu.nav ul.sub-menu {max-width:auto; border-radius:0; padding:5px;}
	.menu.nav ul ul {box-shadow:none;-moz-box-shadow:none}
	.menu.nav ul ul li {min-width:100px;max-width:150px;}
	.pre-footer {display:none}
	.footer ul {text-align:center !important}
	.sidebar ul li {background-position:-20px}
	.ce4-share iframe{max-width:100px !important;}
	.clickbump_slider{width:100% !important;}
	.slideAdv.prev{left:0px !important;display:block;}
	.slideAdv.next{right:0px !important;display:block;}
	.slideAdv{opacity:.25!important;}
	.sidebar{padding:0}
}

[Paul O'B]

Hi Scott,

Shouldn't it be this with a comma and not a semi-colon.

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

[Scott Blanchard]

Hi Scott,

Shouldn't it be this with a comma and not a semi-colon.

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Yep! That was it. That little semi-colon was tripping up Safari iPhone. Interestingly, this site uses the same tag but has a space after the semi-colon, and it works fine.

Thanks a bunch Paul. I've been troubleshooting my media query for several hours :-)