Jump to content

Resizing iframe in squarespace to match window height (dynamically)

Recommended Posts

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
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?

Link to comment
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;
}

 

image.png

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

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.