iPad CSS for Page Rendering

HTML & CSS
1

Having a little trouble getting this page to render correctly on an iPad. Anyone have any suggestions?

2

What’s the issue with it? I just checked and it looked OK.

3

Interesting how you don’t see anything wrong with it when iPadPeek showed differently. I guess there’s no point in continuing to worry about it.

Thank you for checking.

4

What do you see that’s wrong, though. I may be missing something.

5

Horizontal scroll bar was displaying and there was this huge gap on the right side of the screen.

6

Yeah, there’s not scroll bar for me on iPad, but I was only checking the landscape view. In portrait, there’s a gap between the header and next section, caused by this:

@media screen and (max-width: 1024px) {
  #contentinfo {
  max-width: 900px;
  [COLOR="#FF0000"]margin-top: 213px;[/COLOR]
  }
}

.
.
.

#contentinfo {
width: 100%;
max-width: 959px;
padding: 42px;
[COLOR="#FF0000"]margin-top: 413px;[/COLOR]
margin-right: auto;
margin-left: auto;
background: url(../images/backgrounds/content-bkgrd.png) 0 0 no-repeat;
background-size: 100% auto;
}
7

Thank you, ralph.m and good eye!

Looks like I’ll be getting into Bootstrap 3 soon and won’t have to put up with so much formatting in the future!

8

I wish you well, but I doubt that a framework like that will the the end of your troubles. It’s. usually the start of bigger ones. :rolleyes: it’s always better to start from scratch, IMHO, or at least from a set of files you created yourself and which you thus understand. Frameworks are full of so much stuff you don’t need that it’s like building a house from a pile of rubble. That’s how I see it, anyway, and a lot of people come here with problems caused by confusing,bloated frameworks.

9

Considering that I don’t use many of the components of Bootstrap, I find it’s quick, automated alterations for mobile devices needs very minimal adjustments (at least that’s the impression I get when I read the documentation).

True that no Responsive Design Framework is full-proof, but sometimes it beats spending hours trying to perfect mobile compatibility. I don’t plan on solely trying Bootstrap. Apparently there are 20+ frameworks and only five work well, apparently. It’s worth a shot to try and compare to see how well they work.

Thank you again, ralph.m for the extra eyes. I appreciate your invested time in what you do here at Sitepoint.

10

You’re welcome. :slight_smile:

11