1

With Zurb foundation version 3, if I include the foundation.css file I'm able to make grids, etc.

With version 4, if I do everything the same way, it does not work.

What am I missing?

1 Answer 1

1

If I do everything the same way

There are new classes to use for grids in V4. You cannot just say four columns but instead specify if the columns are for a large or small view/device. So you need to have small-X or large-X where X is the number of columns a div needs to consume. Here's an example:

<div class="row">
    <div class="ten columns centered">
        <h1>This grid won't work on V4</h1>

        <div class="row">
            <div class="four columns">
                <div class="panel">
                    <p>Left panel</p>
                </div>
            </div>
            <div class="four columns">
                <div class="panel">
                    <p>Center panel</p>
                </div>
            </div>
            <div class="four columns">
                <div class="panel">
                    <p>Right panel</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="ten columns centered">
        <h1>But this will...</h1>
        <div class="row">
            <div class="small-2 large-4 columns">
                <div class="panel">
                    <p>Left panel</p>
                </div>
            </div>
            <div class="small-4 large-4 columns">
                <div class="panel">
                    <p>Center panel</p>
                </div>
            </div>
            <div class="small-6 large-4 columns">
                <div class="panel">
                    <p>Right panel</p>
                </div>
            </div>
        </div>  
    </div>        
</div>

Notice the combination of small and large on a single div. What it tells you is that the Left panel will only be two columns on small devices (mobile phones) and four columns on large devices such as on a desktop. Similarly, the Right panel will be six columns on small devices and four columns on large devices. You can see the difference by playing with the size of your browser.

To get more information on how the V4 Grid works, go to this page.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.