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>
1 comment
Hello, you could share a link to the site where the issue is happening to have a look. But it's possible your pdf is too large for mobile sites and the content is overflown
https://www.reddit.com/r/accessibility/comments/1fu1pkk/any_idea_on_making_pdf_responsive/
Please sign in to leave a comment.