thearmlesswonder Posted April 19, 2014 Share Posted April 19, 2014 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 More sharing options...
dsonesuk Posted April 20, 2014 Share Posted April 20, 2014 By default the body tag has margin of about 10px all around, that is what you are seeing, the body background-image will repeat to full width of browser window regardless, child elements of body will show the 10px ish gap. Link to comment Share on other sites More sharing options...
thearmlesswonder Posted April 21, 2014 Author Share Posted April 21, 2014 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 21, 2014 Share Posted April 21, 2014 (edited) 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 April 21, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now