Problem
I have a div with id “stripe” that is using absolute positioning to be at the top of the page and span 100% of the page width. It overlays the top part of the website. The rest of my page is 1000px wide. When viewing on the iPhone, the “stripe” div is only a portion of the screen width. Why?
Solution
If you debug the website for the iPhone, you’ll see that the width of the “stripe” dive is only 320px. Sound familiar? That’s because the width of the iPhone is 320px and so 100% of the viewport is 320px according to the iphone. There are many possible solutions for this. One solution is to make the “stripe” div’s position relative. The relative allows the 100% width expand the entire 1000px . Then in the following div set the margin-top to negative of whatever the “stripe” div’s height is.
Leave a Reply