Foundation 4 auto height on container when reducing browser window size

Question

I'm currently trying to center my block elements that i've laid out as a UL within a NAV so each block element is an LI with child elements within it.

This is my first time using F4 or Foundation for that matter.

I've been using .container for new 100% full width divs, within those i use rows (however rows also has 100% width per foundation.css) I want my LI's to be responsive so my logic was to add the .small-# and .large-# classes to the LI's themselves and then figure out how i want them to break and stack at smaller screen sizes.

When i reduce the size of the browser window my elements (LI's) stack on top of each other, which is fine, however the background container does not auto heighten to wrap around these elements.

Anyways here's the markup:

  <div class="container l-capListBg">
            <div class="row capListContainer">
                <nav class="capList">
                    <ul>
                        <li class="small-4 large-2 colums">
                            <img src="img/icon-ds.png" alt="">
                            <h5>Digital<br>Strategy</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, magni iure quod vel dolor excepturi.</p>
                        </li>
                        <li class="small-4 large-2 colums">
                            <img src="img/icon-di.png" alt="">
                            <h5>Digital<br>Interactive</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, laboriosam, quibusdam sequi sint asperiores magni.</p>
                        </li>
                        <li class="small-4 large-2 colums">
                            <img src="img/icon-csm.png" alt="">
                            <h5>Collaboration & Social Media</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, optio officia reiciendis laudantium atque deserunt!</p>
                        </li>
                        <li class="small-4 large-2 colums">
                            <img src="img/icon-is.png" alt="">
                            <h5>Infrastructure Services</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam libero aspernatur aliquid minus aperiam quos!</p>
                        </li>
                        <li class="small-4 large-2 colums">
                            <img src="img/icon-iaas.png" alt="">
                            <h5>Identity-As-A-Service</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil et repellendus cupiditate minus consectetur consequatur.</p>
                        </li>
                        <li class="small-4 large-2 colums">
                            <img src="img/icon-ca.png" alt="">
                            <h5>Communications Analytics</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, eius harum aliquam assumenda officiis nihil.</p>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

And here is the CSS:

.l-capListBg {
    background: $lt-grey;
    position: relative;
}

.capListContainer {
    position: relative;
    // max-width: 1000px;
    // min-width: auto;
    max-height: auto;
    margin: 0 auto;
    background: $lt-grey;
}

nav.capList {
    position: absolute;
    top: -50px;
    left: 0;
    list-style-type: none;
    ul {
        display: inline-block;
        li {
            display: inline-block;
            vertical-align: top;
            padding: 20px 0.5em 0;
            width: 155px;
        }
        img {
            width: auto;
            height: auto;
        }
        h5 {
            font-weight: 200;
            color: $black;
            height: 50px;
        }
        p {
            font-size: 0.750em;
            font-weight: $lighter;
            vertical-align: top;
            line-height: 1.250em;
        }
    }
}

Basically when i reduce the size of the browser window and the LI items begin to stack on top of each other (there are six and they end up stacking 3 rows of 2) the background container (which also has a color of grey) doesn't auto heighten when the other elements that are being pushed down.

I've been working on this for hours and really need some help.

Any advice would be greatly appreciated.

Thanks.

Answer 1

try with this:

foundation block-grid

<ul small-block-grid-3 medium-block-grid-6>
                        <li >
                            <img src="img/icon-ds.png" alt="">
                            <h5>Digital<br>Strategy</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, magni iure quod vel dolor excepturi.</p>
                        </li>
                        <li >
                            <img src="img/icon-di.png" alt="">
                            <h5>Digital<br>Interactive</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, laboriosam, quibusdam sequi sint asperiores magni.</p>
                        </li>
                        <li >
                            <img src="img/icon-csm.png" alt="">
                            <h5>Collaboration & Social Media</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, optio officia reiciendis laudantium atque deserunt!</p>
                        </li>
                        <li >
                            <img src="img/icon-is.png" alt="">
                            <h5>Infrastructure Services</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam libero aspernatur aliquid minus aperiam quos!</p>
                        </li>
                        <li >
                            <img src="img/icon-iaas.png" alt="">
                            <h5>Identity-As-A-Service</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil et repellendus cupiditate minus consectetur consequatur.</p>
                        </li>
                        <li class="small-4 large-2 colums">
                            <img src="img/icon-ca.png" alt="">
                            <h5>Communications Analytics</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, eius harum aliquam assumenda officiis nihil.</p>
                        </li>
                    </ul>