0

The <iframe> I am using is not being responsive and not pushing the div below (footer) down. You can see the page and check the code with dev tools at: http://www.commercetools.com/en/positions/

Is there something I can do in order to fix it, or is it a issue within the iframe itself, that I cannot fix and need to contact the people who made it?

Julian Samarjiev
  • 479
  • 1
  • 8
  • 23
  • 1
    It isn't very clear what is the behavior you expect... Can you describe more ? Do you expect the iframe to grow according to its content ? – ben Jul 03 '15 at 13:01
  • Your iframe contains a height attribute with a value `200px` – Vibhor Dube Jul 03 '15 at 13:09
  • you may set the CSS style min-height for your iframe if you want it have default height in order to make the footer look nice – Zeal Jul 03 '15 at 13:28
  • Yes, it should expand the div it is in, when the content is longer. The current height is in `px` as it is semi-functional, it does not take a value of 100% for example. – Julian Samarjiev Jul 03 '15 at 13:29

1 Answers1

1

<iframe> "is not being responsive":

I have what seems to be responsive <iframe> code. See this Pen on Codepen. (Note: the embedded site used in the Pen is a parallax site. Although the <iframe> is responsive, the parallax functionality is lost at mobile sizes. Non-parallax sites seem to function correctly. Try href="http://www.popularmechanics.com/space/a11137/secrets-of-the-water-bear-the-only-animal-that-can-survive-in-space-17069978/" as an example.)

The markup and CSS were developed from three sources:

  1. The Stack Overflow Thread Scaling iframes for responsive design CSS-only,
  2. The Ben Marshall article How to Make Responsive Iframes — it’s easy!, and
  3. The Rachel McCollin article Making Embedded Content Work In Responsive Design.

Three salient points are:

  • Specify no attributes in the opening <iframe> tag other than src, specifically not height and width.
  • Wrap the <iframe> in both an inner <div> and an outer <div>.
  • Style the inner <div> inline with style="-webkit-overflow-scrolling: touch; overflow: auto" which are necessary for proper scrolling and overflow handling on mobile devices but which are unstable in CSS. (I found this in a fourth article; I did not save the reference and cannot find it again.)

The rationale behind the markup structure and CSS can be found in the cited sources.

I hope this helps.

Community
  • 1
  • 1
alxfyv
  • 389
  • 1
  • 6
  • 18