-2

This is the website:

https://goomaps.co

I want the panoramic background to be 100% height, no matter what I am trying I can't seem to find why it's not working. Can anyone take a look at the source with fresh eyes and let me know what I'm missing.

Here's the code:

<script src="/vtour/tour.js"></script>

<div id="pano" style="width:100%; height:100vh; overflow:hidden;"></div>

<script>
 embedpano({swf:"vtour/tour.swf", xml:"vtour/tour.xml", target:"pano"});
</script>

100vh works fine on desktop but breaks on mobile. I would rather use height:100% When I change the height value, all I get is a white screen and the debug tool shows the height is 0px

Note: It's currently set to 97vh just for testing. But there's still a white bar at the bottom. And even worse on mobile. If you set it to 100vh it breaks on mobile and the navigation buttons disappear.

Ricadam
  • 19
  • 4
  • 3
    Please include a [mcve] in your post, instead of linking to a website. – TylerH Aug 23 '17 at 13:31
  • 1
    `1vw` is 1% of the browser width, `1vh` is 1% of the browser height, so `height: 100vh;` should do exactly what you want. – Scoots Aug 23 '17 at 13:32
  • For some reason, 100vh overshoots on mobile, so you have to scroll. – Ricadam Aug 23 '17 at 13:33
  • @TylerH I'd love to but in this case the minimal version would work (as tested on condepen already). – Ricadam Aug 23 '17 at 13:35
  • @Ricadam Then that's not a minimal version; an mcve is minimal, but also complete and verifiable. If we can't reproduce your error, then the demo is below minimal. – TylerH Aug 23 '17 at 13:37
  • it overshoots beacause of the url bar, you can set overflow:hidden on mobile in order to hide the 5% that overshoot, but never use things like 95% – Neil Aug 23 '17 at 13:42
  • I agree though. There needs to be some type of code sample here, that atleast outlines whats going on, because the site might not be up in the future. – Dan Zuzevich Aug 23 '17 at 13:49
  • I'll try to cut the fat with the code for you :) – Ricadam Aug 23 '17 at 13:52
  • Code has been added – Ricadam Aug 23 '17 at 13:58

3 Answers3

1

#pano has this

width: 100%;
min-height: 97vh;
height: 97vh;

if you change height: 97vh to height: 100vh it will be full height

Community
  • 1
  • 1
Moaz Mabrok
  • 697
  • 10
  • 32
  • Note: It's currently set to 97vh just for **testing**. But there's still a white bar at the bottom. And even worse on mobile. If you set it to 100vh it breaks on mobile and the navigation buttons disappear. – Ricadam Aug 23 '17 at 13:50
  • use `height: calc(100vh - white barpx);` @Ricadam – Moaz Mabrok Aug 23 '17 at 13:52
1

Inspecting the #pano element in the browser dev tools gives me this.

width: 100%;
min-height: 100vh;
height: 97vh;

It looks like there is some inline styling on that element giving it those properties. Change the height too 100vh. Also, using vh on mobile kind of blows because when mobile browsers initially start at the top of the page, the browser url bar is present, and when you start to scroll, the url bar will dissappear and the element with 100VH will immediately try to fill the whole screen. This results in a really poor looking "animation" if you will.

Dan Zuzevich
  • 3,651
  • 3
  • 26
  • 39
  • This is my problem. I don't want to use vh because it breaks on mobile. It's just to test the aesthetic. See the note in the question. – Ricadam Aug 23 '17 at 13:51
  • Just set to a fixed height then. You will have to override whatever divs have 100vh set on mobile by using media queries. Try setting the height in em's instead on mobile. If its really important that the background image take up full height, then youll have to use some type of other approach, but thats up to you. – Dan Zuzevich Aug 23 '17 at 13:55
  • the navigation buttons at the bottom are attached to the div which contains the background if the background is not aligned properly the buttons either overlap or disappear under the fold. A fixed height is not practical – Ricadam Aug 23 '17 at 14:00
  • This is not an easy thing to reproduce, try reading through all of the answers here. https://stackoverflow.com/a/31330874/6440990 – Dan Zuzevich Aug 23 '17 at 14:08
0

Ok so I have figured this one out:

I forgot to account for the header (as it was transparent) so I needed to modify the height CSS:

height:calc(100vh - 30px)

problem solved.

Ricadam
  • 19
  • 4