Responsive container height

1 Views

I set up the slideshow on this site to be responsive but now I need the container height to adjust with the image inside.

http://www.yourwhiteknight.com/test/

Read More

HTML: 

<div id="feature">
    <div class="topshadow clearfix" style="position: relative; width: 1113px; height: 335px;">
        <div class="feat_box first" style="display: none; position: absolute; top: 0px; left: 0px; z-index: 10; opacity: 0; width: 1113px; height: 325px;">
            <div class="textwidget"><img src="http://www.yourwhiteknight.com/wp-content/uploads/2014/08/Company-Photo_MF-RE-Page-Slide-Show.jpg">
            </div>
        </div>
        <div class="feat_box" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 10; opacity: 0; width: 1113px; height: 325px;">
            <div class="textwidget"><img src="http://www.yourwhiteknight.com/wp-content/uploads/2015/11/New-Home-Page-Photo-copy-2.jpg">
            </div>
        </div>
        <div class="feat_box" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 10; opacity: 0; width: 1113px; height: 325px;">
            <div class="textwidget"><img src="http://yourwhiteknight.com/wp-content/uploads/2012/10/iStock_000016899532Medium.jpg">
            </div>
        </div>
        <div class="feat_box" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 10; opacity: 0; width: 1113px; height: 325px;">
            <div class="textwidget"><img src="http://yourwhiteknight.com/wp-content/uploads/2012/10/iStock_000018818618Medium.jpg">
            </div>
        </div>
        <div class="feat_box" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 10; opacity: 0; width: 1113px; height: 325px;">
            <div class="textwidget"><img src="http://yourwhiteknight.com/wp-content/uploads/2012/10/iStock_000002082925Medium.jpg">
            </div>
        </div>
        <div class="feat_box" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 10; opacity: 0; width: 1113px; height: 325px;">
            <div class="textwidget"><img src="http://yourwhiteknight.com/wp-content/uploads/2012/11/golf2.jpg">
            </div>
        </div>
        <div class="feat_box" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 10; opacity: 0; width: 1113px; height: 335px;">
            <div class="textwidget">
                <p><img src="http://yourwhiteknight.com/wp-content/uploads/2012/10/Sunnyside-015.jpg">
                </p>
            </div>
        </div>
        <div class="feat_box" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 10; opacity: 0; width: 1113px; height: 325px;">
            <div class="textwidget"><img src="http://yourwhiteknight.com/wp-content/uploads/2012/10/iStock_000018294410Medium.png">
            </div>
        </div>
        <div class="feat_box" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 10; opacity: 0; width: 1113px; height: 325px;">
            <div class="textwidget"><img src="http://www.yourwhiteknight.com/wp-content/uploads/2012/10/cars.1200.jpg">
            </div>
        </div>
        <div class="feat_box" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 11; opacity: 1; width: 1113px; height: 325px;">
            <div class="textwidget"><img src="http://www.yourwhiteknight.com/wp-content/uploads/2012/10/balloons-1200.jpg">
            </div>
        </div>
    </div>
</div>

It looks like it is the .topshadow class, but I am not sure what should be put in here.

Post Views: 1

Related posts

3 comments

  1. use vw on your height and width so it will take a percentage of the screen width opposed to having a fixed px height and width. Also setting a fixed height and width could be overriding the classes you are putting on it, so use responsive values like vw, vh, or %, or don’t give them a height and width and let your classes take care of all that.

  2. I suggest creating a flexible div like this:

    HTML

    <div id="flex"> Your slider </div>

    CSS

    div#flex { width: 100%; height: auto; margin: 0px; max-width: initial; }

  3. I took Geckob’s comment and added a new slider to the theme that is responsive. Thank you all for your suggestions but this seemed like the easiest solution.

Comments are closed.