iPhone 4 - Zoom issue « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Coalition

iPhone 4 - Zoom issue

8 posts from 6 voices

Started 1 year ago by perfectday
Latest reply from Kriesi
This topic is closed
This topic is resolved

Tags:

perfectday
Member

Hi,

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:

Thanks,
Duncan

Posted 1 year ago #
Drew
Member

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: http://stackoverflow.com/questions/4889601/css-position-fixed-into-ipad-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.

Thanks,
- Drew

Posted 1 year ago #
Woekan
Member

Hello,

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.

Posted 1 year ago #
Devin
Moderator

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

Regards,

Devin

Posted 1 year ago #
Kriesi
Key Master

Hey!

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,
Kriesi

Posted 11 months ago #
Woekan
Member

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: http://www.janloos.nl

Posted 10 months ago #
Ismael
Moderator

Hello Woekan,

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

Regards,
Ismael

Posted 10 months ago #
Kriesi
Key Master

Hi!

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,
Kriesi

Posted 9 months ago #