Hi Ismael,

Thank you for pointing me in the right direction. After some experiments we succeeded with the following code:

Script iFrame sender

  <script>

    // iFrame send height

    window.addEventListener('DOMContentLoaded', (event) => {

      const main = document.querySelector(".beeldverhaal");

      window.postMessage(main.offsetHeight, 'https://oudlisse.nl/');

    });

  </script>

And in the site using the Enfold theme add this to functions.php

// apply received iframe height

function ava_custom_script_mod_iframe_height() {

  if ( wp_script_is( 'avia-default', 'registered' ) ) {

    wp_add_inline_script( 'avia-default', '

      window.addEventListener("message", (event) => {

        if (event.origin.startsWith("https://data.oudlisse.nl")) { 

          const container = document.getElementById("iframe-container");

          container.style.height = event.data + "px"; 

        } 

      }); 

    '

    );

  }

}

add_action( 'wp_enqueue_scripts', 'ava_custom_script_mod_iframe_height', 9999);

Thanks for your help.

Kind regards,
Henk

Hey Ismael,

Sorry, the site was down. the site is available again.

Kind regards,
Henk

Hi Yigit,

This makes it a little better. Now a part of the transparancy logo is visible while srolled down.
But transparancy logo is still visible while page is scolled up and the default logo does not dissapeared while scrolling down.

Kind regards,
Henk

Hi Victoria,

I like to do that. Here is the link: https://oudlisse.nl.

Kind regards,
Henk

Hi Ismael,

Thanks for your suggestion. This CSS workaround has effect. Great! The image distorts indeed a bit.

The actual model of the iPad is ‘iPad Pro 12,9” Retina display (2732 x 2048 px).
However the problem also occurs on an iPad min 3 (2048 x 1536 px) and on the old iPad WiFi (2012) (2048 x 1536 px).

I prefer not enlarge dpi because I also get a larger image file size which effects response.

Kind regards,
Henk

Hi Yigit,
Perfect. Switching position of the sliders resolved the issue.
Thanks.

Kind regards,
Henk