Grow your CSS skills. Land your dream job.

responsive iframe height?

  • # April 12, 2013 at 11:17 am

    I am about to embark on my first responsive design project, but I am still having trouble with some of the main CSS. How can I adjust the iframe’s on this page, (Google calendar agenda and youtube video), to adjust their height with percentages? Are percentages the best way to accomplish this? Does anything else in my code stand out as incorrect? Any and all input will be greatly appreciated as I am still learning the basics.

    http://www.taylorp0994.net/websites/cincoschool/

    # April 12, 2013 at 11:23 am

    It kind of depends on what you want those items to do when the page re-sizes?

    # April 12, 2013 at 11:43 am

    First, I want the agenda iframe to fill 100% of the “widgets” div height.
    Second, I want the YouTube iframe to fill 100% of the height of its container div as well.

    A search on stack overflow revealed nothing but javascript solutions.
    I’m hoping that there is something I can do with CSS w/o using pixel values, unless pixel values would be fine in this case…

    # April 12, 2013 at 11:50 am

    >A search on stack overflow revealed nothing but javascript solutions.

    Well that was the way I was leaning too!

    >Second, I want the YouTube iframe to fill 100% of the height of its container div as well.

    I assume you mean **width**…otherwise it would distort.

    Frankly, I would be looking at moving the elements about using media queries rather than re-sizing them.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".