html - Banner height not the device height only on iPad -
http://darrenbachan.com/playground/diamond-hand-car-wash/index.html
i've tested site on desktop chrome, android, samsung tablet, iphone 6, , ipad. banner doesn't work on ios, ipad. height becomes massive , doesn't match height of device.
i'm not sure in code it's incorrect, on devices i'd banner height of window, hope used term right.
the code banner grabbed article responsive height/width video header
here's code have:
#banner.container-fluid { padding: 0; position: relative; } #banner.overlay:after { position: absolute; content:" "; top:0; left:0; width:100%; height:100%; display: block; z-index:0; background-color: rgba(0,0,0,0.8); } header { position: relative; overflow: hidden; width:100vw; height:100vh; max-height:100vh; text-align:center; } .banner-text { position: relative; top: 55%; -webkit-transform: translatey(-50%); -ms-transform: translatey(-50%); -o-transform: translatey(-50%); transform: translatey(-50%); z-index: 1; margin: 0 auto; max-width: 550px; /*left: 50%;*/ /*transform: translate(-50%, -50%);*/ } .banner-text h1, .banner-text h4 { color: #fff; } .banner-text h1 { padding-bottom: 20px; } .banner-text h4 { padding-bottom: 40px; } .banner-text .logo-white { width: 75px; height: 65px; display: block; margin: 0 auto 20px auto; } .video-holder { position:absolute; height:100%; width:200%; left:-50%; } video { position:absolute; top: -99999px; bottom: -99999px; left: -99999px; right: -99999px; margin: auto; min-height:100%; min-width:50%; }
apparently, webkit team deliberately added. issue had been created it's since been closed wont fix
.
solution (not ideal)
@media , (device-width: 768px) , (device-height: 1024px) , (orientation:portrait) { header { height: 62vh; } }
in testing, didn't need add styles landscape, testing on ipad simulation. results on actual ipad may vary.
Comments
Post a Comment