Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Page width and the iPad…

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #35909
    PhotoWebMax
    Member

    I just built an extensive Revo site. I am keeping all the pages hidden while I work out the issues.

    It all performs just great on my 30″ Mac Cinema Display using all kinds of web browsers. I then looked at the site on my iPad 2 and there is a major issue…

    I have a design with a fixed centered width with both a banner and footer area that is supposed to repeat along the x-axis no matter how wide the screen size is. This does not work on the iPad though. Both the banner and footer get chopped off on the right side. I also get an empty one inch area of nothing on the right side of the page which shrinks the whole size of the page needlessly.

    The relevant CSS looks like this:

    html {
    min-height: 101%;
    background: #999999;}

    /* layout css */

    body {
    text-align: center;
    color: #333;
    font-family: "myriad-pro-1","myriad-pro-2", "Lucida Grande", Sans-Serif;
    font-size: 62.5%;
    line-height: 1.7em;
    background:url(../images/stripe.png) repeat;}

    #outerWrapper {
    background: url(../images/bg.jpg) repeat-x top left;}

    #wrapper {
    width:960px;
    margin: 0 auto;
    padding-bottom:60px;
    text-align: left;}

    #banner {
    background-repeat: no-repeat;
    background-image: url(../images/banner.jpg);
    height:260px;}

    #content {width:860px;
    margin: 40px 40px 35px 40px;
    padding:30px 0 40px 0;
    position: relative;
    background: white;
    border: 8px solid transparent;
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    float:left;}

    #footer{
    background:url(../images/bg_footer.png) repeat-x top left;
    min-height:360px;}

    #footerContent{
    width:960px;
    margin: 0 auto;
    text-align: left;
    background:url(../images/footer.png) no-repeat top left;}

    So far I have no viewport declarations in the head area of my template.

    Any ideas on on how to render this system for the iPad? I have no idea what other issues there are with other devices as well…

    Thanks!

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.