Join Chris Converse for an in-depth discussion in this video Modifying the CSS to use the full screen dimensions, part of Creating an iPad App with HTML5 and PhoneGap Build.
Next we're going to modify the CSS from our iPad web application to take advantage of the full screen. So, from the includes directory, let's open esales_aid.css up in our text editor. Now inside here, what we want to do is scroll down, and we're going to look for the orientation based rules. So, the first one we can see here on line 64, page landscape, position relative. We have a width of 1024 and a height of 748. Now the iPad screen is 768, but for the web application we need it to allow 20 pixels for the top status bar.
So let's come in here and change the 748 to 768. That gives us 20 extra pixels for the article area. So down here on line 66, I'm going to come down here and change the 618 to 638. And then down on the content container we're going to change 618 to 638 here as well. Next I'll scroll down to the portrait rules. Here we can see the page portrait, we have the width 768 but a height set to 1004. Let's come in and change this to 1024.
And unlike Landscape view, in Portrait view, since we have much less pixels on the width, that makes the navigation a little bit closer to the orange teapot on the homepage. So we need to make sure the orange teapot does not overlap our navigation elements. So we're not going to make a change to the height here because we need that couple extra pixels to make sure the teapot doesn't collide. With the Contact Us button in the navigation. So now with these changes made, let's come up to the file menu, let's choose Save. Let's switch back to our browser, let's hit Reload. Now we're looking at portrait view here, so we can see the few extra pixels that we have to make sure that the orange teapot doesn't collide.