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