CODEWITHSUNDEEP
responsive-designzurb-foundation
Tom Schreck
Tom Schreck

Reputation: 5287

Zurb Foundation small columns do not flow

I'm working with Zurb Foundation 4.3 and am having trouble wrapping my head around Zurb's small and large column classes. In the code sample below using just large classes for columns, the 2nd column will get repositioned below the first column when the UI width changes. This is nice because it keeps the UI content clean

        <div class="row">
        <div class="large-8 columns rounded">
            Bubbles
        </div>
        <div class="large-4 columns rounded">
            Yadda Yadda Yadda
        </div>
    </div>

However, if I add small classes to the columns, the 2nd column doesn't get repositioned resulting in a messy UI.

        <div class="row">
        <div class="small-4 large-8 columns rounded">
            Bubbles
        </div>
        <div class="small-8 large-4 columns rounded">
            Yadda Yadda Yadda
        </div>
    </div>

I like the ability to be able to change the column widths of the content as the overall page changes widths. However, as I drag the page from wide to narrow, the content doesn't reposition if I use the small classes. What am I missing? Thanks.

Upvotes: 2

Views: 1362

Answers (1)

Nicholas
Nicholas

Reputation: 149

The small classes control the widths of your columns on small screens, without specifying small classes, columns default to small-12 or 100% width on small screens which is why you see them stack vertically.

In your second example, the first column to second columns ratio will be 1:2 for small screens instead the 2:1 on medium screens. The columns positioned next to each other in the same order but their sizes are swapped. This should be what you are seeing.

If you wish to have them stack vertically like in the first example but swap the order of columns, use

<div class="row">
    <div class="large-4 push-8 columns rounded">
        Yadda Yadda Yadda
    </div>
    <div class="large-8 pull-4 columns rounded">
        Bubbles
    </div>
</div>

If this is not what you wish to achieve I'll help you specify another solution

Upvotes: 3

Related Questions