Robin Cox
Robin Cox

Reputation: 1490

Wrapper div in foundation 4

I am wondering how to put a wrapper div around all the rows and still maintain the responsiveness that foundation 4 gives. The reason why I want a wrapper div is that I want to apply a box-shadow to it. Since the rows in foundation 4 are are individual blocks, the box-shadow generates a shadow on the top and bottom of the rows, which I don't want.

This is what I have: http://foundationproj.creeight.se/home.html

I want It to look like this (with the shadow at the edges): http://foundationproj.creeight.se/screen.jpg

Cheers!

Upvotes: 1

Views: 1484

Answers (1)

isherwood
isherwood

Reputation: 61114

I just grabbed the styles from .row and applied them to a new div:

#pageWrapper {
     margin: 0px auto; 
     max-width: 62.5em; 
     width: 100%; 
     box-shadow: 0px 0px 15px;
     border-radius: .5em;
}

<body>
    <div id="pageWrapper">
        ...
        <footer>...</footer>
    </div>
</body>

Upvotes: 2

Related Questions