How to fix embedded PDFs that display cropped on mobile devices but work on desktop?

Post author
Jules Gold

Hello everyone, I'm having trouble with getting my embedded pdf to show up properly on the mobile device. I followed the tutorial posted by the memberstack team on youtube and it works perfect on my computer, but fails on my phone. I have an iPhone 13 Pro Max and when I go to the page with the file, it just shows a cropped part of the file, obscuring the rest of the page.

Can someone help?

I've threaded the code provided to me and the youtube video link below.

Thank you.

https://www.youtube.com/watch?v=nCGQauC5tjo&ab_channel=MemberstackTeam

<script>  document.addEventListener("DOMContentLoaded", function () {    const pdfElements = document.querySelectorAll('[ms-code-pdf-src]');    pdfElements.forEach(function (element) {      const src = element.getAttribute('ms-code-pdf-src');      const height = element.getAttribute('ms-code-pdf-height') || '500px';      const iframe = document.createElement('iframe');      iframe.src = src;      iframe.style.width = '100%';      iframe.style.height = height;      iframe.style.border = 'none';      // Set the iframe to block to remove any inline element gaps      iframe.style.display = 'block';      iframe.setAttribute('scrolling', 'auto');      element.innerHTML = '';      element.appendChild(iframe);    });  });</script>

Comments

1 comment

Please sign in to leave a comment.