Jump to content

DIV's / margin align left instead of filling screen on ipad/iphone/mobile


thearmlesswonder

Recommended Posts

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

Link to comment
Share on other sites

I would imagine it is because you are using fixed width of 1400px + plus and the headers with width:auto will extend to the screen width of 1024px, desktop would not have this problem because screen size is most likely greater than 1400px and so accommodate and stretch to and beyond this fixed width.

 

EDIT: multiple identical id references are not allowed, should be unique within the page.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...