Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #11938


    First of all, I really like this theme.

    One issue I’ve noticed on on iPhone 4 (and this may be true for all mobile devices): when you zoom in, the navigation sidebar and content div overlap each other unpleasantly. Also, when you scroll over to the right part of the screen, the content div hides the sidebar.

    I guess this has something to do with the position tags? Could you suggest a fix?

    Here’s a screenshot of this occurring on the demo site:




    I’m also interested in a fix for this. I researched it a bit and came across this post discussing iOS’s handling of position:fixed elements, but frankly I’m not experienced enough to completely understand their solutions: (Purchase code hidden if logged out) -iphone

    If mobile browsers are at fault here, could the theme automatically switch the sidebar to position:static (just like it does when the widget area exceeds the screen height) whenever it’s viewed on an iOS/Android device? It’s not the perfect solution, but at least it would make the site readable on smartphones.


    – Drew



    I’m also interested in a fix. I love the fact that the website is one page and scrollable. This makes it very easy to navigate on phones and tablets.


    Hi All,

    The issue has been flagged for Kriesi to take a look at. We’ll have an update for a fix (if possible) or just a general update on the issue as soon as possible :)





    I will investigate the issue and see if I can come up with a fix for the next version that will be released within the next week. Thanks for the links and suggestions!

    Best regards,



    I have a workaround till the problem is fixed. I’m not that great with javascript or php or anything but ill eplain the thing i did:

    – In avia.js after the tag: set_sidebar = function() – i removed the position css

    – In my stylesheet style.css: i added a css line specificly for the phone browser:

    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { .sidebar {position:relative !important;}}

    This makes the sidebar stick to the top and side on the phone browsers smaller 320px to 480px. Now the sidebar won’t overlap the content.

    It aint a pretty fix, but its better than the overlapping sidebar.

    You can check out if it works at:


    Hello Woekan,

    Thanks for the fix. Please hold on for further updates.





    Hey! actually the latest version of the theme should have fixed the problem already… (probably not on the livd demo since I wasnt able to upate it yet, but the downloaded files should be iPone4 ready :))

    Best regards,


Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘iPhone 4 – Zoom issue’ is closed to new replies.