Home › Forums › CSS › Max-Height in responsive iframe CSS ineffective though Max-Width effective. › Reply To: Max-Height in responsive iframe CSS ineffective though Max-Width effective.
By “effective/ineffective” I meant that adjusting max-width worked to adjust the width of the iframe but adjusting max-height did not work to adjust the height. The height stayed at the value calculated by padding-bottom irrespective of the max-height value.
My markup structure was
<div> <iframe></iframe> </div>
and I was applying both the padding-bottom h:w aspect ratio and the max-height constraint to the
<div>. The former was prevailing over the latter, contrary to my expectation.
I’ve discovered that the trick is to make the markup
<div> <div> <iframe></iframe> </div> </div>
and to apply padding-bottom to the inner
<div> and max-height (and max-width) to the outer
<div> along with overflow: hidden.
With that markup and CSS in place, the iframe maintains its h:w aspect ratio yet is constrained in height to the max-height specification and the whole thing is responsive.
At least I think that’s what’s going on.
I edited the Pen to conform to these specs and things work there as expected. I made a /test-iframe page on my website and everything checks out there, with the exception that when the iframe src is a responsive parallax site, the iframe is nonetheless nonresponsive. But that’s another question. (Is there fully responsive iframe code that will successfully embed a parallax site?)