How do I make rows in Zurb Foundation 4/5 full screen?

Question

By default, rows in Zurb Foundation 4 and 5 run at a max width of 1000px, even on very large monitors, which creates margins on either side of the content. How do I make it run at full screen without affecting the responsiveness of the design?

Answer 1

Add the following code to the CSS file:

.row {min-width:100% !important;}

Answer 2

I think the best way to do this is like this.

Add this into your css or a custom css-

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

Then in your html, do this-

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

This will allow you to keep the grid system in tact in the event you only want to use full screen for a header or footer.

Answer 3

If you are using Sass/Compass, the zurb-foundation gem, or a customized Foundation distribution, you can set the $row-width variable. This will flow through anywhere else it's used. You can also adjust, for example, the number of columns, gutter width, and so on.

The bottom of the grid documentation explains more: http://foundation.zurb.com/docs/components/grid.html

Answer 4

<div class="row">
    <div class="large-6 columns"></div>
    <div class="large-6 columns"></div>
</div>

this will give a width of 1000px

<div class="large-6 columns"></div>
<div class="large-6 columns"></div>

but if you use the column class without the rows class the you will get fullscreen...