[Support request] viewport units on mobile > where and how to insert js (GP + elementor)

[sporenborg]

Hey,

i want to include the scrollbar, site’s navigation or page controls be taken into account for the vw unit. I hope my explanation and my English makes sense and you will understand. Otherwise please have a look at the following link.

I found this tutorial at css-tricks: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ and tried to insert the css and js.

I inserted this code to the css-header

height: 100vh; /* Fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);

and this code into a hook for the frontpage (it only should work there)

<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', <code>${vh}px</code>);
</script>

Furthermore I tried a lot of options in GP Elements were to place this js code. Nothing worked. The actual settings are: hook: header; disable site header: none; execute shortcodes: yes; run php: yes; display rules: frontpage.

Then I had the idea that I should possibly remove the vh in Elementor/Pro slider, which was set to 100 until then, so that this value does not interfere with the script. Actual there is no value set. The Elementor/Pro slider is embed via GP Elements (as a hero slider) “Merge with Content = merge”. We already had a thread for this.

Do you have any idea?

Thx in advance

[Tom]

Hi there,

What exactly are you wanting the code to accomplish? Any examples of the issue + the desired end result?

Let me know 🙂

[sporenborg]

Hey Tom,

a picture speaks louder than words.

If I set the vh of the header to 100 so that the header fills the mobile screen completely, the display of the website in the mobile browser is always overlaid by the page controls of the OS at the bottom of the screen. This is ugly from an aesthetic point of view. And the way described by css tricks solves this small but ugly problem.

thanks in advance

[David]

Hi there,

Your Javascript is incorrect – check it against the original provided on CSS Tricks. Yours has some <code></code> tags in place of ''

[sporenborg]

Hi David,

thanks a lot for your help. I must confess, my knowledge is rather limited. You wrote that my Javascript code is incorrect. I tried it with your mentioned ” ‘ ‘ ” – but even that does not work.

What am I doing wrong?

Design > Elements > rows 1-4

'
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', <code>${vh}px</code>);
'

[David]

The script CSS tricks provides looks like this:

<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');
</script>

[Author]

Posts