Question

I have a very complex issue, which although i doubt anyone will know the answer to, i thought i’d give it a shot as you’re a clever bunch of people.

Over on my website (link below) i have a problem where, when viewed in a mobile browser or when a normal web-browser is made smaller, for example on an iPhone, the pages have to be scrolled to be fully viewed. However, when the “Tour” page is viewed in a mobile browser, it displays without a scroll.

When the #tabs div is removed from the Tour page, the display has a scroll on iDevices – which is very weird – when the #tabs div is there, no scrolling. ALL pages on the site, excluding the “Tour” page have this scrolling issue on iDevices and on Firefox when the browser is made smaller.

I basically don’t want users to have to scroll at all when they’re viewing on smaller resolution screens.

The theme i’ve created is a child theme of twentyeleven on WordPress.

Homepage
Tour page

Thanks in advance,
Nick.

Answer 1

You have a fundamental problem with the site’s design scheme right now. Next time you should really keep this in mind as you are creating/editing the template you downloaded.

For mobile and tablet users you need to pick 1 of 3 options:

1. Create an alternative mobile version of your website, or
2. Design the page how it should actually be done: using % or EM for a ‘liquid design’ (meaning the site and content appropriately adjusts according to content)
3. Use a CSS hack such as “display” or “overflow” none

Number 2 is definitely your best option here. If you’re getting horizontal scroll bars you need to check your widths, paddings, margins, etc and make sure nothing equals < 100%. Also consider what content is being added and modified as the page naturally progresses, that is probably your issue. (as you mentioned above, the “tour page” varies dependent upon #tabs

Liquid Layouts:
http://www.maxdesign.com.au/articles/liquid/

Jquery Mobile:
http://jquerymobile.com/