CODEWITHSUNDEEP
csscss-position
negrelja
negrelja

Reputation: 422

position absolute iPad container width issue

I am having an issue viewing in iPad safari where my container div is resizing to fit an absolute positioned element. iPad seems to be adding the overflowing element's width to the ".content" 980 width and zooming out to show about a 1080px width. Perhaps there is a property to force the iPad to only size to the 980px width of content?

I have a container div with class of content with the following css properties defined:

.content{
    position:relative;
    width:980px;
    height:100%;
    margin:0 auto;
}
.e1{left:880px;top:892px;width:300px}

Within content I have an absolute positioned element that goes outside of the bounds of 980px width like so:

<div class="content">   
   <div class="e1">
      <img src="images/elements/e1.png"/>
   </div>
</div>

iPad Safari Screenshot

Upvotes: 0

Views: 6111

Answers (2)

CoreyRS
CoreyRS

Reputation: 2267

add this to your head:

<meta name="viewport" content="width=980, user-scalable=0" />

Edit:

Ok, having looked at your code and the screen, I can see that the element isn't actually absolute positioned as you've set top and left but haven't included "position:absolute;". Anywho, it seems the issue is the width of the image so add this to your css

.e1 img{
    width:100%;
    height:auto;
}

Upvotes: 4

user1579141
user1579141

Reputation: 51

I had a similar problem and was able to fix it using the code below, hope this helps...

html,body
{
width: 100%;
overflow-x: hidden;
}

Upvotes: 5

Related Questions