Issues with Absolute Positioning of Div in Mobile Browser

Question

I am having a lot of issues absolutely positioning a div called id="verticalGenesis" on the following website: http://genesispetaluma.com/index.html in a mobile browser, including both Safari and Chrome on the iPhone. I ideally am trying to position a logo to appear at the right of my screen using the following css:

#verticalGenesis {
background-image: url("../img/Genesis%20Text.gif");
background-repeat: no-repeat;
display: block;
height: 570px;
opacity: 0.8;
position: absolute;
right: 3%;
top: 70px;
width: 123px;
}

This displays fine in all desktop browsers, just as I am expecting, but is appearing in the middle of the screen on mobile browsers. I have experimented with using right: 3% as well but I am having the same issues.

I am sure that there must be a simple answer to this problem but I have searched everywhere on the web and stackoverflow and I can't figure this out. Could someone please point me in the right direction?

Thanks,

Chris

Answer 1

This won't completely fix your issue but it will get you closer. On the parent div id=wrapFix you should add position: relative to it. The problem is that when you have an element with position: absolute it needs to know what it should be absolute against. While it worked fine on desktop browsers it broke on mobile. Probably because of screen size or something. But I've added that line to that div and it seems to be a lot closer to fixing the issue on iPhone.