4

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

Chris Reedy
  • 443
  • 2
  • 8
  • 14

1 Answers1

16

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.

Fernker
  • 2,238
  • 20
  • 31
  • Thanks, this fixed the issue with the mobile version of Safari but the Chrome version is still not positioning the div properly. Any other ideas how to resolve chrome? – Chris Reedy Apr 10 '13 at 21:25
  • 1
    Not really, I can't test that equally. I can debug on iPhone in Safari on my Mac but I can't do that with Chrome. Just keep playing around with it and try different things. It's probably something seemingly small but that is having a big effect. – Fernker Apr 10 '13 at 21:35