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?

The accepted answer got me started but I had to use this: body, html, .row { margin: 0px; width: 100% !important; min-width: 100% !important; } — Brett Drake, Jun 07 '16 at 12:14

score 20 · Accepted Answer · answered Jul 09 '13 at 08:47

20

Add the following code to the CSS file:

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

answered Jul 09 '13 at 08:47

Sinister Beard

3,570
12
59
95

I don't like this because it makes then entire page 100%. See my example below if you only were looking to make a footer or header 100%. – Tom Jan 17 '14 at 18:55
Well, yes, obviously; but that's not the original question. Yours is a perfectly valid answer to the question you pose in the comments. – Sinister Beard Jan 20 '14 at 09:08
@BFDatabaseAdmin using !important is a good way to ruin stylesheets. Any .row.narrow will not be able to set min-width: 50% because someone on a stackoverflow comment thread has an accepted answer that says the base .row style should have an !important tag in order to override the default min-width on the row... – Lotus May 27 '14 at 17:05
@Lotus - I disagree, but different strokes etc. The Sass answer is below if people want to use that version, and I've upvoted it, but my answer is quick, simple and works even if the user has only a basic knowledge of CSS. – Sinister Beard May 28 '14 at 07:07

score 10 · Answer 2 · answered Jan 17 '14 at 18:54

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.

score 5 · Answer 3 · answered Nov 16 '13 at 19:44

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

score -5 · Answer 4 · answered Aug 06 '14 at 13:55

-5

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

answered Aug 06 '14 at 13:55

user3914633

1

Not adding rows loses the fundamental grid-based structure of Zurb. – Sinister Beard Aug 06 '14 at 14:42

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

4 Answers4