SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:

    HTML Code:
    <meta name="viewport" content="width=device-width;initial-scale=1.0" />
    Here is my media query:

    Code:
    @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}
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Scott,

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

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

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi Scott,

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

    Code:
    <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 :-)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •