CODEWITHSUNDEEP
csswebresponsive-designzurb-foundationboilerplate
Sinister Beard
Sinister Beard

Reputation: 3680

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

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?

Upvotes: 9

Views: 13065

Answers (4)

user3914633
user3914633

Reputation: 1

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

Upvotes: -5

Tom
Tom

Reputation: 425

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.

Upvotes: 10

botimer
botimer

Reputation: 641

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

Upvotes: 5

Sinister Beard
Sinister Beard

Reputation: 3680

Add the following code to the CSS file:

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

Upvotes: 20

Related Questions