• Page width and the iPad...#

  • 23299
    1,116

    Photowebmax Reply #1, 4 months, 3 weeks ago

    Reply
    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!


  • 32316
    322

    whistlemaker Reply #2, 4 months, 3 weeks ago

    Reply
    You got me intrigued - despite that there was probably not enough information to figure anything out since we only have the css, no html or images.

    Since nothing popped out at quickly reading the css I made up a page by copying your css and adding divs with ids from your css. And it seems to work, I checked with the iPad simulator (I do not yet own an iPad) - so if it does not work (and assuming the simulator is telling the truth!) then perhaps it is the background images that are messing things up - maybe just knowing the size of the images would help, what sizes are they?

    Oh and I had to guess about your outerWrapper and wrapper - what do they wrap?


  • 23299
    1,116

    Photowebmax Reply #3, 4 months, 3 weeks ago

    Reply
    I am reading up on all this now.

    So far I have a temp fix that really helps, but I am still not perfectly happy. I added this to my template:

    <meta name = "viewport" content = "initial-scale = 1.0">


  • 9995
    322

    fourroses666 Reply #4, 4 months, 1 week ago

    Reply
    can't u use min-width instead of width?