thearmlesswonder

Hi thanks for the reply but thats not what Im talking about unfortunatly. If you use the ipadpeek . com, or a ipad you can see a 200px gap from the right side of the screen on both the footer and header. I made 2 headers in green and yellow to be easier to see.

Hello, I am new but been messing around in building wesites off and on you years now. I have always used templates or wordpress. Been messinf with CSS in bulding a site with dream weaver and I just can seam to get it to show up correcly on my iphone/ ipad and mobile devices.

I have search all over befor posting and im sure some one eles has posted the answer already; i just cant find it.

My goal is just to fix it with out creating a mobile page just yet.

I have some divs set to auto left and right margins plus auto width or not even specifying a width; just hieght. These divs are just some small 5px to 40 px in hieght; header and footers.

They show up great on my desktop/laptop, opera, safair, firefox, chrome. Each of those broswers they fill from left to right of the screen. just what i want.

on mobile devices ( ipad , iphone) and using http://ipadpeek.com/ , they algin to the left and are short in width. here is a my page - martintire.waiine.com

I highlighted my two headers in grean and yellow. so you can see them easier. THANK YOU for any HELP in ADAVANCE !!!!

I have tried the following:

setting postion to relitive in my div / body tag; one at a time or at the same time.

text-align:center; in my body

margings set to auto instead of 0

<meta name="viewport" content="width=device-width, maximum-scale=1.0" /> to the head<meta name="viewport" content="width=device-width, to my Head

display 100% div / body tag; one at a time or at the same time.

with 100% div / body tag; one at a time or at the same time.Putting a wrapper around all divs with CSS margins 0 bla bla bla

a bunch of other stuff I can not remeber.

main.css

index.htm