Question

I am trying to make my design mobile friendly. What I have is that everything fits nicely when I look at the design on http://ipadpeek.com/ (Great Tool!) although when I actually view it through my iPhone 4 the content only takes up around 80% of the page, whereas the remaining 20% is a white background.

There is only one element which appears to fit the whole width and this has the following style:

<div class="text-elements">
<h2>Your website can achieve...</h2>
</div>

.text-elements {
    float: none;
    margin: 0;
    padding: 75px 10px;

    h2 {
      font-size: 4em;
      width: 100%;
    } 
}

Any ideas why this is happening?

Answer 1

FYI most of the online iPad style tools such as http://ipadpeek.com/ don’t tend to pick up any of these overflow issues anyways.

In the end I found that the issue was at least one or more divs which had explicit widths set, but which were quite hard to find as culprits!

Tips for anyone else with this problem:

1. If you know any design will be responsive, use max-width: Xpx, width: 100%, in your main stylesheets on any explicit width divs to avoid them becoming a culprit in later course.

2. When using width: 100% on items, make sure you add any additional padding to the inner div (especially if it is in pixels), or account for it such as width: 95%, padding: 2.5%.

3. Try overflow: hidden on some of the main wrappers which hold your content to see where issues are coming from.