iFrame disappearing after closing picture on mobile

Hi Everyone!
I'm pretty new to the web design world. I'm hosting a Christmas display contest voting page and testing before on a page I created for Halloween. I'm working with the 3rd party program call PollUnit to handle the voting. I have most everything working, except, when I'm on mobile and select a picture and close it the iFrame doesn't reload. I have to refresh the page in order for the iFrame to come back. Seems to work fine on desktop, just a mobile issue. Here is my test site in question.
https://www.phillipslincolnlights.com/halloween/contest/best-theme
Maybe an issue with PollUnit too, but wanted to start here first. Any ideas what might be the issue?
I appreciate your time and thank you in advance!

Any thoughts here?

Appreciate if anyone has any ideas here. Thank you!

you have to create a mobile media query for your iframe. the iframe content is typically not responsive. Can you post the iframe code you used for the site for us to see? 

On 11/27/2024 at 3:13 PM, elschwartzo said:

you have to create a mobile media query for your iframe. the iframe content is typically not responsive. Can you post the iframe code you used for the site for us to see? 

Here is my current script.

<iframe width="100%" height=100vh
iframe frameborder="0" allowfullscreen allowtransparency="0" iframe id="myFrame" 
src="https://pollunit.com/polls/2n3xz99eour0qj-r6fc20a?embed=1&embed_options[kill_background]=1&embed_options[kill_title]=1&embed_options[kill_padding]=1"></iframe>
<script src="https://cdn.jsdelivr.net/npm/@iframe-resizer/parent@latest"></script>
<script>
  iframeResize({
    license: 'GPLv3',
    waitForLoad: true,
  }, '#myFrame');
</script>
<script
  src="https://cdn.jsdelivr.net/npm/@iframe-resizer/child"
  type="text/javascript"
  async
></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const iframe = document.getElementById('myFrame');
  
  if (iframe) {
    iframe.onload = function() {
      // Scroll the page to the iframe after it has loaded
      iframe.scrollIntoView({ behavior: 'smooth', block: 'start' });
    };
  }
});
</script>

Add this into the header of the specific page you are working on:

<style> iframe { width: 100%; /* Full width */ height: 100vh; /* Full viewport height */ border: 0; /* Remove border */ } @media (max-width: 768px) { iframe { height: 70vh; /* Adjust height for smaller screens */ } } @media (max-width: 480px) { iframe { height: 60vh; /* Further adjust height for very small screens */ } } </style>