title: Allowing responsive iframe of specific part of page - how?
body: <p>I have this code I put together from various sources to allow embedding an iframe of a specific part of a page:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  body {background:transparent;
  height:2000px;
  width:870px;
  }
  &lt;/style&gt;
  &lt;div style="border: 1px solid rgb(250, 0, 0); overflow: hidden; margin: 0px auto; max-width: 900px;"&gt;
  &lt;iframe scrolling="no" src="https://https://sites.google.com/site/yourcommentsite/test" style="border: 0px none; margin-left: -15px; height: 9999px; margin-top: -365px; width: 900px;"&gt;
  &lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The reason for this code is explained here: <a href="https://sites.google.com/site/yourcommentsite/" rel="nofollow">https://sites.google.com/site/yourcommentsite/</a></p>
  
  <p>The first part is for transparency around the iframe, inside the gadget that will include the iframe (doesn't work with Google Site unless it's in a gadget). Then I make a red bordered "window" that includes the iframe of a site. I size the iframe and position it relative to the "window" and I have the comment section embedded. This code embeds a 900px wide and 9999px long iframe.</p>
  
  <p>This is for use with Google Sites, to allow embedding of a specific part of the page of another Google Site.</p>
  
  <p>The problem is: it's not responsive, so the istructions are a bit complicated and dependent on user's screen resolution, so people trying to use it will be making a fixed size iframe, and other displays will cut the iframe or make it too small. If the iframe is cut/overflows a scrollbar will appear, but it's not the cleanest solution.</p>
  
  <p>I want to make it responsive, but solutions I've seen I can't make them work with the "window" that allows getting a specific part of site only.</p>
  
  <p>I know close to nothing of coding, so could you help me find a solution?</p>
  
  <p>Also, it's very difficult to add javascript to Google Sites, and it doesn't allow src="xxxx.js" or "xxxx.css".</p>
  
  <p>Thanks!</p>