title: Resizing iframe in squarespace to fit any screen size
body: <p>I have the custom code I would like to display (see below), its the landing page of the website that I only want to view my p5.js sketch, so I embedded it as an iframe. <strong>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.</strong> Please help me solve this issue!</p>
  <p>I entered the following code in Page--&gt;Settings--&gt;Advanced--&gt;Header--&gt;&gt;&gt;&gt;</p>
  <pre><code>&lt;style&gt; 
    #site-title {display:none!important;}
    #page.container {display:none!important;}
    #siteWrapper.clearfix.site-wrapper {display:none!important;}
    
    
  &lt;/style&gt;
  
  
  &lt;script&gt;
           setTimeout(function(){
              window.location.href = 'https://goodwellandbetter.com/introduction-and-curatorial-statement';
           }, 300000);
  &lt;/script&gt;
          
        &lt;div class=&quot;sqs-layout sqs-grid-12 columns-12&quot; data-type=&quot;page-section&quot; id=&quot;page-section-6063a8fceb34c530581d6d9b&quot;&gt;
  &lt;div class=&quot;row sqs-row&quot;&gt;
  &lt;div class=&quot;col sqs-col-12 span-12&quot;&gt;
  &lt;div class=&quot;sqs-block code-block sqs-block-code&quot; data-block-type=&quot;23&quot; id=&quot;block-yui_3_17_2_1_1617144028502_3267&quot;&gt;
  &lt;div class=&quot;sqs-block-content&quot;&gt; 
  &lt;iframe frameborder=&quot;0&quot; name=&quot;Outside the Form&quot; width=&quot;100%&quot; height=&quot;1080px&quot; src=&quot;https://editor.p5js.org/mariamadam/present/SNlipKxEa&quot; allowfullscreen=&quot;&quot;&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>