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

Answer 1

I am not sure if I am missing something, but I had to add a .row div for the .centered to work. I can still style the .header to have a full width background in this case, but the .container method did not work for me.

<header class="header">
  <div class="row">
    <div class="centered">
       Logo and stuff
    </div>
  </div>

  <div class="row">
    Some navigation stuff   
  </div>
</header>

Answer 2

Just override the max-width property as max-width: initial;, for example,

    .fullWidth {
       width: 100%;
       margin-left: auto;
       margin-right: auto;
       max-width: initial;
    }

<div class="row fullWidth"> </div>

this works for me :)

Answer 3

If you're using sass, this is a better way:

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

.row{
    &.full-width{ 
        width: 100%; 
        max-width: 100%!important; //might be needded depending on your settings
        &>.column:first-child,
        &>.columns:first-child{ 
            padding-left: 0; 
        }
        &>.column:last-child,
        &>.columns:last-child{ 
            padding-right: 0; 
        }
    }
}

Answer 4

If you don't give it the "row" class and put columns inside it works on a 100% width

Answer 5

Foundation 6 supports this feature naturally with row expanded. code example:

<div class="expanded row">
    ...
</div>

Read more here: http://foundation.zurb.com/sites/docs/grid.html#fluid-row

Answer 6

Just set the

$row-width: 100%;

http://foundation.zurb.com/forum/posts/927-full-width-layouts