CODEWITHSUNDEEP
htmlcsszurb-foundation
nycynik
nycynik

Reputation: 7541

Why does foundation some times not size the columns equally?

I have this foundation JSFiddle: http://jsfiddle.net/nycynik/qn8z3cut/2/

and it does not look like tic-tac-toe, instead the right column is flush right, and the rest are all different sizes. I expected them to all have the same size.

<body>
    <div class="wrapper">
        <div class="row">
            <div class="small-12 medium-4 large-4 columns yellow_gradient">
                <h2>1C</h2>
                <p>Rough Diamond</p>
                <hr />
                <p>Poor Performance<br/>High Potential</p>
            </div>
            <div class="small-12 medium-4 large-4 columns green_gradient">
                <h2>1B</h2>
                <p>Future Star</p>
                <hr />
                <p>Good Performance<br/>High Potential</p>
            </div>
            <div class="small-12 medium-4 large-4 columns green_gradient">
                <h2>1A</h2>
                <p>Consistent Star</p>
                <hr />
                <p>Outstanding Performance<br/>High Potential</p>
            </div>
        </div>
        <div class="row">
            <div class="small-12 medium-4 large-4 columns yellow_gradient">
                <h2>2C</h2>
                <p>Inconsistent Player</p>
                <hr />
                <p>Poor Performance<br/>Moderate Potential (new role)</p>
            </div>
            <div class="small-12 medium-4 large-4 columns yellow_gradient">
                <h2>2B</h2>
                <p>Key Player</p>
                <hr />
                <p>Good Performance<br/>Moderate Potential</p>
            </div>
            <div class="small-12 medium-4 large-4 columns green_gradient">
                <h2>2A</h2>
                <p>Current Star</p>
                <hr />
                <p>Outstanding Performance<br/>Moderate Potential</p>
            </div>
        </div>
        <div class="row">
            <div class="small-12 medium-4 large-4 columns red_gradient">
                <h2>3C</h2>
                <p>Talent Risk</p>
                <hr />
                <p>Poor Performance<br/>Limited Potential</p>
            </div>
            <div class="small-12 medium-4 large-4 columns yellow_gradient">
                <h2>3B</h2>
                <p>Solid Professional</p>
                <hr />
                <p>Good Performance<br/>Moderate Potential</p>
            </div>
            <div class="small-12 medium-4 large-4 columns yellow_gradient">
                <h2>3A</h2>
                <p>High Professional</p>
                <hr />
                <p>Outstanding Performance<br/>Limited Potential</p>
            </div>
        </div>
    </div>
</body>

Upvotes: 2

Views: 47

Answers (1)

janfoeh
janfoeh

Reputation: 10328

The foundation.min.css stylesheet you're linking to does not include any of the column classes, e.g. small-12 or medium-4.

Here is an updated fiddle linking to Foundations current CDN stylesheet at http://cdn.foundation5.zurb.com/foundation.css

Upvotes: 1

Related Questions