Streaming live at 10am (PST)

100vh Height Mobile Issue Solution

Hey all! I am trying to make a script to have the height of the divs set to 100vh even on mobile devices here is my code:

<style>
.vh-full-fix {
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}
</style>
<script>
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});
</script>

It works well, but when I rotate on Chrome mobile the height dont’t fit :thinking:
Has anyone faced this problem before?
Thank you!