http://www.kriesi.at/support/topic/fixed-left-sidebar-issue-on-iphone Support Forum - Topic: Left Sidebar Zoom Issue on Iphone (Fixed Positioning) en-US Fri, 24 May 2013 02:46:36 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/fixed-left-sidebar-issue-on-iphone#post-60975 Tue, 19 Jun 2012 17:43:46 +0000 Devin 60975@http://www.kriesi.at/support/ <p>I went ahead and flagged the topic for Kriesi to take a look at as well. I don't have the hardware to test fixes so I'm not as capable as contributing as I would like but the man himself should have some additional input :)</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/fixed-left-sidebar-issue-on-iphone#post-60786 Mon, 18 Jun 2012 18:33:44 +0000 fitzpatrick512 60786@http://www.kriesi.at/support/ <p>Unfortunately it's not a complete solution, since if the users zoom then scroll horizontally the menu/sidebar ends up on top of the content again. </p> <p>I think the media queries direction is the correct solution. I'll look into it and post here if I have any luck. </p> http://www.kriesi.at/support/topic/fixed-left-sidebar-issue-on-iphone#post-60637 Mon, 18 Jun 2012 03:19:06 +0000 Mya 60637@http://www.kriesi.at/support/ <p>Thanks for providing that solution fitzpatrick51!</p> <p>Regards,<br /> Mya </p> http://www.kriesi.at/support/topic/fixed-left-sidebar-issue-on-iphone#post-59690 Mon, 11 Jun 2012 10:22:58 +0000 fitzpatrick512 59690@http://www.kriesi.at/support/ <p>If you're having issues with content overlapping, I suggest setting a minimum width for the body element and then using the viewport meta to set the viewing width of your site:</p> <p>&lt;meta name="viewport" content="width=1020px, initial-scale=1, maximum-scale=3"&gt; </p> http://www.kriesi.at/support/topic/fixed-left-sidebar-issue-on-iphone#post-59439 Sat, 09 Jun 2012 03:49:22 +0000 Ismael 59439@http://www.kriesi.at/support/ <p>Hi,</p> <p>You need to create media queries to control different view port.</p> <p>This link might help. <a href="http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries" rel="nofollow">http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries</a></p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/fixed-left-sidebar-issue-on-iphone#post-58466 Fri, 01 Jun 2012 22:40:44 +0000 insomnia-inc 58466@http://www.kriesi.at/support/ <p>Just launched my site and I am having the same issue. This is for a restaurant and it's VERY important for the site to display correctly on an iPhone... Any updates on this? This is a major issue, my clients are going to kill me if I can't get this to work on a smart phone. </p> http://www.kriesi.at/support/topic/fixed-left-sidebar-issue-on-iphone#post-43561 Sun, 26 Feb 2012 22:19:35 +0000 thestruggler 43561@http://www.kriesi.at/support/ <p>I am having the same issue. during zoom when it is held normally the above happens during zoom. when you hold it sidewards its fine. </p> <p>any solutions??? </p> http://www.kriesi.at/support/topic/fixed-left-sidebar-issue-on-iphone#post-43504 Sat, 25 Feb 2012 20:19:07 +0000 Glassface 43504@http://www.kriesi.at/support/ <p>When I initially set up my site, I had no problems with the left sidebar. It remained fixed when scrolling - however, at one point it became no longer fixed and would stay at the top of the page when I scrolled. I changed some of the css and got it working again. On iPhone, however, it remains fixed, and the same size when I try to zoom in. I need people to be able to zoom into the page to read posts, as the text is quite small.</p> <p>I tried setting the sidebar to z-index:-1, as a temporary fix - the sidebar went behind the post content, but then I wasn't able to click any of the links on the sidebar. I'm wondering if it is possible to make it so that the sidebar remains fixed when scrolled on computer/iphone, but zooms proportionally when zoomed on iphone?</p> <p>The css for my sidebar is:</p> <blockquote><p> .sidebar {<br /> margin: 0;<br /> position: fixed;<br /> padding:50px 0 0 0;<br /> width:220px;<br /> height:100%;<br /> left:50px;<br /> top:0;<br /> }</p> <p>.sidebar.sidebar_absolute{<br /> left:0;<br /> position: absolute;<br /> top: -30px;</p> <p>}</p> </blockquote> <p>My website is at <a href="http://brainbandits.com" rel="nofollow">http://brainbandits.com</a> - here's an example of what happens when I zoom into the page on my iPhone <img src="http://brainbandits.com/wp-content/uploads/2012/02/photo-1.png" /> </p>