1

I'm trying to make a fully responsive website using HTML, CSS and minor Javascript.

I've managed to achieve this across Chrome, Firefox, Opera, and IE. However Dolphin browser causes a malformed layout.

I have a background image on my div element which is not fully scaled and is cut off about 30% or so down the divs height.

I'm done some research and came up with nothing specific about Dolphin to cause this behaviour.

.cover-image {
background-image: URL("Images/background.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
height:90%;
}
Shane Creedon
  • 1,573
  • 1
  • 14
  • 18
  • Background-attachment: fixed; is disabled in some browsers (Safari on iPhone) for example. This could be the case. – sdvnksv Sep 04 '16 at 21:26
  • @Deka87 is correct about `background-attachment: fixed` on Dolphin - see http://www.quirksmode.org/css/backgrounds-borders/mobile.html. Fwiw, though it can be a fun challenge to make a site that's compatible with *every* browser, as of this writing most devs I know [yes, anecdotal] will only test Chrome, Safari, Firefox, mobile Safari, IE ≥ 9 (possibly ≥ 8, or possibly only ≥ 10, depending and the shop), and the latest Edge. – henry Sep 04 '16 at 21:43
  • 1
    @henry & Deka87 Thanks for your comments guys. – Shane Creedon Sep 04 '16 at 21:49

1 Answers1

0

I changed the height of the body to em units rather than vh units (viewport height) and this seemed to solve my issue on Dolphin while maintaining the same appearance on other browsers.

Shane Creedon
  • 1,573
  • 1
  • 14
  • 18