dampwetbody Posted November 8, 2022 Share Posted November 8, 2022 Hello! I'm trying to have this fun toy I made in Cables.gl fill the entirety of a section for the home page of my site. The goal is for it to fill the screen entirely underneath the header and above the footer. This is the page I want to add it to:https://dampwetbody.xyz/home This is the thing I am trying to addhttps://cables.gl/p/rZqwDb Using this embed code: <iframe style="width:640px;height:480px;border:0px;" src="https://cables.gl/view/630c2964975b8e86b85d8623"></iframe> I have changed the width and height values, but once it reaches 100% width it becomes thin and the height value seems to not change anything. I have limited experience with custom css and html so any help would be greatly appreciated! Thanks! Link to comment
tuanphan Posted November 10, 2022 Share Posted November 10, 2022 Hi, It looks like you figured it out? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
dampwetbody Posted November 13, 2022 Author Share Posted November 13, 2022 kind of, this solution doesn't seem to work very well for mobile sites, Preferably the page would resize to fit the screen for all resolutions. It also extends a little below the screen when I would prefer it fit the screen between the header and footer. Any ideas? I added this to the css } #iframetoy { position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0px; overflow: hidden; } #iframetoy iframe { position: absolute; top:-2px; left: -2px; width: 101%; height: 102%; } and this to iframe embed <div id="iframetoy"> <iframe src="https://cables.gl/view/630c2964975b8e86b85d8623" ></iframe> </div> Link to comment
dampwetbody Posted November 15, 2022 Author Share Posted November 15, 2022 If anyone happens to find this again, I seemed to find a solution by adding this to the individual pages header as tuanphan recommended to another user a while ago <style> html, body {margin: 0; height: 100%; overflow: hidden} </style> then this in the iframe embed itself <iframe src="https://cables.gl/view/630c2964975b8e86b85d8623" width="100%" height="95vh" frameborder="0" scrolling="0" style=" height: 95vh; " seamless="seamless" allowfullscreen="allowfullscreen"></iframe> tuanphan 1 Link to comment
hiphopman Posted February 24 Share Posted February 24 Hi, I also have a similar issue: I am trying to embed this dashboard to my site using iFrame. Right now it won't adjust to different size screens and doesn't fill the entire page. I would like the entire page to be my dahsboard, then have the header on top and footer at bottom. Should be simple enough? Thanks I am using this code at moment: <iframe src="https://fatbeats.sagedataanalytics.com/Default/View/Public/Fat%20Beats%20Vendor%20Dashboard?embedded=true&Filter=" width="100%" height="95vh" frameborder="0" scrolling="0" style=" height: 95vh; " seamless="seamless" allowfullscreen="allowfullscreen"></iframe> Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment