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 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.

Answer 2

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 3

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 4

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 5

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

Answer 6

You really would want to keep the row class otherwise you lose a lot of the power of the grid system. Why not change the setting for $rowWidth from 1000 (default) to 100%. This can be found in the file foundation_and_overrides.scss

Answer 7

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 8

Use "Section" as in:

<section>
  <div class="row">
   <div class="small-12 columns">
   </div>
  </div>
</section>

Then, assign an ID to the section and use that for your background.

Answer 9

yes, just use like this:

  <div class="large-12 columns">

    <h2>Header Twelve Columns (this will have full width of the BROWSER <---->></h2>

  </div>

Answer 10

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 11

I know that there are already many answers, but I think I have something new to add in this topic if someone is using Foundation 5 and stumbled upon this question (like me).

As Foundation is using REM units, it would be best to alter .row class using them and by adding extra class, so you can have only selected rows full-width. For example by using .full class:

.row.full {
    max-width: 80rem;  /* about 90rem should give you almost full screen width */
}

You can see that it is used like this even in documentation page of Zurb Foundation (they altered .row class, though): http://foundation.zurb.com/docs/ (just look into page source code)

Answer 12

Just set the

$row-width: 100%;

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

Answer 13

This is in regards to Foundation 5. None of the answers given so far, provide edge-to-edge, full widths. That's because inner .columns add padding.

For a true edge-to-edge, full width content, add this to your CSS.

.row.full { width: 100%; max-width: 100%; }
.row.full>.column:first-child,
.row.full>.columns:first-child { padding-left: 0; }
.row.full>.column:last-child,
.row.full>.columns:last-child { padding-right: 0; }

Simply add .full class to a .row you wish to extend full width.

<div class="row full">
  <div class="medium-6 column">This column touches Left edge.</div>
  <div class="medium-6 column">This column touches Right edge.</div>
</div>

Answer 14

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 15

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