zurb foundation is it possible to have full row width

Question

I'm using foundation 3 to build a responsive website but I want to have the Footer and Navigation background width to occupy the entire width? I have named my rows as

class="row navigation"
class="row footer"

I tried looking for how to fix this but I'm out of options. I'm assuming it is a small fix in the foundation.css file but it's a bit too overwhelming at the moment as I'm new to it.

Any poiinters much appreciated.

Answer 1

I ran into the same problem yesterday. The trick is, for full width spanning blocks, you just keep them out of the row/column structure, since row/column will always apply the default padding. Keep your footers and headers on their own, and use row/column inside them.

<header>
    This will span the full width of the page
</header>
<div class="row">
    <div class="twelve columns">
        This text will flow within all typical padding and margins
    </div>
</div>
<footer>
    This will span the full width of the page
    <div class="row">
        <div class="twelve columns">
            This text will flow within all typical padding and margins
        </div>
    </div>
</footer>

Answer 2

What I have been doing is to add a custom class so that I can chain it with .row and override the max-width setting.

<div class="row full-width"></div>

.row.full-width {
  width: 100%;
  max-width: 100%; 
}

I put width in here too to cover bases, but it is already declared in foundation.css so you can just omit it.

Answer 3

If you're using Zurb Foundation Framework, simply remove the row class and wrap the element in a class container that is 100% width. Now you probably want to center the stuff, use class centered like this:

<div class="container navigation">
    <div class="centered">
        Some navigation stuff
    </div>
</div>

Answer 4

I completely disagree with the answer. You shouldn't have to use !important

Please refer to my article and demo at http://edcharbeneau.github.com/FoundationSinglePageRWD/

You should be able to get what you need from there. The demo is for 2.2 but is very similar in function to v3.