This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.
The active forums are here.
May 15, 2012 3:49am
Subscribe [2]#1 / May 15, 2012 3:49am
Hi all.
I am having real trouble getting a site I am building to resize correctly for ipad.
You can see the site here: http://www.richardandersphotography.co.uk
I have added padding to ensure there is a 30px gap on each side of the site, but in portrait orientation it never fits. Does anyone have any ideas why?
Thank you
#2 / May 18, 2012 6:41am
Hi Chris,
I’m not sure if this is going to sort things for you, but a couple initial thoughts ...
If you remove the 30px padding, does the site fit on the screen OK?
And if you add 30px margin instead of padding - does that make any difference?
Cheers
-john
#3 / May 18, 2012 6:47am
Hi John. Thanks for your reply.
I tried both and neither work.
Have you been able to view my issue on an iPad?
In portrait orientation it just an 8th of the width, very strange.
Any other ideas?
Thank you
#4 / May 18, 2012 6:56am
What about if you remove the width and min-width from the masthead_wrapper?
If that still doesn’t work - you might want to try commenting out sections to try and identify which block of content is causing problems. I’ve only had this sort of issue on iPads when I’ve been using negative margins, but I don’t think that’s an issue here. I’m sure it’s down to a width setting somewhere that’s causing the trouble.
Let me know if you have any joy!
Cheers
#5 / May 18, 2012 7:07am
Still no change.
I have already commented out sections to try and find the block that is causing the issue, but no result.
I have just created a test with the following code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,maximum-scale=1.0" />
<style>
#test {
margin: 0 auto;
width: 966px;
background: #FF0000;
}
</style>
</head>
<body>
<div id="test">
Hello
</div>
</body>
</html>And it still doesnt resize. You can see this here: http://www.richardandersphotography.co.uk/index.php/test
Do you have any ideas what could be causing this in this code?
Thank you
#6 / May 18, 2012 7:51am
Right - got it I think!
The below works for me on my iPad. Basically, don’t set a width on the outermost wrapper. And if you need to declare a width, do it on an element inside this parent.
I’m actually surprised I’ve not had this issue myself before 😊
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#test {
margin: 0 auto;
background: #FF0000;
}
.wrapper { width: 966px; }
</style>
</head>
<body>
<div id="test">
<div class="wrapper">
Hello
</div>
</div>
</body>
</html>#7 / May 18, 2012 7:59am
Thanks for getting back to me.
I ran your test, and it doesnt work for me.
The outer div is fitting the screen, but there is a large empty white space to the right? Do you get this?
Thanks
#8 / May 18, 2012 9:05am
It’s working OK for me. This is the test page I threw up: http://mekonta.co.uk/ipad.html
Are you seeing the odd layout on this page too?
#9 / May 18, 2012 9:09am
Yes, there is a white gap on the right about 2 inches or so. Its only the portrait orientation.
Is it on yours on portrait orientation?
#10 / May 18, 2012 9:22am
Oh right. I see what you mean. it allows you to scroll on over to the right doesn’t it.
This site probably explains it better than I can here: http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/
If you change your viewport tag to
<meta name="viewport" content="width=966,
maximum-scale=1.0" />it works. Though it also works if you remove the viewport tag altogether 😊 Personally I’ve only used a viewport tag when building responsive sites. I’m not sure if Apple recommend using it on fixed width sites or not. But it seems you’ll be better off without it.
#11 / May 18, 2012 9:38am
Thanks John.
I have just tried removing the viewport and even just the masthead doesnt fit.
Can you see any reason this wouldnt resize? http://richardandersphotography.co.uk/index.php/test
I must be missing something here? right?
#12 / May 18, 2012 9:46am
Hi Chris,
Your meta viewport tag is still in the HTML 😊
Update that and I reckon you’ll be good!
Cheers
-john
#13 / May 18, 2012 9:54am
Oh dear lord. I think I need coffee.
I have removed the meta tag (checked this time) and your right it does fit.
I then added some margins to ensure there is a gap between content and the edge of the screen and it no longer fits… what the hell?
Any ideas?
By the way! Nice to finally see someone from the south west on here. I am from Plymouth 😊
#14 / May 18, 2012 10:19am
You can see my example here: mekonta.co.uk/ipad.html
I think your problem is where you’ve set width: 966px on elements in your header AND padding of 30px. Which is making the actual width 1026px. Change their width to 906px (so with padding they’re 966px) and that looks good.
Wow - yeah, never seems too many EE guys down this part of the world 😊
#15 / May 18, 2012 10:41am
Hmm, okay, why doesnt it work with the width of 966px (with padding 1026px) but it does with 906px (966px with padding).
The problem is I have to have a width of 966px without padding… surely I am not missing some obvious point again?
Yes! However I actually live in Paris, so not sure I count.