Reputation: 1490
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
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