maramjee Posted April 1, 2021 Share Posted April 1, 2021 Site URL: http://goodwellandbetter.com Hello, I have the custom code I would like to display, its the landing page of the website that I only want to view my p5 sketch, so I embedded it as an iframe. The only issue now is getting the iframe to resize to the height of the screen, so my sketch can be fully visible on different screen sizes without having to scroll. Please help me solve this issue! I entered the following code in Page-->Settings-->Advanced-->Header-->>>> <style> #site-title {display:none!important;} #page.container {display:none!important;} #siteWrapper.clearfix.site-wrapper {display:none!important;} </style> <script> setTimeout(function(){ window.location.href = 'https://goodwellandbetter.com/introduction-and-curatorial-statement'; }, 300000); </script> <div class="sqs-layout sqs-grid-12 columns-12" data-type="page-section" id="page-section-6063a8fceb34c530581d6d9b"><div class="row sqs-row"><div class="col sqs-col-12 span-12"><div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_1_1617144028502_3267"><div class="sqs-block-content"> <iframe frameborder="0" name="Outside the Form" width="100%" height="1080px" src="https://editor.p5js.org/mariamadam/present/SNlipKxEa" allowfullscreen=""></iframe></div></div></div></div></div> Link to comment
maramjee Posted April 4, 2021 Author Share Posted April 4, 2021 On 4/1/2021 at 6:49 PM, bangank36 said: You can set height="100vh" to make sure it span full width I thought that would work too, but when I put height = "100vh", squarespace defaults to setting the iframe at 100px height (since I'm writing it in the Page>Advanced>Header, I think). Any other suggestions, why this isn't working? Beyondspace 1 Link to comment
Beyondspace Posted April 5, 2021 Share Posted April 5, 2021 2 hours ago, maramjee said: I thought that would work too, but when I put height = "100vh", squarespace defaults to setting the iframe at 100px height (since I'm writing it in the Page>Advanced>Header, I think). Any other suggestions, why this isn't working? Remove width and height attribute on iframe and add this css to Design_Custom CSS, it will make the iframe container fit viewport #block-yui_3_17_2_1_1617144028502_3267 { position: fixed; top: 0; left: 0; height: 100%; width: 100%; padding: 0; } #block-yui_3_17_2_1_1617144028502_3267 .sqs-block-content { height: 100%; } #block-yui_3_17_2_1_1617144028502_3267 iframe { top: 0; left: 0; height: 100% !important; width: 100% !important; } creedon, maramjee and tuanphan 2 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
maramjee Posted April 6, 2021 Author Share Posted April 6, 2021 Thank you!! This worked! Beyondspace 1 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