Hey guys, I have figured this out. I just about tore my hair out doing it, but I’ve got it. Just thought I’d pop the instructions below for anyone else in the future!
Pop this bit of CSS into the ‘head’ part in the custom code tab in project settings:
< style>
.left {
height: 100vh; /* Fallback for browsers that do not support Custom Properties */
height: calc(var(–vh, 1vh) * 100);
}
< /style>
Just remember to change ‘.left’ with whatever the container you’re targeting is called.
And put this bit of Javascript into the ‘footer’ part in the custom code tab in project settings:
< 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>
If you want to read up on what it all means, check this link out:
Thanks to everyone in the community for their help!
James
ALSO, REMOVE THE SPACES BETWEEN THE SCRIPT AND STYLE TAGS I’VE HAD TO ADD SO THEY CAN BE POSTED HERE ON THE FORUM