Databases
StackOverflow2013
Postsdbo
POMaking an iframe responsive
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMaking an iframe responsive
    primarykey
    data
    text
    <p>I was reading <a href="https://stackoverflow.com/questions/13854198/can-you-make-an-iframe-responsive">this stackoverflow post</a> titled "Can you make an iFrame responsive?", and one of the comments/answers led me to <a href="http://jsfiddle.net/Masau/7WRHM/" rel="noreferrer">this jfiddle.</a></p> <p>But when I tried to implement the HTML and CSS to fit my needs, I didn't have the same results/success. I created <a href="http://jsfiddle.net/brightonkeller/PDYEe/2/" rel="noreferrer">my own JS fiddle</a> so I could show you how it doesn't work the same for me. I'm sure it has something to do with the type of iFrame I'm using (e.g., the product images might need to be responsive too or something?)</p> <p>My main concern is that when my blog readers visit my blog on their iPhone, I don't want everything to be at x width (100% for all my content) and then the iFrame misbehaves and is the only element wider (and hence sticks out past all the other content - if that makes sense??)</p> <p>Anyway, does anyone know why it's not working? thank you.</p> <p>here is the HTML &amp; CSS of MY JSFIDDLE (if you don't want to click on the link):</p> <pre><code>&lt;div class="wrapper"&gt; &lt;div class="h_iframe"&gt; &lt;!-- a transparent image is preferable --&gt; &lt;img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" /&gt; &lt;iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&amp;blog=Brighton+The+Day&amp;widgetid=38585' frameborder="0" allowfullscreen&gt;&lt;/iframe&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>and here is the accompanying CSS:</p> <pre><code>.wrapper { width: 100%; height: 100%; margin: 0 auto; background: #ffffff; } .h_iframe { position: relative; } .h_iframe .ratio { display: block; width: 100%; height: auto; } .h_iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USkonekoya
    1. USBrighton
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POMaking an iframe responsive
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POMaking an iframe responsive
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POMaking an iframe responsive
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThe iframe itself ('the box') can be responsive. But everything inside the iframe is a separate page, and therefore not in the domain of your CSS nor JS.
      singulars
      1. POMaking an iframe responsive
      1. USDA.
    2. COyou could use easyXDM for communication between the page where i-frame is embedded and the document on server the iframe is pointing to.
      singulars
      1. POMaking an iframe responsive
      1. USjohn Smith
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload