Jump to content

Responsive iframe to avoid scrolling bar on mobile app

Recommended Posts

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!😄

Link to comment
  • Replies 1
  • Views 2.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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';
};

 

Edited by Vicks
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.