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

Home Forums Support viewport units on mobile > where and how to insert js (GP + elementor)

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1245775
    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

    #1245955
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    Let me know 🙂

    #1246087
    sporenborg

    Hey Tom,

    a picture speaks louder than words.

    viewport-units-mobile.jpg

    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

    #1246262
    David
    Staff
    Customer Support

    Hi there,

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

    #1247225
    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>);
    '
    #1247231
    David
    Staff
    Customer Support

    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>
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.