Grow your CSS skills. Land your dream job.

Fluid width/height parent container for a jQuery slider?

  • # October 10, 2012 at 11:48 am

    I am using [camera](http://www.pixedelic.com/plugins/camera/ “http://www.pixedelic.com/plugins/camera/”) as a content slider on [this](http://dev.magnetmediafilms.com/indextest2/about-us/ “this”) page.

    I would like to set a width/height/background image for the parent div so the space the slider will occupy is drawn prior to the slider loading, to avoid a big jump once the slider loads.

    To do that, I used the following code:
    #camera_bed {
    width: 100%;
    height: 396px;
    }
    However, the page is dynamic in width. And that height is inappropriate for smaller screen sizes.

    Has anyone else run into this issue? Is there a solution in CSS or am I going to need to get jQuery involved?

    Thanks in advance.

    # October 10, 2012 at 2:20 pm

    I found a very workable solution via Chris’s fluid video container:

    .camera_bed {
    width: 100%;
    height: 0;
    padding-bottom: 36%;
    }

    Worked like a charm!

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

You must be logged in to reply to this topic.

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