Responsive iframe to avoid scrolling bar on mobile app

Hi! 

I'm a noob to codes and recently found this great site for live font previews online.

They provide a code: <iframe src="https://app.fontvisual.com/showcases/048d1480-a571-4c6c-a85f-bb20cb2ff093" height="600px" width="100%" frameborder="0" allowfullscreen></iframe>

But it's not responsive to the site (specifically the mobile version), when the page is looked on a phone, it moves into a contained box with a scroll bar. I feel like this will make users frustrated as majority of my customers are mobile users I'd really like to make it so that the iframe takes up the full screen as they scroll.

I've tried to find a solution online, from modifying the code to 100% in height or 100vh, I've even seen people recommend putting this in the design > custom CSS:

#block-yui_3_17_2_1_1619008534514_75765 iframe {

height: 100vh;

}

But nothing has worked. 

Any help would be appreciated! Thanks so much!😄

Hi, in order to hide the scrollbar on iframe, your iframe has to have the same height as its content. If the fontvisual page has more height than the iframe height, it will show scrollbar. You can use javascript to solve this. The below script calculates the height of the content of the iframe and sets the height of the iframe to the content height.

var iframe = document.querySelector('#block-yui_3_17_2_1_1619008534514_75765 iframe');
iframe.onload = function() {
  var iframeDocument = iframe.contentWindow.document.documentElement;
  var newHeight = iframeDocument.scrollHeight;
  iframe.style.height = newHeight + 'px';
};